HTML Basics: The Quick and Easy Way to Create Tables – Organize Your Data in Rows and Columns

Create HTML Tables Using TABLE, TR, and TD

At the time when HTML was just growing up, CSS was either unavailable at all or only available in very limited ways. At that time, i.e. in the early 2000s, tables without borders were used to design websites. Today, however, tables are no longer used to design a website because they are not as flexible as, for example, div containers.

Basic Structure of an HTML Table

There are at least three HTML elements required to create an HTML table. These are: TABLE, TR, and TD. Typically, TH is also used to define header cells as table headings.

• TABLE – A table always starts with the opening <table> tag and has to be closed with the closing </table> tag. Unless otherwise specified, everything between <table> and </table> is part of the TBODY element (Table Body).

• TR   (Table Row)
  Each line of the table starts with <tr> and has to be closed with </tr>.

• TD   (Table Data)
  Each data cell of the table starts with <td> and has to be closed with </td>.

• TH   (Table Header)
  Each table header cell starts with <th> and has to be closed with </th>.

A Very Simple HTML Table

<table border="1" width="320">
<tr>
    <td align="center">Row 1<br>Column 1</td>
    <td align="center">Row 1<br>Column 2</td>
    <td align="center">Row 1<br>Column 3</td>
</tr><tr>
    <td align="center">Row 2<br>Column 1</td>
    <td align="center">Row 2<br>Column 2</td>
    <td align="center">Row 2<br>Column 3</td>
</tr><tr>
    <td align="center">Row 3<br>Column 1</td>
    <td align="center">Row 3<br>Column 2</td>
    <td align="center">Row 3<br>Column 3</td>
</tr>
</table>

Span Adjacent Table Cells

Sometimes it is useful for a cell to span across multiple columns or across multiple rows. This might be used if you have data that needs to be grouped together horizontally or vertically. Both colspan and rowspan are attributes of the two table cell elements, <th> and <td>, respectively. They provide the same functionality as the merge cells feature in a spreadsheet program such as Microsoft Excel or LibreOffice Calc.

The colspan and rowspan attributes are used to merge multiple adjacent cells in the table into one cell. With colspan (Column Span), cells which lie side by side are merged. To merge cells that are one below another, the attribute rowspan (Row Span) is used.

These two attributes can only be used for table cells, i.e. only for the two HTML elements TD and TH.

• The colspan attribute is used to merge a table cell to the right with multiple adjacent cells in the same row.

• The rowspan attribute is used to merge a table cell downwards with multiple adjacent cells in the same column.

• The value of the colspan resp. rowspan attribute must be a positive integer. It indicates the number of contiguous cells, including the current cell that the cell fills.

• The simultaneous use of colspan and rowspan makes it possible to merge a table cell to the right and downwards with a number of adjacent cells in the table.

The colspan attribute is used to span several columns to the right, i.e. a table cell is extended to the right across multiple cells without specifying which cells are spanned. The spanned cells may no longer be specified. See the table cell with content 11, 12 in the second table.

The rowspan attribute is used to span several rows to the bottom, i.e. a table cell is extended to the bottom across multiple cells without specifying which cells are spanned. The spanned cells may no longer be specified. See the table cell with the content 13, 23, 33, 43 in the second table.

The colspan and rowspan attributes can be combined specified together. See the table cell with the content 31, 32, 41, 42 in the third table.

Example of a Slightly More Complex HTML Table

<table border="1">
<tr>
    <th colspan="3" bgcolor="#cccccc">Invoice #123456789</th>
    <th>December 22, 2024</th>
</tr><tr>
    <td colspan="2">
        <strong>Bill to:</strong><br>
        PType Inc.<br>
        M79 Samples Road<br>
        Pattern Town, ZD 12345
    </td>
    <td colspan="2">
        <strong>Customer:</strong><br>
        John Doe<br>
        123 Sample Street<br>
        Shape Town, WD 98765
    </td>
