HTML Table Headers

▎ساختار پایه یک جدول HTML با سرصفحه‌ها

در اینجا یک مثال ساده از یک جدول با سرصفحه‌ها آورده شده است:

<table>
<thead>
<tr>
<th>سرصفحه ۱</th>
<th>سرصفحه ۲</th>
<th>سرصفحه ۳</th>
</tr>
</thead>
<tbody>
<tr>
<td>ردیف ۱، سلول ۱</td>
<td>ردیف ۱، سلول ۲</td>
<td>ردیف ۱، سلول ۳</td>
</tr>
<tr>
<td>ردیف ۲، سلول ۱</td>
<td>ردیف ۲، سلول ۲</td>
<td>ردیف ۲، سلول ۳</td>
</tr>
</tbody>
</table>

▎توضیح ساختار

• <table>: این تگ جدول را تعریف می‌کند.

• <thead>: این بخش شامل ردیف (های) سرصفحه جدول است و به معنای نشانه‌گذاری معنایی قسمت سرصفحه جدول کمک می‌کند.

• <tr>: این تگ یک ردیف جدول را تعریف می‌کند.

• <th>: این تگ یک سلول سرصفحه در جدول را تعریف می‌کند. به طور پیش‌فرض، متن در عناصر <th> بولد و در وسط قرار دارد.

• <tbody>: این بخش شامل بدنه جدول است که داده‌های واقعی در آن قرار دارد.

▎استایل‌دهی به سرصفحه‌های جدول با CSS

شما می‌توانید از CSS برای استایل‌دهی به سرصفحه‌های جدول استفاده کنید تا آن‌ها را متمایز کنید. در اینجا یک مثال از چگونگی استایل‌دهی به سرصفحه‌های جدول آورده شده است:

<style>
table {
width: 100%;
 border-collapse: collapse; /* ادغام مرزها */
}
th {
background-color: #4CAF50; /* پس‌زمینه سبز */
color: white; /* رنگ متن سفید */
padding: 10px; /* فاصله داخلی در سلول‌های سرصفحه */
text-align: left; /* تراز متن به سمت چپ */
}
td {
border: 1px solid #ddd; /* مرز خاکستری روشن برای سلول‌ها */
padding: 8px; /* فاصله داخلی در سلول‌های داده */
}
tr:nth-child(even) {
    background-color: #f2f2f2; /* رنگ زمینه برای ردیف‌های زوج (زebra striping) */
}
</style>

<table>
<thead>
<tr>
<th>سرصفحه ۱</th>
<th>سرصفحه ۲</th>
<th>سرصفحه ۳</th>
</tr>
</thead>
<tbody>
<tr>
<td>ردیف ۱، سلول ۱</td>
<td>ردیف ۱، سلول ۲</td>
<td>ردیف ۱، سلول ۳</td>
</tr>
<tr>
<td>ردیف ۲، سلول ۱</td>
<td>ردیف ۲، سلول ۲</td>
<td>ردیف ۲، سلول ۳</td>
</tr>
</tbody>
</table>

▎ملاحظات دسترسی

استفاده مناسب از عناصر <th> به بهبود دسترسی کمک می‌کند. نرم‌افزارهای خواندن صفحه می‌توانند این سرصفحه‌ها را هنگام خواندن جدول اعلام کنند و به کاربران با ناتوانی‌های بینایی زمینه‌ای ارائه دهند.

▎ویژگی Scope

شما می‌توانید با استفاده از ویژگی scope بر روی عناصر <th> دسترسی را بیشتر کنید تا مشخص کنید که آیا آن‌ها سرصفحه‌هایی برای یک ردیف یا یک ستون هستند:

<thead>
<tr>
<th scope=“col”>سرصفحه ۱</th>
<th scope=“col”>سرصفحه ۲</th>
<th scope=“col”>سرصفحه ۳</th>
</tr>
</thead>

 <tbody>
<tr>
<th scope=“row”>ردیف ۱</th>
<td>سلول ۱</td>
<td>سلول ۲</td>
</tr>
<tr>
<th scope=”row”>ردیف ۲</th>
<td>سلول ۱</td>
<td>سلول ۲</td>
</tr>
</tbody>

▎نتیجه‌گیری

سرصفحه‌های جدول برای سازماندهی و ارائه داده‌ها به وضوح در جداول HTML ضروری هستند. با استفاده از عناصر <th> درون <thead> و اعمال استایل‌های CSS مناسب، می‌توانید جداولی زیبا و قابل دسترسی ایجاد کنید. همواره هنگام طراحی جداول، بهترین شیوه‌های دسترسی را در نظر بگیرید تا اطمینان حاصل شود که همه کاربران می‌توانند به طور مؤثر با داده‌های شما تعامل داشته باشند.