HTML Tables

"Back in the day", developers would lay out their entire websites in a table to position things. DON'T EVER DO THAT!! We use CSS and fancy CSS based grid systems like Bootstrap now.

Tables are still useful for presenting tabular data, like something you might want to show in an excel sheet to someone.

Let's look at the pieces followed by an example:

Basics

The tags we are concerned about when making a table in HTML are:

<table> - Defines a table. This tag wraps everything else.

<tr> - Defines a row in a table. Parent to any <td> or <th> tags.

<td> - Defines a cell in a table. Child to a <tr> tag.

<th> - Defines a header cell in a table. Same as <td> with bolded text. Child to a <tr> tag.

<caption> - Defines a caption for the whole table.

<colgroup> - Specifies a group of one or more columns in a table for formatting

<col> - Specifies column properties for each column within a element

<thead> - Groups the header content in a table

<tbody> - Groups the body content in a table

<tfoot> - Groups the footer content in a table

A typical table might look like this:

<table>
    <tr>
        <th>Instructor</th>
        <th>Favorite Subject</th>
    </tr>
    <tr>
        <td>Bob Ziroll</td>
        <td>CSS positioning</td>
    </tr>
    <tr>
        <td>Dan Hitt</td>
        <td>jQuery</td>
    </tr>
</table>

Without any styling, the table looks pretty boring...

However, with some simple CSS we can pretty it up very quickly:

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

That last CSS selector - tr:nth-child(even) - might be unfamiliar, but is intuitive for a table. We are giving every other <tr> a different background color. (The 'even' rows).

Other important attributes in the above CSS are:
width: 100%, border, and padding. Put together, our table now looks much better:

That's much nicer.

There are some special attributes that use to be common in table rows and columns to help with aditional styling, but which are not supported in HTML 5. All table stylings should now be done exclusively through CSS.