Tech and Media Labs
This site uses cookies to improve the user experience.




HTML Tables

Jakob Jenkov
Last update: 2014-07-10

HTML has a set of elements making it possible to create tables in your HTML documents. This text explains how you create tables in your HTML documents.

It is possible to style HTML tables using CSS. I have explained how in my tutorial about CSS table styling. Some aspects of tables can be set both via HTML attributes (like align and valign) and CSS properties. I prefer using the CSS properties whenever possible.

The table Element

A table can be created with the <table> element. Every table starts with the <table> tag and ends with the </table> end tag. Here is how the table element looks:

<table>

</table>

The <tr> element defines a table row (horizontal) and the <td> (table data) element defines the cells. These two elements are nested inside the table element. Here is an example:

<table>
    <tr>
        <td> cell 1 </td>
        <td> cell 2  </td>
    </tr>
    <tr>
        <td> cell 3  </td>
        <td> cell 4 </td>
    </tr>
</table>

This example defines a table with 2 table rows, with 2 table cells in each row. The result is a table with two rows (horizontal) and two columns (vertical).

Here is how the table looks in a browser:

cell 1 cell 2
cell 3 cell 4

The border Attribute

You can display a border around an HTML table by using the border attribute. The border attribute value should be set to a number. The number defines the thickness of the border in pixels. Here is an example of a table with borders.

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

This example defines a table with a border thickness of 1 pixel.

Here is how the above table with a border looks in the browser:

cell 1 cell 2
cell 3 cell 4

Notice how the border is drawn around every single table cell.

You can do a whole lot more border styling on HTML tables with CSS. I have explained the border styling options in CSS in my tutorial about borders in CSS.

The cellspacing and cellpadding Attributes

You can set how much space there should be between the individual table cells, and between the table cell content and to the borders of the cell. You do so using the cellspacing and cellpadding attributes.

The cellspacing attribute sets how much space in pixels there should be between the cells. Here is an example using 10 as cellspacing:

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

Here is how the table looks in the browser:


Cell 1 Cell 2
Cell 3 Cell 4

The cellpadding attribute sets how much space there should be between the content of a cell and the cell border. Here is an example using 10 as cellpadding:

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

Here is how the table looks in the browser:


Cell 1 Cell 2
Cell 3 Cell 4

Finally, here is how a table looks when using 10 as both cellspacing and cellpadding:


Cell 1 Cell 2
Cell 3 Cell 4

You can also set cell spacing and cell padding via the CSS properties border-spacing and padding (on table cells).

The thead, tfoot and tbody Elements

A HTML table can define a table head <thead> and a table foot <tfoot>. In case of a page break when printing the page, these elements make sure, that the table head and the table foot will be shown automatically on each page. Here is an example:

<table border="1">
    <thead>
    <tr>
        <th>Homepage 1</th>
        <th>Homepage 2</th>
        <th>Homepage 3</th>
    </tr>
    </thead>

    <tfoot>
    <tr>
        <td>1.2 Mio.</td>
        <td>1.5 Mio.</td>
        <td>2.1 Mio.</td>
    </tr>
    </tfoot>

    <tbody>
    <tr>
        <td>Europe</td>
        <td>America</td>
        <td>Asia</td>
    </tr>
    <tr>
        <td>Copenhagen</td>
        <td>New York</td>
        <td>Bangkok</td>
    </tr>
    </tbody>

</table>

Notice that a tbody section is defined too.

Here is how the above table looks in the browser:


Homepage 1 Homepage 2 Homepage 3
1.2 Mio. 1.5 Mio. 2.1 Mio.
Europe America Asia
Copenhagen New York Bangkok

Notice how the text of the table row inside the thead element is now emphasized. Notice also how the table row inside the tfoot section is displayed at the bottom of the table, even if it is defined right after the thead section in the HTML.

The th Element

If you go back and study the examples in this section more carefully, you will see that the thead section uses a th element instead of the td element used in the rest of the table.

The th element defines a table header cell inside a table.

The th element behaves in the same way as the td element, but can be styled individually using CSS.

The rowspan and colspan Attributes

Table cells can span multiple rows or columns using the rowspan and colspan attributes.

Here is an example where the cell in the first row spans 3 columns:

<table border="1">
    <tr>
        <td colspan="3" > 1 </td>
        <td> 4 </td>
        <td> 5 </td>
    </tr>
    <tr>
        <td> a </td>
        <td> b </td>
        <td> c </td>
        <td> d </td>
        <td> e </td>
    </tr>
