HTML Tables
Jakob Jenkov |
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.
| Tweet | |
Jakob Jenkov | |
