CSS Tutorial

تصميم الجداول (tables) فى CSS

سجين القدر
اخر تحديث :

سيعلمك هذا الفصل كيفية تصميم الجداول (tables) فى CSS بالتفصيل، مع بعض الأمثلة التوضيحية.

تصميم الجداول فى CSS

1. حدود الجدول – Table Borders

 

لتحديد حدود الجدول في CSS ، نستخدم خاصية border. كالتالى:

<style>
    table, tr, th, td {
	border: 1px solid #f00;
    }
	</style>

	<table>
    <tr>
	<th>Name</th>
	<th>Gender</th>
	<th>Age</th>
    </tr>
    <tr>
	<td>Mohamed</td>
	<td>Male</td>
	<td>30</td>
    </tr>
    <tr>
	<td>Essam</td>
	<td>Male</td>
	<td>40</td>
    </tr>
	</table>
Name Gender Age
Mohamed Male 30
Essam Male 40

يحدد المثال السابق حدًا أحمر لعناصر <table> و <th> و <td> و <tr>.

2. تصغير حدود الجدول – Collapse Table Borders

تحدد خاصية border-collapse ما إذا كان يجب طَي حدود الجدول إلى حد واحد، كالتالى:

<style>
    table {
	border-collapse: collapse;
    }

    table, tr, th, td {
	border: 1px solid #f00;
    }
	</style>

	<table>
    <tr>
	<th>Name</th>
	<th>Gender</th>
	<th>Age</th>
    </tr>
    <tr>
	<td>Mohamed</td>
	<td>Male</td>
	<td>30</td>
    </tr>
    <tr>
	<td>Essam</td>
	<td>Male</td>
	<td>40</td>
    </tr>
	</table>
Name Gender Age
Mohamed Male 30
Essam Male 40

3. المحاذاة الأفقية – Horizontal Alignment

تقوم خاصية text-align بتعيين المحاذاة الأفقية للمحتوى الخاص بالجدول.

بشكل افتراضي ، يتم محاذاة محتوى عناصر <th> إلى الوسط ومحاذاة محتوى عناصر <td> إلى اليسار.

مثال للتوضيح:

<style>
    table {
	border-collapse: collapse;
    }

    tr, th, td {
	border: 1px solid #f00;
    }

    tr {
	text-align: center;
    }
	</style>

	<table>
    <tr>
	<th>Name</th>
	<th>Gender</th>
	<th>Age</th>
    </tr>
    <tr>
	<td>Mohamed</td>
	<td>Male</td>
	<td>30</td>
    </tr>
    <tr>
	<td>Essam</td>
	<td>Male</td>
	<td>40</td>
    </tr>
	</table>
Name Gender Age
Mohamed Male 30
Essam Male 40

4. المحاذاة الرأسية – Vertical Alignment

تقوم خاصية vertical-align بتعيين المحاذاة الرأسية لمحتوى الجدول.

بشكل افتراضي ، تكون المحاذاة الرأسية للمحتوى في الجدول في المنتصف (لكل من عنصري <th> و <td>).

مثال للتوضيح:

<style>
    table {
	border-collapse: collapse;
    }

    tr, th, td {
	border: 1px solid #f00;
    }

    td {
	height: 50px;
	vertical-align: bottom;
    }
	</style>

	<table>
    <tr>
	<th>Name</th>
	<th>Gender</th>
	<th>Age</th>
    </tr>
    <tr>
	<td>Mohamed</td>
	<td>Male</td>
	<td>30</td>
    </tr>
    <tr>
	<td>Essam</td>
	<td>Male</td>
	<td>40</td>
    </tr>
	</table>
Name Gender Age
Mohamed Male 30
Essam Male 40

5. تغيير لون خلفية الصفوف عند تمرير الماوس فوقه – Hoverable Table

استخدم محدد الـ hover لـ <tr> لتمييز صفوف الجدول عند تمرير الماوس فوقه، كالتالى:

<style>
    table {
	border-collapse: collapse;
	width: 100%;
    }

    tr, th,  td {
	border: 1px solid #f00;
    }

    tr:hover {
	background-color: rgb(194, 185, 185);
    }
	</style>

	<table>
    <tr>
	<th>Name</th>
	<th>Gender</th>
	<th>Age</th>
    </tr>
    <tr>
	<td>Mohamed</td>
	<td>Male</td>
	<td>30</td>
    </tr>
    <tr>
	<td>Essam</td>
	<td>Male</td>
	<td>40</td>
    </tr>
	</table>
Name Gender Age
Mohamed Male 30
Essam Male 40

