جداول

« صفحهٔ قبل

صفحهٔ بعد »

نمای یک جدول HTML را می‌توان به کمک CSS تا حد زیادی بهبود داد:

مثال

مشاهدهٔ نتیجه

کادرهای جدول

برای مشخص کردن کادرهای جدول در CSS، از ویژگی border استفاده کنید.

مثال زیر یک کادر سیاه رنگ برای عناصر <th> ،<table> و <td> مشخص کرده‌است:

مثال

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

مشاهدهٔ نتیجه

توجه داشته باشید که جدول مثال بالا کادری از نوع دو خطی (double) دارد. این به این خاطر است که هم جدول و هم عناصر <th> و <td> کادرهای مجزا دارند.

تقسیم کادرهای (border)‌های جدول

ویژگی border-collapse مشخص می‌کند که آیا کادرهای جدول می‌بایست به یک کادر از نوع تک خطی (single) تقسیم شوند:

مثال

table {
  border-collapse: collapse;
}

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

مشاهدهٔ نتیجه

اگر فقط یک کادر دور جدول می‌خواهید، تنها کافی است ویژگی border را برای عنصر <table> تعیین کنید:

مثال

table {
  border: 1px solid black;
}

مشاهدهٔ نتیجه

عرض و ارتفاع جدول

عرض وارتفاع یک جدول به وسیله ویژگی‌های width و height تنظیم می‌شود.

مثال زیر عرض جدول را روی ۱۰۰٪ تنظیم می‌کند، و ارتفاع عناصر <th> را روی ۵۰ پیکسل تنظیم می‌کند:

مثال

table {
  width: 100%;
}

th {
  height: 50px;
}

مشاهدهٔ نتیجه

تراز بندی افقی

ویژگی text-align مقدار تراز بندی افقی (مانند چپ، راست، یا وسط) محتوای موجود در <th> یا <td> را تنظیم می‌کند.

به صورت پیش فرض، محتوای عناصر <th> به صورت وسط چین تراز شده اند و محتوای عناصر <td> نیز به صورت چپ چین تراز شده‌اند.

مثال زیر متن را در عناصر <th> به صورت چپ‌چین تراز می کند:

مثال

th {
  text-align: left;
}

مشاهدهٔ نتیجه

تراز بندی عمودی

ویژگی vertical-align مقدار تراز بندی عمودی (مانند بالا، پایین، یا وسط) محتوای موجود در <th> یا <td> را تنظیم می‌کند.

به صورت پیش فرض، تراز بندی عمودی محتوا در یک جدول وسط چین است (برای هر دوی عناصر <th> و <td>)

مثال زیر مقدار تراز عمودی متن را برای عناصر <td> برابر با پایین تنظیم می‌کند:

مثال

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

مشاهدهٔ نتیجه

Padding در جدول

بمنظور کنترل فضای بین کادر (border) و محتوا در یک جدول، از ویژگی padding برای عناصر <td> و <th> استفاده کنید:

مثال

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

مشاهدهٔ نتیجه

تقسیم‌کننده‌های افقی

برای خطوط تقسیم‌کننده افقی ویژگی border-bottom را به <th> و <td> اضافه کنید:

مثال

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

مشاهدهٔ نتیجه

جدول قابل Hover شدن

از انتخابگر :hover روی <tr> استفاده کنید تا سطرهای جدول زمانی که نشانه‌گر موس روی آنها قرار می‌گیرد برجسته (Highlight) شوند :

مثال

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

مشاهدهٔ نتیجه

جداول راه راه (striped)

برای جداول راه راه (Zebra-striped)، از انتخابگر nth-child() استفاده کنید و background-color را برای تمامی سطرهای زوج (یا فرد) جدول اضافه کنید:

مثال

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

مشاهدهٔ نتیجه

رنگ جدول

مثال زیر رنگ پس زمینه و رنگ متن را برای عناصر <tr> مشخص می‌کند:

مثال

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

مشاهدهٔ نتیجه

جدول واکنش گرا

در صورتی که صفحه نمایش برای نمایش تمام محتوا بسیار کوچک باشد، جدول واکنش گرا یک نوار پیمایش افقی نمایش خواهد داد:

یک عنصر نگه دارنده (مانند <div>) با ویژگی overflow-x:auto در اطراف عنصر <table> اضافه کنید تا آن را واکنش گرا کنید.

مثال

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

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

</div>

مشاهدهٔ نتیجه

نکته: در سیستم عامل Lion (در Mac)، نوارهای پیمایش به صورت پیش‌فرض مخفی هستند و تنها زمانی نمایش داده می‌شوند که مورد استفاده قرار گیرند (حتی اگر "overflow:scroll" تنظیم شود).

مثالهای بیشتر

ساخت یک جدول تجملی

این مثال نحوه ساخت یک جدول تجملی را نشان می‌دهد.

تنظیم موقعیت عنوان جدول

این مثال نحوه تنظیم موقعیت عنوان جدول را نمایش می‌دهد.

ویژگی های جدول در CSS

ویژگی	توضیحات
border	تمامی ویژگی‌های کادر (border) را در یک اعلان تنظیم می‌کند
border-collapse	مشخص می‌کند که آیا کادرهای جدول می‌بایست تقسیم شوند یا نه
border-spacing	فاصله بین کادرهای سلول‌های مجاور در جدول را مشخص می‌کند
caption-side	محل قرارگیری عنوان جدول را مشخص می‌کند.
empty-cells	مشخص می‌کند که آیا کادر و پس زمینه در سلول‌های خالی باید نمایش داده شود یا خیر
table-layout	الگورتیم چیدمان مورد استفاده برای یک جدول را تنظیم می‌کند

« صفحهٔ قبل

صفحهٔ بعد »