HTML Cheat Sheet

Tables

Overview

Tables are one of the more confusing parts of HTML, but don't let that scare you off! They are useful to know, and you can show your cool tables off to all your friends.

Tables Are Cool
woooooooo isys100 a
pooooooom is b
vroooooom awesome c

So lets think about the different parts of a table for a second, we have rows, columns, cells and the table. In HTML we only use table, row and cells.

HTML Part
table The table itself
tr A row in the table
td Table data, a cell in the tale
th A heading in the table

Basic Tables

The best way to understand them is through examples

HTML

<table>
    <tr>
        <td>A cell!</td>
    </tr>
</table>

RESULT

A cell!

Ah, we haven't specified a border so you can't see our table!

HTML

<table border="1">
    <tr>
        <td>A cell!</td>
    </tr>
</table>

RESULT

A cell!

In the example above you can see we have 1 table, 1 row and 1 cell.

HTML

<table border="1">
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
</table>

RESULT

Cell 1 Cell 2

By adding another td or cell we essentially create another column.

HTML

<table border="1">
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
    <tr>
        <td>Cell 3</td>
        <td>Cell 4</td>
    </tr>
</table>

RESULT

Cell 1 Cell 2
Cell 3 Cell 4

Now, how many rows and columns do we have? To count rows, look for tr's - we have 2 rows. To count columns look for td's in a single tr - in the first tr we have two td's.. so we have 2 columns!

Table Headings

If one of your cells is being used as a heading you can use th instead of td, like below.

HTML

<table border="1">
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
</table>

RESULT

Heading 1 Heading 2
Cell 1 Cell 2

Styling Tables

We can change the border on our tables by adding a border attribute to our table.

HTML

<table border="5">
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
</table>

RESULT

Cell 1 Cell 2