Is the following code semantic use of HTML tables?
<table>
<tbody>
<tr>
<th>Phone</th>
<td>+1234567</td>
</tr>
<tr>
<th>Email</th>
<td><a href="mailto:[email protected]">[email protected]</a></td>
</tr>
<tr>
<th>Fax</th>
<td>+1234568</td>
</tr>
</tbody>
</table>
Unformatted, it will look like this:
Seems to be tabular data to me. (Thus, not only done for layout — although a side-effect is that it helps for having equal columns.)
The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells. Each table may have an associated caption (see the CAPTION element) that provides a short description of the table's purpose.
If you use the proper HTML markup for data tables, screen reader users will be able to navigate through the table much more easily. Designate row and column headers using the <th> tag.
If you are putting your contact into <table>
solely for layout purposes, then you'd do better to use css styled <dl>
. The identifiers would go in <dt>
s and the data in <dd>
s.
But if you are actually outputting a table of several contacts, then <table>
would be the correct element to use. Don't forget to use <th>
s for the identifiers and <td>
s for the data.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With