HTML Cheat Sheet

Tables

Basic tables with TR and TD

Tables are a very convenient means to display structured data. Tables can be boiled down to rows and cells. A simple table can be written as:

<table class="simple-table">
    <tr class="simple-row">
        <td class="simple-td">
            Data item 1
        </td>
        <td class="simple-td">
            Data time 2
        </td>
    </tr>
    <tr class="simple-row">
        <td class="simple-td">
            Data item 3
        </td>
        <td class="simple-td">
            Data item 4
        </td>
        <td class="simple-td">
            Data item 5
        </td>
    </tr>
    <tr>
        <td class="simple-td">
            Data item 6
        </td>
    </tr>
    <tr>
        <td class="simple-td" colspan="2">
            Data item 7
        </td>
    </tr>
</table>

Which looks like this:

Data item 1	Data time 2
Data item 3	Data item 4	Data item 5
Data item 6
Data item 7

Typically the data will be very structured, but notice that the number of columns are determines by the number of cells in a row. If you wanted to expand a cell to take up X columns, you can use colspan="X". Refer to the example above.

Tables with head, body, and footer

Modern tables now have thead, tbody, and tfoot tags that can be used with CSS to organize the table content better.

<thead>

THEAD is used to specify the Table Heading row and is used in lieu of <TR>. The heading row is the first row with the names for each of the columns. A table heading cell is typically specified by <TH>, not <TD>. <TH> content is automatically formatted with strong emphasis as a table label

<tbody>

TBODY is the section for your data. <TR> is the row and <TD> represents a cell.

<tfoot>

TFOOT is the bottom row of your table and can be used to contain aggregate data, such as totals.

<caption>

A description of the table that is read by users, screen readers, and bots.

Here is example code:

<table>
    <caption>
        My favorite Mortal Kombat characters
    </caption>
    <thead>
        <th>Name</th>
        <th>Favorite Move</th>
        <th>Button Combination</th>
        <th>Fatalities</th>
    </thead>
    <tbody>
        <tr>
            <td>Baraka</td>
            <td>Blade Spark</td>
            <td>Down Back Square</td>
            <td>3</td>
        </tr>
        <tr>
            <td>Cassie Cage</td>
            <td>Dual Wielding</td>
            <td>Back Forward Square</td>
            <td>6</td>
        </tr>
        <tr>
            <td>Erron Black</td>
            <td>Zaterrean Spit</td>
            <td>Down Back Square</td>
            <td>2</td>
        </tr>
        <tr>
            <td>Frost</td>
            <td>Ice Auger</td>
            <td>Back Forward Square</td>
            <td>8</td>
        </tr>
        <tr>
            <td>Johnny Cage</td>
            <td>Straight Forceball</td>
            <td>Back Forward Triangle</td>
            <td>3</td>
        </tr>
        <tr>
            <td>Kabal</td>
            <td>Buzzsaw</td>
            <td>Back Forward Square</td>
            <td>2</td>
        </tr>
        <tr>
            <td>Kano</td>
            <td>Blade Toss</td>
            <td>Back Forward Square</td>
            <td>5</td>
        </tr>
    </tbody>
    <tfoot>
        <th colspan="3">Total Fatalities</th>
        <th>29</th>
    </tfoot>
</table>

And this is what the code looks like with styling:

My favorite Mortal Kombat characters
Name	Favorite Move	Button Combination	Fatalities
Baraka	Blade Spark	Down Back Square	3
Cassie Cage	Dual Wielding	Back Forward Square	6
Erron Black	Zaterrean Spit	Down Back Square	2
Frost	Ice Auger	Back Forward Square	8
Johnny Cage	Straight Forceball	Back Forward Triangle	3
Kabal	Buzzsaw	Back Forward Square	2
Kano	Blade Toss	Back Forward Square	5
Total Fatalities			29

HTML CHEAT SHEET