استفاده از جدول های HTML در صفحات وب معمولا برای نمایش منظم و طبقه بندی شده‌ی دسته‌ای از اطلاعات کاربرد بسیاری دارد. بسیاری از جدول‌های قیمت و پلن‌های فروش در وبسایت‌های مختلف توسط جدول های HTML ساخته می‌شوند. البته بعضی از آنها توسط تگ‌های لیست ul ایجاد می‌شوند که با کمک CSS مکاندهی شده و شبیه جدول می‌شوند.
در طرف دیگر اگر قصد دارید تا حجم زیادی از داده‌های پیچیده را بصورت منظم و ساختارمند نمایش دهید باید از جدول‌های HTML بهره ببرید.
ساختارمند کردن یک جدول (table)
جدول‌ها توسط عناصر تودرتویی داخل تگ table ایجاد می‌شوند. جدول‌ها بصورت ردیف چیده می‌شوند و نه ستون. این کار توسط تگ <tr> انجام می‌شود. هر ردیف در جدول از یک یا چند سلول داده (تگ td) در جدول تشکیل می‌شوند. و ستونها در واقع از کنار هم قرار گرفتن عناصر ردیف کنار همدیگر تشکیل می‌شند.
سه تگ اساسی جدول در HTML عبارتند از tr, table و td. در زیر مثالی را از نحوه ساخت یک جدول ساده می بینیم:
html
<table>
<tr>
<td>ردیف</td>
<td>رنگ</td>
<td>اندازه</td>
<td>جنس</td>
</tr>
<tr>
<td>۱</td>
<td>قرمز</td>
<td>کوچک</td>
<td>نخ</td>
</tr>
<tr>
<td>۲</td>
<td>آبی</td>
<td>متوسط</td>
<td>پنبه</td>
</tr>
<tr>
<td>۳</td>
<td>سبز</td>
<td>بزرگ</td>
<td>کنف</td>
</tr>
</table>
مشاهده و ویرایش کد در حالت تمام صفحه
علاوه بر تگ‌های اصلی برای ساخت جدول که ذکر شد، میتوان از تگ‌هایی جهت افزودن مفهوم منطقی (semantic meaning) به ساختار جدول در ساختار HTML استفاده کرد. مهمترین آنها تگی است که برای شناساندن تیتر استفاده می شود و آن تگ <th> است. این تگ به جای تگ <td> در سلولهایی که در ابتدای هر ستوان قرار گرفته‌اند استفاده می‌شود تا هویت مقادیری که زیر آن قرار می‌گیرند را مشخص کند.
عناصر دیگری هستند که از آنها برای ساخت هدر، بدنه و فوتر بصورت گروهی استفاده می‌شوند. این عناصر جزو عناصر اساسی ساخت جداول HTML نیستند اما اگر شما می‌خواهید که مقدار زیادی داده و اطلاعات را بصورت ساختارمند و منطقی توسط جدول به نمایش دراورید، توصیه می‌کنیم که از آنها استفاده کنید. در زیر به برخی از مهمترین آنها اشاره می‌کنیم.
- تگ <thead>: از این تگ برای دربر گرفتن سر تیترها یا تگ‌های <th> استفاده می‌شود.
- تگ <tfoot>: از این به عنوان دربر گیرنده قسمتهایی از جدول که آخرین ردیف آن را به عنوان فوتر تشکیل می‌دهند استفاده می‌شود.
- تگ <tbody>: از این تگ برای در بر گرفتن تمام داده‌هایی که در بخش میانی جدول و مابین هدر و فوتر قرار دارند استفاده می شود.
در زیر مثالی از استفاده این عناصر در جدول را می‌بینیم:
css
html {
direction: rtl;
font-family: "Segoe UI";
}
table {
border-collapse: collapse;
text-align: center;
}
td,
th {
border: 1px solid #ccc;
padding: 12px 25px;
}
th {
background-color: #676767;
color: #ffffff;
}
tbody td {
background-color: #f5f5f5;
}
tfoot td {
background-color: #eafad8;
}
html
<table>
<thead>
<tr>
<th>ردیف</th>
<th>رنگ</th>
<th>اندازه</th>
<th>جنس</th>
</tr>
</thead>
<tbody>
<tr>
<td>۱</td>
<td>قرمز</td>
<td>کوچک</td>
<td>نخ</td>
</tr>
<tr>
<td>۲</td>
<td>آبی</td>
<td>متوسط</td>
<td>نخ</td>
</tr>
<tr>
<td>۳</td>
<td>سبز</td>
<td>بزرگ</td>
<td>پنبه</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>قیمت</td>
<td>۱۵۰۰۰</td>
<td>۱۵۰۰۰</td>
<td>۱۵۰۰۰</td>
</tr>
</tfoot>
</table>
مشاهده و ویرایش کد در حالت تمام صفحه
افزودن عنوان به جدول (table) HTML
بعضی وقتها قصد داریم تا اطلاعاتی راجع به جدول به مخاطب بدهیم. یکی از چیزهایی که جدول‌ها از داشتن آن محروم هستند، عنوان برای آنهاست. برای اینکار میتوان از تگ h2 استفاده که البته باید بیرون از ساختار جدول از آن استفاده کرد. اما اگر بخواهیم عنوانی درون ساختار <table> برای آن استفاده کنیم میتوان از تگ <caption> استفاده کرد. برای این منظور عبارت مورد نظرمان داخل تگ <caption> و در ابتدای تگ <table> قرار می‌دهیم.
html
<table>
<caption>
این یک جدول HTML است.
</caption>
<tr>
<th>ردیف</th>
<th>رنگ</th>
<th>اندازه</th>
<th>جنس</th>
</tr>
<tr>
<td>۱</td>
<td>قرمز</td>
<td>کوچک</td>
<td>نخ</td>
</tr>
<tr>
<td>۲</td>
<td>آبی</td>
<td>متوسط</td>
<td>نخ</td>
</tr>
<tr>
<td>۳</td>
<td>سبز</td>
<td>بزرگ</td>
<td>پنبه</td>
</tr>
<tr>
<td>قیمت</td>
<td>۱۵۰۰۰</td>
<td>۱۵۰۰۰</td>
<td>۱۵۰۰۰</td>
</tr>
</table>
مشاهده و ویرایش کد در حالت تمام صفحه
ادغام چند سلول در جدول (table) با استفاده از صفات rowspan و colspan
میتوان با ادغام سلولهایی که از جدول که محتوای یکسان دارند کمی ظاهر جدول را منظم‌تر کرد. برای این منظور میتوان از صفت rowspan در یکی از سلولهای جدول (تگ td) استفاده کرد تا سلولهای همجوار که داده‌های تکراری دارند در راستای عمودی یا ستون را با آن ادغام نمود. صفت colspan هم همانند rowspan عمل می‌کند با این تفاوت که اینبار سلولهای همجوار در راستای افقی یا ردیف با هم ادغام می‌شوند. در مثال زیر نحوه عمکرد این صفت را می‌بینیم.
html
<table>
<caption>
این یک جدول HTML است.
</caption>
<thead>
<tr>
<th>ردیف</th>
<th>رنگ</th>
<th>اندازه</th>
<th>جنس</th>
</tr>
</thead>
<tbody>
<tr>
<td>۱</td>
<td>قرمز</td>
<td>کوچک</td>
<td rowspan="2">نخ</td>
</tr>
<tr>
<td>۲</td>
<td>آبی</td>
<td>متوسط</td>
</tr>
<tr>
<td>۳</td>
<td>سبز</td>
<td>بزرگ</td>
<td>پنبه</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>قیمت</td>
<td colspan="3">۱۵۰۰۰</td>
</tr>
</tfoot>
</table>
مشاهده و ویرایش کد در حالت تمام صفحه
ترکیب تمام آنچه تا به حال در این مقاله ذکر شده است
در مثال زیر تمام آنچه را که در این مقاله برای ساختارمندی و نظم بیشتر کدهای HTML برای ساخت جدول عنوان شده بکار می‌بریم:
css
html {
direction: rtl;
font-family: "Segoe UI";
}
table {
border-collapse: collapse;
text-align: center;
}
caption {
padding-bottom: 7px;
color: #777777;
font-style: italic;
}
td,
th {
border: 1px solid #ccc;
padding: 12px 25px;
}
th {
background-color: #676767;
color: #ffffff;
}
tbody td {
background-color: #f5f5f5;
}
tfoot td {
background-color: #eafad8;
}
html
<table>
<caption>
این یک جدول HTML است.
</caption>
<thead>
<tr>
<th>ردیف</th>
<th>رنگ</th>
<th>اندازه</th>
<th>جنس</th>
</tr>
</thead>
<tbody>
<tr>
<td>۱</td>
<td>قرمز</td>
<td>کوچک</td>
<td rowspan="2">نخ</td>
</tr>
<tr>
<td>۲</td>
<td>آبی</td>
<td>متوسط</td>
</tr>
<tr>
<td>۳</td>
<td>سبز</td>
<td>بزرگ</td>
<td>پنبه</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>قیمت</td>
<td colspan="3">۱۵۰۰۰</td>
</tr>
</tfoot>
</table>
مشاهده و ویرایش کد در حالت تمام صفحه
جمع بندی
جدول‌ها می‌توانند راهی مناسب را برای نمایش و ارائه‌ی داده‌ها در اختیار ما قرار دهند. دستورات جدول در HTML ساده است و با کمی تمرین می‌توانید حتی جداول پیچیده را طراحی و پیاده‌سازی نمایید.