6. المسافة الداخلية للجدول – Table Padding

للتحكم في المسافة بين الحد (border) والمحتوى (content) في الجدول، استخدم خاصية padding على عناصر <td> و <th>، كالتالى:

<style>
    table {
	border-collapse: collapse;
	width: 100%;
    }

    tr, th,  td {
	border: 1px solid #f00;
    }

    th, td {
	padding: 10px;
	text-align: center;  
    }
	</style>

	<table>
    <tr>
	<th>Name</th>
	<th>Gender</th>
	<th>Age</th>
    </tr>
    <tr>
	<td>Mohamed</td>
	<td>Male</td>
	<td>30</td>
    </tr>
    <tr>
	<td>Essam</td>
	<td>Male</td>
	<td>40</td>
    </tr>
	</table>
Name Gender Age
Mohamed Male 30
Essam Male 40

7. الجداول المخططة – Striped Tables

بالنسبة للجداول المخططة ، استخدم المحدد ()nth-child وأضف لون الخلفية إلى جميع صفوف الجدول (أو الفردية)، كالتالى:

<style>
    table {
	border-collapse: collapse;
	width: 100%;
    }

    tr, th,  td {
	border: 1px solid #f00;
    }

    tr:nth-child(even) {
	background-color: rgb(194, 185, 185);
    }
	</style>

	<table>
    <tr>
	<th>Name</th>
	<th>Gender</th>
	<th>Age</th>
    </tr>
    <tr>
	<td>Mohamed</td>
	<td>Male</td>
	<td>30</td>
    </tr>
    <tr>
	<td>Essam</td>
	<td>Male</td>
	<td>40</td>
    </tr>

    <tr>
	<td>Noor</td>
	<td>Female</td>
	<td>20</td>
    </tr>

    <tr>
	<td>Mona</td>
	<td>Female</td>
	<td>50</td>
    </tr>
	</table>
Name Gender Age
Mohamed Male 30
Essam Male 40
Noor Female 20
Mona Female 50

8. لون وخلفية الجدول – Table Color & background

يمكنك إستحدام خاصية color لتحديد لون النص فى الجدول، وخاصية background-color لتحديد لون خلفية الجدول.

يحدد المثال التالى لون الخلفية والنص لعناصر <th>:

<style>
    table {
	border-collapse: collapse;
	width: 100%;
    }

    tr, th, td {
	border: 1px solid blue;
	text-align: center;
    }

    th {
	background-color: blue;
	color: white;
    }
	</style>

	<table>
    <tr>
	<th>Name</th>
	<th>Gender</th>
	<th>Age</th>
    </tr>

    <tr>
	<td>Noor</td>
	<td>Female</td>
	<td>20</td>
    </tr>

    <tr>
	<td>Mona</td>
	<td>Female</td>
	<td>50</td>
    </tr>
	</table>
Name Gender Age
Noor Female 20
Mona Female 50

 

9. الجداول المتجاوبة – Responsive Tables

 

لجعل الجدول متجاوب مع جميع الأحجام:

  1. أضف عنصر كحاوية (مثل <div>) للجدول.
  2. إضافة خاصية overflow-x بقيمة auto لعنصر div لجعله متجاوب.

سيعرض الجدول المتجاوب شريط تمرير أفقيًا إذا كانت الشاشة صغيرة جدًا لعرض المحتوى الكامل.

مثال للتوضيح:

<style>
    .container {
	overflow-x: auto;
    }

    table {
	border-collapse: collapse;
	width: 100%;
    }

    tr, th, td {
	border: 1px solid blue;
	text-align: center;
    }

    th {
	background-color: blue;
	color: white;
    }
	</style>
	<div class="container">
    <table>
	<tr>
	<th>Name</th>
	<th>Gender</th>
	<th>Age</th>
	<th>Favorite Color</th>
	</tr>

	<tr>
	<td>Noor</td>
	<td>Female</td>
	<td>20</td>
	<td>Black</td>
	</tr>

	<tr>
	<td>Mona</td>
	<td>Female</td>
	<td>50</td>
	<td>Pink</td>
	</tr>

	<tr>
	<td>Ibrahim</td>
	<td>Male</td>
	<td>34</td>
	<td>Red</td>
	</tr>

	<tr>
	<td>Mohamed</td>
	<td>Male</td>
	<td>60</td>
	<td>White</td>
	</tr>
    </table>
	</div>
Name Gender Age Favorite Color
Noor Female 20 Black
Mona Female 50 Pink
Ibrahim Male 34 Red
Mohamed Male 60 White
تعديل المقال
الأقسام

مقالات قد تهمك