تعلم لغة css: التحكم في تصميم الجداول Tables

رأينا في الدرس السابق طريقة التحكم في اللوائح Lists، واليوم سنرى:

كيف يمكنك التحكم في تصميم الجداول html tables عبر تغيير الطول والعرض، الألوان، اتجاه النص...

معظم القواعد التي سنراها اليوم قمنا بشرحها في دروس css سابقة، وسنجمعا اليوم في درس واحد وشرح طريقة تطبيقها على أي جدول:

• width : عرض الجدول
• padding: المحيط الداخلي
•  font-size:  حجم الخط
• border-top, border-bottom : الحدود (حد علوي، حد سفلي)
• text-align: اتجاه النص
• background-color: لون الخلفية
• :hover: شكل الجدول أو جزء منه عند المرور بفأرة الحاسوب من فوقه.

الفراغ بين المربعات Gaps between cells

كود html :

<table class="one">

<tr>

<td>1</td>

<td>2</td>

</tr>

<tr>

<td>3</td>

<td>4</td>

</tr>

</table>

كود css:

td {

background-color: #0088dd;

padding: 15px;

border: 2px solid #000000;}

table.one {

border-spacing: 5px 15px;}

table.two {

border-collapse: collapse;}