HTML tables allow for data to be arranged into rows and columns using the <table> tag, which contains the <tr> tag for rows and the <td> tag for data cells that are not in the header row. For the header row <th> tags are used for the data since they will contain header data.

This is a simple table. It has two columns with four rows of data. It also has a header row that names each of the columns to show what the data represents.

Grade	Class
A-	Math
B	English
B+	History
C+	Science

The following represents the code to build the table above (ignore the formatting; we’ll look at that while doing our table formatting). We are only interested in the HTML structure – a row with two columns of header data, and four rows containing two columns of data.

<table>
    <!-- header row -->
    <tr>
        <!-- column headeers; two columns -->
        <th>Grade</th>
        <th>Class</th>
    </tr>
    <!-- rows -->
    <tr>
        <td>A-</td> <!-- column 1 data -->
        <td>Math</td> <!-- column 2 data -->
    </tr>
    <tr>
        <td>B</td> <!-- column 1 data -->
        <td>English</td> <!-- column 2 data -->
    </tr>
    <tr>
        <td>B+</td> <!-- column 1 data -->
        <td>History</td> <!-- column 2 data -->
    </tr>
    <tr>
        <td>C+</td> <!-- column 1 data -->
        <td>Science</td> <!-- column 2 data -->
    </tr>
</table>

The first thing we need is the <table> tag which defines everything within it to be part of the table.

<table>

</table>

Then inside the <table> tag we create a series of rows using the <tr> tag. For this table we need the row that will be the table header and then we need four additional rows. Each row begins with <tr> and ends with </tr>.

<table>
    <tr>
    </tr>

    <tr>
    </tr>

    <tr>
    </tr>

    <tr>
    </tr>

    <tr>
    </tr>
</table>

Inside the first set of <tr /tr> tags we will use <th> tags for the header data (column descriptors). There are two columns of data, so we need two sets of <th /th> tags.

Finally, inside each row we want two columns of data. So we need two sets of <td /td> inside each row.

<table>
    <tr>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

This gives us our table with default formatting, meaning minimum table size, minimum cell spacing, no borders, etc. Next, we will look at the table and cell attributes for doing some table formatting to change these defaults and make the table slightly more appealing (like the example table at the top of the page).

Lastly, if necessary, the header row can instead be a header column. This is called a vertical header. All we need to do is place a <th> tag first thing within each <tr / tr> set to create the header column.

<table>
    <tr>
        <th>First Name</th>
        <td>Mark</td>
        <td>James</td>
        <td>Emily</td>
    </tr>
    <tr>
        <th>Last Name</th>
        <td>Gonzalez</td>
        <td>Harbour</td>
        <td>Watson</td>
    </tr>
    <tr>
        <th>Grade</th>
        <td>A-</td>
        <td>C</td>
        <td>A+</td>
    </tr>
</table>

---