مثالی از یک جدول در HTML
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
تعریف یک جدول HTML
یک جدول در HTML با تگ <table> تعریف می شود.
هر ردیف جدول با استفاده از تگ <tr> تعریف می شود. سرتیتر های جدول داخل تگ <th> قرار می گیرند. به طور پیشفرض، سرتیتر های جدول بولد و وسط چین هستند.
هر سلول جدول که داده ها در آن قرار می گیرد با استفاده از تگ <td> تعریف می شود.
مثال
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
نکته: عناصر <th> ظرف داده (data containers) جدول هستند. یعنی می توان داخل آن ها هر عنصر HTML دیگری مانند: عکس، فیلم، لیست ها، جداول دیگر و ... را قرار داد.
اضافه کردن حاشیه (border) به جدول
اگر برای جدولی حاشیه (border) مشخص نکنید، آن جدول بدون حاشیه (border) نشان داده می شود.
حاشیه برای یک جدول با استفاده از صفت border تعریف می شود.
نکته: بیاد داشته باشید که حاشیه را هم برای جدول و هم برای سلول های جدول مشخص کنید.
ویژگی border-collapse در جدول
تعیین صفت border هم برای جدول و هم برای سلول های جدول باعث می شود که حاشیه جدول به صورت دوجداره شود. برای حل این مشکل از از ویژگی border-collapse استفاده کنید:
اضافه کردن ویژگی padding به سلول های جدول
ویژگی padding فاصله بین محتوای سلول و حاشیه (border) آن سلول را مشخص میکند.
اگر ویژگی padding را مشخص نکنید، محتوای سلول های جدول به صورت پیشفرض بدون padding نمایش داده می شوند.
برای مشخص کردن padding، از ویژگی padding استفاده می کنیم:
ویژگی text-align برای ترازبندی سرتیتر های جدول
به صورت پیشفرض، سرتیتر های جدول بولد و وسط چین هستند.
برای تراز بندی سرتیتر های جدول از ویژگی text-align در CSS استفاده می کنیم، در مثال زیر سرتیتر های جدول چپ چین شده اند:
ویژگی border-spacing برای فاصله بین سلول های جدول
ویژگی border-spacing فضای بین سلول های جدول را مشخص می کند.
برای تنظیم فاصله سلول ها، از ویژگی border-spacing در CSS استفاده کنید.
نکته: به طور همزمان نمی توان از دو ویژگی border-collapse و border-spacing استفاده کرد. اگر از border-collapse برای جدولتان استفاده کرده باشید استفاده از ویژگی border-spacing هیچ تاثیری روی جدولتان نمی گذارد. دلیل این اتفاق این است که ویژگی border-collapse باعث صفر شدن فضای بین سلول های جدول می شود.
ویژگی colspan برای یکی کردن ستون های جدول
اگر یک سلول به فضایی بیشتر از یک ستون نیاز داشته باشد از ویژگی colspan استفاده می کنیم:
مثال
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
ویژگی rowspan برای یکی کردن ردیف های جدول
اگر یک سلول به فضایی بیشتر از یک ردیف نیاز داشته باشد از ویژگی rowspan استفاده می کنیم:
مثال
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
ویژگی Caption برای اضافه کردن عنوان به جدول
برای اضافه کردن یک عنوان به جدول از تگ <caption> استفاده کنید:
مثال
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
نکته: تگ <caption> باید بلافاصله بعد از تگ <table> قرار بگیرد.
یک استایل خاص برای یک جدول
برای تعریف یک استایل خاص برای یک جدول خاص، صفت id را به آن جدول اضافه کنید:
مثال
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
حالا بعد از اضافه کردن id به جدول می توانید یک استایل خاص را به روش زیر برای آن جدول تعریف کنید:
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
خودتان امتحان کنید »
و به روش زیر استایل های بیشتری برای جدولتان تعریف کنید:
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}
