جدول در css

با استفاده از خصوصیت جدول در css ، می توان ظاهر جداول را بسیار بهبود بخشید.

Table Borders

برای تعیین Table Borders در سی اس اس، کافیست از خصوصیت border استفاده کنید. در مثال زیر border مشکی برای المان های table، th و td تعیین شده است:

table, th, td {
  border: 1px solid black;
}

دقت کنید که در جدول بالا، حاشیه دارای دو خط است، این بدین علت است که هم table و هم المان های td و th دارای border های جداگانه ای هستند.

Collapse Table Borders

از خصوصیت border-collaps زمانی استفاده می شود که بخواهیم برای المان های table, td , th تنها یک border رسم شود. به مثال زیر دقت کنید:

table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}

که نتیجه را در زیر مشاهده می کنید:

اگر فقط یک border دورتا دور جدول بخواهید، که مانند شکل زیر باشد، خصوصیت border را تنها به table اعمال می کنیم:

table {
border: 1px solid black; 
border-collapse: collapse;}

Table Width and Height

عرض و ارتفاع یک جدول در css ، با استفاده از خصوصیت width و height مشخص می شود.
در جدول زیر عرض جدول مساوی ۱۰۰% و ارتفاع th یا همان table header مساوی ۴۵ px تعیین شده است:

که کد آن به صورت زیر است:

 
table {
  width: 100%;
}
th {
  height: 45px;
}

Horizontal Alignment

با استفاده از خصوصیت text-align می توانیم المان های <th> و <td> را به صورت افقی مرتب کنیم. (در جهت های چپ، راست و وسط)
در حالت پیش فرض المان <th> در وسط و المان <td> در سمت چپ قرار دارد.
در شکل زیر المان <th> به چپ منتقل شده است:

th {
  text-align: left;
}

Vertical Alignment

خصوصیت vertical-align چیدمان عمودی المان ها را انجام می دهد مثلا محتوای المان های <th> و <td> را در جهت های بالا، وسط و پائین، تنظیم می کند.
در حالت پیش فرض، مقدار vertical-align برای المان های <th> و <td> وسط است.
در مثال زیر، مقدار vertical-align را برای المان <td> برابر bottom قرار داده ایم:

td {
  height: 50px;
  vertical-align: bottom;
}

که نتیجه را در ادامه می بینید:

Table Padding

برای کنترل فاصله بین border و محتوا، می توان از خصوصیت padding برای المان های <th> و <td> استفاده کرد:

th, td {
  padding: 15px;
  text-align: left;
}

Horizontal Dividers

برای تقسیم بندی جدول در جهت افقی، می توان به <th> و <td> خصوصیت border-bottom را اعمال کرد:

th, td {
  border-bottom: 1px solid #ddd;
}

Hoverable Table

با اعمال سلکتور hover: به <tr> می توان سطرهای جدول را با حرکت ماوس highlight کرد:

tr:hover {background-color: #f5f5f5;}

که نتیجه را در جدول زیر می بینید:

Striped Tables

برای داشتن جدولی که ردیف های آن به صورت یکی در میان، رنگ خاصی دارند، می بایست از سلکتور ()nth-child استفاده کرد و background-color به ردیف های زوج یا فرد آن افزود:

tr:nth-child(even) {background-color: #f2f2f2;}

Table Color

در مثال زیر، رنگ پس زمینه و متن المان <th> را تغییر داده ایم:

th {
  background-color: #4CAF50;
  color: white;
}

Responsive بودن جدول در css

اگر جدول در css را به صورت واکنشگرا در بیاوریم، در صورتی که صفحه نمایش کوچک باشد، یک اسکرول بار افقی اعمال می شود و قادر هستیم کلیه محتویات آن را مشاهده کنیم.
برای این کار یک المان table را درون یک المان container مثل <div> قرار دهید و خصوصیت overflow-x:auto را به آن اعمال کنید:

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>

برگرفته از وب سایت w3schools