خطی سازی جداول در css
در زمان خواندن یک متن توسط برنامه screen reader این برنامه محتوا را خطی سازی می کند. خطی سازی به این معنا است که برنامه، محتوا را آن طور که در markup اِ table آورده شده است و به ترتیب می خواند.
نمونه ای از خطی سازی
حالا بیایید نگاهی به markup بیاندازیم:
<table>
<tr>
<td>9:30 p.m.-10:00 p.m.</td>
<td>10:00 p.m.-11:00 p.m.</td>
<td>11:00 p.m.-11:45 p.m.</td>
</tr>
<tr>
<td>Regional News</td>
<td>Glee</td>
<td>Mad Men</td>
</tr>
</table>
خطی سازی محتوای table بالا چنین خواهد بود.
“9:30 p.m.–10:00 p.m., 10:00 p.m.
–11:00 p.m., 11:00 p.m.–11:45 p.m., Regional News, Glee, Mad Men.”
همانطور که می بینید قابل درک نیست، می توانیم برای حل این مشکل ترتیب اطلاعات table را تغییر دهیم، به این صورت که نام برنامه ها را در سمت چپ به صورت عمودی نوشته و سلول های زمان را در ستون سمت راست بیاوریم. یا می توانیم از th به جای td استفاده کرده و سلول ها را markup کنیم و یک خصوصیت scope به هر یک از تگ های th اضافه کنیم. ابتدا تعدادی از استفاده ها و جنبه های پیشرفته table ها را با هم بررسی می کنیم سپس به این مسئله خواهیم رسید.
خصوصیت summary
خصوصیت summary نامرئی بوده و بر روی صفحه یا در هنگام پرینت کردن render نمی شود، از آن در ارائه اطلاعات تکمیلی و خلاصه شده ای در رابطه با table ها برای دیوایس های کمکی استفاده می شود:
<table summary="Area representatives, and their home and work telephone numbers">
زمانی که یک خصوصیت summary تعریف می کنید مختصر و مفید این کار را انجام دهید، دقیقا مانند آنچه که در خصوصیت alt برای عکس ها تعریف می کردیم.
تگ caption برای یک table
اگر فکر می کنید خصوصیت summary به دلیل نامرئی بودن بر روی صفحه نمایش جالب نیست نگران نباشید، از آنجا که می توانید از تگِ Caption نیز استفاده کنید. تگِ Caption درون تگِ table قرار می گیرد و از CSS برای style دادن به آن می توانید استفاده کنید، به همان راحتی style دهی به یک عنوان این کار صورت می گیرد. markup به این صورت در میاید:
<table summary="Area representatives, and their home and work
telephone numbers">
<caption>Contact details</caption>
<tr>
<th>Name</th>
<th>Contact (Home)</th>
<th>Contact (Work)</th>
<th>Location</th>
</tr>
یک نکته مهم: با اینکه caption راه مناسبی برای تخصیص عنوان به table می باشد باید به این مهم توجه داشت که style دهی به آن می تواند در مرورگرهای مختلف به شکلی متفاوت render شود. البته این ایراد بزرگی نیست، از آنجا که تفاوت های کوچک در render کردن سایت در مرورگرهای مختلف مشکل بزرگی نیست. اما باید توجه داشت که بعضی از طراحی ها می توانند با تگِ caption جور در نیایند و به زیبایی نشان داده نشوند، به جای آن می توان از تگِ heading استفاده کرد، مثلا h2 یا h3 برای این کار مناسب هستند. این کار نیز قابل قبول است و علاوه بر اینکه کار ما را راه می اندازد باید دقت کنیم که عنوان ها زیربنای سایت ما را قوی می کنند و به موتورهای جست و جو نیز کمک می کنند تا سایت را به درستی درک کنند. اما اگر style مورد نظر شما برای caption به درستی نمایش داده می شود بهتر است از همان caption استفاده کنید.