</table>

Here is how the table looks in the browser:


1 4 5
a b c d e

Notice how the first cell of the first row is spanning 3 cells (columns) compared to the second row.

To make a column span multiple rows you can use the rowspan attribute. Here an example:

<table border="1">
    <tr>
        <td> 1  </td>
        <td rowspan="2" > 2  </td>
        <td> 3  </td>
    </tr>
    <tr>
        <td> a  </td>

        <td> c  </td>
    </tr>
</table>

Here is how the table looks in the browser:


1 2 3
a c

Notice how the second cell of the first row is now spanning two rows. Therefore you only need to define 2 cells in the second row, instead of the 3 cells defined in the first row.

The align and valign Attributes

It is possible to define how the text should be aligned within a table cell, in case the table cell is larger than the text. Take a look at this table:


This is a very long, long, long, text short text

Notice how the text in the second cell is floating vertically in the middle of the cell, and horizontally to the left in the cell. You can change this alignment of the text using the align and valign attributes.

The align attributes aligns the content of a table cell horizontally. You can use these values:

left Aligns the cell content towards the left edge of the cell.
right Aligns the cell content towards the right edge of the cell.
center Aligns the cell content towards the center of the cell.
justify Stretches the cell content so that each line has the same width.

Here is the same table but with a right alignment in the second cell instead:


This is a very long, long, long, text short text

To achieve this right alignment, all you have to do is set the align="right" attribute on the td element you want to apply the alignment to. Here is a simple example:

<td align="right"></td>

You can also do vertical alignment using the valign attribute. Here is an example:


This is a very long, long, long, text short text

The second cell has its contents aligned towards the bottom now. Here is how the HTML for a td element with the valign attribute looks:

<td valign="bottom"></td>

Here is a list of the valid attributes for the valign attribute:


top Aligns the cell content towards the top of the cell.
middle Aligns the cell content towards the middle of the cell.
bottom Aligns the cell content towards the bottom of the cell.
baseline Aligns the cell content against an invisible baseline for the content of all cells in the same row. This looks better if the text in different cells is displayed using different font sizes. The texts will then still be vertically aligned with the same baseline.

You can also set the horizontal and vertical alignment via the CSS properties text-align and vertical-align.

The width and height Attributes

The width and height attributes of both the table and td elements, can be used to control the width and height of the table, and the individual cells.

This example sets the width of a table to 300 pixels:

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

Here is how the table looks in the browser. Notice it is now much wider than the content inside the cells.


Cell 1
Cell 2

You can also set the width of a table to be a percentage of the browser window width, or the width of its parent HTML element. You do so by putting a % after the number inside the width attribute. Here is an example:

<table width="50%" border="1">

</table>

This table would take of 50% of the width of the browser window or 50% of the width of its parent HTML element.

The height attributes of the table element works in the same way as the width attribute, except is modifies the height of the table.

You can also set the width and height of a table via the width and height CSS properties.

The width and height Attributes of Table Cells

The width and height attributes of the td element can be used to set the width and height of each table cell. Of course each cell cannot have completely its own width and height, since table cells are displayed as rows and columns.

Here is an example:

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

And here is how the table looks in the browser.


Cell 1 Cell 2
Cell 3 Cell 4

Notice how the width of the cells in the first row, also defines the width of the cells in the same vertical column of the second row.

Here is an example that sets the height of a table cell to 50 pixels:

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

Here is how the table looks in the browser:


Cell 1 Cell 2
Cell 3 Cell 4

Notice how the height of the first cell in the first row sets the height for all cells in the same row.

You can also use percentages as widths and heights. If you set the width or height of a table cell using percentages, the cell will get that percentage of the tables width or height. Here is an example:

<table border="1" height="100">
    <tr>
        <td height="25%">Cell 1</td>
        <td>Cell 2</td>
    </tr>
    <tr>
        <td>Cell 3</td>
        <td>Cell 4</td>
    </tr>
</table>

Here is how the table looks in the browser:


Cell 1 Cell 2
Cell 3 Cell 4

As you can see, the table is 100 pixels high, and the first row height is 25% of these 100 pixels = 25 pixels.

You can also set the width and height of table cells via the width and height CSS properties.

Jakob Jenkov




Copyright  Jenkov Aps
Close TOC