Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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:[email protected]">[email protected]</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.)

like image 543
Baumr Avatar asked Jan 22 '13 14:01

Baumr


People also ask

What are HTML tables used for?

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.

How would you mark up a header for a table row HTML?

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.


1 Answers

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.

like image 176
dnagirl Avatar answered Sep 20 '22 12:09

dnagirl