</tr><tr>
    <th bgcolor="#cccccc">Name / Description</th>
    <th bgolor="#cccccc">Amount</th>
    <th bgcolor="#cccccc">Unit Price</th>
    <th bgcolor="#cccccc">Price</th>
</tr><tr>
    <td bgcolor="#ffff90">Paper clips</td>
    <td bgcolor="#ffff90">1000</td>
    <td bgcolor="#ffff90" align="right">0,015 &euro;</td>
    <td bgcolor="#dddd60" align="right">15,00 &euro;</td>
</tr><tr>
    <td bgcolor="#ffff90">Staples (Pkg.)</td>
    <td bgcolor="#ffff90">100</td>
    <td bgcolor="#ffff90" align="right">1,24 &euro;</td>
    <td bgcolor="#dddd60" align="right">124,00 &euro;</td>
</tr><tr>
    <th colspan="3" bgcolor="#cccccc">Subtotal</th>
    <td bgcolor="#dddd60" align="right">139,00 &euro;</td>
</tr><tr>
    <th colspan="2" bgcolor="#cccccc">VAT</th>
    <td>19%</td>
    <td bgcolor="#dddd60" align="right">26,41 &euro;</td>
</tr><tr>
    <th colspan="3" bgcolor="#cccccc">Total</th>
<td bgcolor="#00dd00" align="right">165,41 &euro;</td>
</tr>
</table>

There are three elements in HTML that can be used to define logical sections within a table.

• TBODY (Table Body Section)

• THEAD (Table Header Section)

• TFOOT (Table Foot SEction)

These elements are only allowed to contain <tr> tags. That means, a group of table rows is enclosed by each of them.

<table border="1">
<thead>
<tr>
    <th colspan="3" bgcolor="#cccccc">Invoice #123456789</th>
    <th>December 22, 2024</th>
</tr><tr>
    <td colspan="2">
        <strong>Bill to:</strong><br>
        PType Inc.<br>
        M79 Samples Road<br>
        Pattern Town, ZD 12345
    </td>
    <td colspan="2">
        <strong>Customer:</strong><br>
        John Doe<br>
        123 Sample Street<br>
        Shape Town, WD 98765
    </td>
</tr>
</thead>
<tbody>
<tr>
    <th bgcolor="#cccccc">Name / Description</th>
    <th bgolor="#cccccc">Amount</th>
    <th bgcolor="#cccccc">Unit Price</th>
    <th bgcolor="#cccccc">Price</th>
</tr><tr>
    <td bgcolor="#ffff90">Paper clips</td>
    <td bgcolor="#ffff90">1000</td>
    <td bgcolor="#ffff90" align="right">0,015 &euro;</td>
    <td bgcolor="#dddd60" align="right">15,00 &euro;</td>
</tr><tr>
    <td bgcolor="#ffff90">Staples (Pkg.)</td>
    <td bgcolor="#ffff90">100</td>
    <td bgcolor="#ffff90" align="right">1,24 &euro;</td>
    <td bgcolor="#dddd60" align="right">124,00 &euro;</td>
</tr>
</tbody>
<tfoot>
<tr>
    <th colspan="3" bgcolor="#cccccc">Subtotal</th>
    <td bgcolor="#dddd60" align="right">139,00 &euro;</td>
</tr><tr>
    <th colspan="2" bgcolor="#cccccc">VAT</th>
    <td>19%</td>
    <td bgcolor="#dddd60" align="right">26,41 &euro;</td>
</tr><tr>
    <th colspan="3" bgcolor="#cccccc">Total</th>
<td bgcolor="#00dd00" align="right">165,41 &euro;</td>
</tr>
</tfoot>
</table>

By default, the HTML elements THEAD, TBODY and TFOOT have no influence on the display of the table. However, the properties of these HTML elements can be changed using CSS.

THEAD and TFOOT may occur a maximum of once in a table. TBODY must occur at least once.

If THEAD, TBODY and TFOOT are not specified in the HTML sourcecode, the browsers automatically insert the missing TBODY.