Știai că... Poți folosi thead pentru a face un calendar?

În timp ce modificam un plugin de WordPress mi-am dat seama că semantica este o problemă pentru foarte mulți web developeri. Astfel, apar diverse cazuri în care ai un markup de genul:

<table>
<tr>
<td class="calendar-heading" colspan="7">
<table>
<tr>
<td class="calendar-prev"><a href="#">« Prev</a></td>
<td class="calendar-month">August 2011</td>
<td class="calendar-next"><a href="#">Next »</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="normal-day-heading">Monday</td>
<td class="normal-day-heading">Tuesday</td>
<td class="normal-day-heading">Wednesday</td>
<td class="normal-day-heading">Thursday</td>
<td class="normal-day-heading">Friday</td>
<td class="weekend-heading">Saturday</td>
<td class="weekend-heading">Sunday</td>
</tr>
<tr>
<td class="day-with-date no-events">
<span class="dayOfMonth ">1</span>
<span class="event"></span>
</td>
<td class="day-with-date no-events">
<span class="dayOfMonth ">2</span>
<span class="event"></span>
</td>
<td class="day-with-date no-events">
<span class="dayOfMonth ">3</span>
<span class="event"></span>
</td>
<td class="day-with-date no-events">
<span class="dayOfMonth ">4</span>
<span class="event"></span>
</td>
<td class="day-with-date no-events">
<span class="dayOfMonth ">5</span>
<span class="event"></span>
</td>
<td class="day-with-date no-events">
<span class="dayOfMonth weekend">6</span>
<span class="event"></span>
</td>
<td class="day-with-date no-events">
<span class="dayOfMonth weekend">7</span>
<span class="event"></span>
</td>
</tr>
</table>
view raw table_markup1.html hosted with ❤ by GitHub

Nimic greșit, doar că s-ar putea face un cod mai curat și mai simplu folosind câteva taguri html uitate sau ignorate. Un thead și tbody pot face minuni în ceea ce privește separarea secțiunilor:

<table>
<thead>
<tr>
<td colspan="7">
<table>
<tr>
<td class="calendar-prev"><a href="#">« Prev</a></td>
<th>August 2011</td>
<td class="calendar-next"><a href="#">Next »</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th class="weekend-heading">Saturday</th>
<th class="weekend-heading">Sunday</th>
</tr>
</thead>
<tbody>
<tr>
<td class="no-events">
<span class="dayOfMonth ">1</span>
<span class="event"></span>
</td>
<td class="no-events">
<span class="dayOfMonth ">2</span>
<span class="event"></span>
</td>
<td class="no-events">
<span class="dayOfMonth ">3</span>
<span class="event"></span>
</td>
<td class="no-events">
<span class="dayOfMonth ">4</span>
<span class="event"></span>
</td>
<td class="no-events">
<span class="dayOfMonth ">5</span>
<span class="event"></span>
</td>
<td class="no-events">
<span class="dayOfMonth weekend">6</span>
<span class="event"></span>
</td>
<td class="no-events">
<span class="dayOfMonth weekend">7</span>
<span class="event"></span>
</td>
</tr>
</tbody>
</table>
view raw table_markup2.html hosted with ❤ by GitHub

Rezultatul, din punct de vedere vizual, este fix același. În schimb, toată povestea devine mult mai logică. Nu?

Ți-a plăcut articolul? Lasă un comentariu!

You can insert code snippets using BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
You can also use some HTML tags:
<blockquote>.</blockquote> <code>.</code> <a href="">.</a> <strong>.</strong> <em>.</em>

windows apple dropbox facebook twitter