Starting with a Basic Table

As CSS increases in popularity, there is a growing trend to move away from using tables to mark up content. However, there are times when tables are the best markup option, especially for tabular data. A basic data table is shown in Listing 14.1.

Listing 14.1. HTML Code Containing the Markup for a Data Table

<table>
    <tr>
        <td>Item</td>
        <td>Threaded screws </td>
        <td>Flat nails</td>
        <td>Dyna-bolts </td>
        <td>Spring washers</td>
    </tr>
    <tr>
        <td>1 kg</td>
        <td>$2.50</td>
        <td>$3.50</td>
        <td>$4.50</td>
        <td>$2.50</td>
    </tr>
    <tr>
        <td>2kg</td>
        <td>$3.00</td>
        <td>$4.00</td>
        <td>$5.00</td>
        <td>$3.00</td>
    </tr>
    <tr>
        <td>3kg</td>
        <td>$3.50</td>
        <td>$4.50</td>
        <td>$5.50</td>
        <td>$3.50</td>
    </tr>
    <tr>
        <td>4kg</td>
        <td>$4.00</td>
        <td>$5.00</td>
        <td>$6.00</td>
        <td>$4.00</td>
    </tr>
</table>

Table of Contents