جداول البيانات

01استعمل Table للبيانات المرتابطة

الجداول مناسبة ملي السطور والأعمدة فيهم معلومات مرتبطة. ما تستعملهاش باش تركّب Header ولا Sidebar ولا Footer ديال الصفحة.

<table>
  <caption>Material comparison</caption>
  <tr><th scope="col">Material</th><th scope="col">Finish</th></tr>
  <tr><td>Oak</td><td>Natural</td></tr>
</table>

02وضّح عناوين الجدول

استعمل th للعناوين وtd للبيانات. scope كيوضح واش العنوان تابع لسطر ولا لعمود. وcaption كيعطي اسم واضح للجدول.

<tr>
  <th scope="row">Kitchen</th>
  <td>Made to measure</td>
</tr>

03تعامَل مع الشاشات الصغيرة

إلا كان الجدول عريض بزاف، ديرو داخل عنصر يقدر يتسكرول بالعرض. حافظ على معنى الجدول بدل ما تصغّر الخط بزاف.

<div class="table-scroll">...</div>
<style>
.table-scroll { overflow-x: auto; }
th, td { padding: 12px; text-align: left; }
</style>

04جرّب براسك

زيد سطر جديد وخلي عناوين الأعمدة واضحة.

باش تزيد تفهم

تقدر ترجع لـ شروحات MDN و معيار HTML Living Standard باش تفهم أكثر وتشوف التوصيات الجديدة.