نمایش داده‌ها با جدول

8.1 ساختار کامل جداول HTML: از بنیان تا ساختار معنایی

8.1.1<table> : عنصر اصلی جدول

• پایه‌ای برای نمایش داده‌های دو بعدی (سطر × ستون).
• هر جدول باید دارای caption یا aria-label باشد تا معنای جدول برای کاربران نابینا مشخص شود.

<table>
 <caption>جدول عملکرد کارمندان در سال ۱۴۰۳</caption>
 <!-- ساختار جدول -->
</table>

8.1.2 ساختارهای داخلی جدول: سلسله‌مراتب معنایی

<table aria-label="فهرست افراد">
<thead>
 <tr>
  <th>نام</th>
  <th>نام خانوادگی</th>
 </tr>
</thead>
<tbody>
 <tr>
  <td>علی</td>
  <td>رضایی</td>
 </tr>
 <tr>
  <td>نگار</td>
  <td>کریمی</td>
 </tr>
 <tr>
  <td>امیر</td>
  <td>صادقی</td>
 </tr>
</tbody>
</table>

• استفاده از ***thead*** - ***tbody*** - ***tfoot*** به موتورهای جستجو و ابزارهای دسترسی کمک می‌کند تا ساختار جدول را به درستی تشخیص دهند.
• ***colgroup*** و ***col*** امکان تنظیم ویژگی‌های ستون‌ها (مانند عرض) بدون نیاز به استایل روی هر سلول را فراهم می‌کند.

8.1.3 <tr> - <th> - <td>: سلول‌های جدول

• <tr>: سطر جدول
• <th>: سلول سرستون (Header Cell)
• <td>: سلول داده (Data Cell)

8.2 ترکیب سلول‌ها در جدول: مدیریت داده‌های پیچیده

8.2.1 colspan و rowspan: ادغام سلول‌ها

• این ویژگی‌ها برای ادغام سلول‌ها در جهت افقی (colspan) یا عمودی (rowspan) استفاده می‌شوند.
• ادغام سلول‌ها می‌تواند به دسترسی‌پذیری آسیب بزند اگر به درستی مدیریت نشود.

<tr>
 <th rowspan="2" scope="row">فریم‌ورک</th>
 <th colspan="2" scope="col">عملکرد</th>
</tr>
<tr>
 <th scope="col">متوسط</th>
 <th scope="col">بهینه‌سازی</th>
</tr>

8.3 جداول دسترس‌پذیر و معنایی‌تر: از ساختار به اعتماد

8.3.1 scope و headers: تعیین روابط سلول‌ها

• scope="col": سلول سرستون است (در سطر بالایی)
• scope="row": سلول سرسطر است (در ستون اول)
• headers (در <td>): ارجاع به id سلول‌های سرستون/سرسطر

<table>
<thead>
 <tr>
  <th id="name">نام</th>
  <th id="score">امتیاز</th>
  <th id="status">وضعیت</th>
 </tr>
</thead>
<tbody>
 <tr>
  <th id="ali" scope="row">علی</th>
  <td headers="ali score">95</td>
  <td headers="ali status">موفق</td>
 </tr>
</tbody>
</table>

8.3.2 summary (منسوخ‌شده) و جایگزینی با aria-describedby

• summary در HTML4 استفاده می‌شد، اما منسوخ‌شده در HTML5 است.
• جایگزین آن استفاده از aria-describedby برای ارائه توضیحات جدول.

<table aria-describedby="table-desc">
 <caption>جدول عملکرد کارمندان</caption>
  <p id="table-desc">این جدول شامل اطلاعات عملکرد کارمندان در سال ۱۴۰۳ است.</p>
  <!-- ساختار جدول -->
</table>

8.4 تکنیک‌های واکنش‌گرایی در جداول: سازگاری با دستگاه‌های مختلف

8.4.1 اسکرول افقی (Horizontal Scrolling)

<div class="scrollable-table">
 <table>
  <!-- ساختار جدول -->
 </table>
</div>
  
<style>
 .scrollable-table {
 overflow-x: auto;
 white-space: nowrap;
 border: 1px solid #ccc;
}
</style>

8.4.2 ساختار کارت‌گونه (Card-based Layout)

• برای موبایل، جداول را به ساختار کارت‌گونه تبدیل کنید.
• هر سطر به یک کارت تبدیل می‌شود.

<div class="card-table">
 <div class="card">
  <div class="label">نام:</div>
  <div class="value">علی</div>
 </div>
 <div class="card">
  <div class="label">امتیاز:</div>
  <div class="value">95</div>
 </div>
  <div class="card">
   <div class="label">وضعیت:</div>
   <div class="value">موفق</div>
  </div>
</div>

8.4.3 تغییر چینش (Responsive Reordering)

<style>
 .card-table {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  }
    
 @media (min-width: 768px) {
  .card-table {
   grid-template-columns: 1fr 1fr;
   }
  }
    </style>

بعدی

قبلی