تعلم لغة css: التحكم في تصميم الجداول Tables
رأينا في الدرس السابق طريقة التحكم في اللوائح Lists، واليوم سنرى:
كيف يمكنك التحكم في تصميم الجداول html tables عبر تغيير الطول والعرض، الألوان، اتجاه النص...
معظم القواعد التي سنراها اليوم قمنا بشرحها في دروس css سابقة، وسنجمعا اليوم في درس واحد وشرح طريقة تطبيقها على أي جدول:
كيف يمكنك التحكم في تصميم الجداول 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;}
لكل سؤال أو إضافة، يرجى كتابة تعليقك في الخانة اسفله