|
 A good designer knows that tables should not be used for layout, but rather for displaying columns and rows of data. HTML enables the creation of well-structured, well-formatted tables, but they’re used infrequently enough to make remembering all of the different elements and attributes rather time-consuming and tedious. So to make things easier, here is a clean HTML5 template to speed-up development for your next project:
<table dir="ltr" width="500" border="1">
<caption>Here we assign header information to cells
by setting the scope attribute.
</caption>
<colgroup width="50%" />
<colgroup id="colgroup" class="colgroup" align="center"
valign="middle" title="title" width="1*"
span="2" style="background:#ddd;" />
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Side</th>
<th scope="col">Role</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Darth Vader</td>
<td>Dark</td>
<td>Sith</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Obi Wan Kenobi</td>
<td>Light</td>
<td>Jedi</td>
</tr>
<tr>
<td>Greedo</td>
<td>South</td>
<td>Scumbag</td>
</tr>
</tbody>
</table>
Ahh, gives me goose bumps just looking at it. You can use this code with any markup language, whether HTML5, HTML 4.1, or any flavor of XHTML. Here is how this basic template looks in the current web page 1 (using different data and with styles removed):
Key languages involved with Web Standards
| Language |
Acronym |
Purpose |
| Cascading Style Sheets |
CSS |
Presentation |
| Hypertext Markup Language |
HTML |
Structure |
| JavaScript |
JS |
Behavior |
Notice that this 3-column/3-row table markup uses the scope attribute to set the column headers. You could also use the headers attribute like this:
<table>
<tr>
<th id="c1">Name</th>
<th id="c2">Side</th>
<th id="c3">Role</th>
<tr>
<td headers="c1">Greedo</td>
<td headers="c2">South</td>
<td headers="c3">Scumbag</td>
</tr>
</table>
But that requires more code, so I generally just roll with the scope, as used in the template code above. As with any template, this table markup serves as a starting point for further modification and elaboration. The nice thing about tables is that they are easily chopped and mixed, once you have the basic structure and the myriad pieces at your disposal. Also, notice the inclusion of some key attributes within the various markup elements. Here is the <table> element, for example:
<table dir="ltr" width="500" border="1">
Text direction, width (in pixels), and a border. Pretty common stuff. Other attributes are included within the <colgroup> elements, and may be applied to many of the different table elements. For example, align and valign may be used for rows (<tr>) and cells (<td>). Also included are all three width value-formats: pixels, percentages, and relative via n*. It’s nice to have everything all in one place and ready to go. Good times :)
Clean, precise, well-structured data
Anybody can type out a few <tr>s and <td>s and call it good, but a well-structured table benefits from precisely defined data. Four elements improve structure significantly: <caption>, <thead>, <tfoot>, and <tbody>, which also provide additional hooks for CSS and JavaScript. Of course, use only concise markup to keep things as lean and clean as possible.
Let me know if anything can be improved with this table template. I would be happy to post additional examples if generally useful. Here are some more Perishable Press resources that may provide some additional help with your markup efforts:
Footnote
1 The current page may be formatted in something other than HTML5, depending on which theme is used to view the content. ↩
Source: Perishable Press Take your WordPress skills to the next level with Digging into WordPress! Related articles
Read more: |
