Search code examples
htmlhtml-tablesemantic-websemantic-markup

Is <table> semantic for displaying phone, email, and fax?


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:name@example.com">name@example.com</a></td>
    </tr>
    <tr>
        <th>Fax</th>
        <td>+1234568</td>
    </tr>
    </tbody>
</table>

Unformatted, it will look like this:

enter image description here

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.)


Solution

  • 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.