HTML tables are used to arrange HTML-supported data into rows and columns of cells.
HTML tables are created using the <table> tag. Within the tags, you typically use the <tr> tag to create table rows. Tr stands for table row. Inside the <tr> tag, you can use the <td> tag to create data cells. Td stands for table data. The content is placed under the <td> tag.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables Example</title>
</head>
<body>
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
</table>
</body>
</html>The above code will produce a table such as this:
| Row 1, Column 1 | Row 1, Column 2 | Row 1, Column 3 |
| Row 2, Column 1 | Row 2, Column 2 | Row 2, Column 3 |
| Row 3, Column 1 | Row 3, Column 2 | Row 3, Column 3 |
We’ve used the border attribute to give the table and cells a border of 1 pixel.
Table Heading
You can use the <th> tag to define a table heading. <th> tags replace <td> tags in rows where you want to specify a heading. Typically they would be used on the first row even though they can appear on any row.
Example
This HTML table uses table headings on the first row.
<table>
<tr>
<th>Company</th>
<th>Owner</th>
<th>Country</th>
</tr>
<tr>
<td>Acme Corporation</td>
<td>Martin Acmes</td>
<td>England</td>
</tr>
<tr>
<td>Merlin Fisheries</td>
<td>Peter Chenney</td>
<td>Australia</td>
</tr>
<tr>
<td>Max Agri Tools</td>
<td>Fred Hammad</td>
<td>United States</td>
</tr>
</table>The above code will produce a table such as this:
| Company | Owner | Country |
|---|---|---|
| Acme Corporation | Martin Acmes | England |
| Merlin Fisheries | Peter Chenney | Australia |
| Max Agri Tools | Fred Hammad | United States |
Table Height and Width
Use the width and height attributes to set the table size. The dimensions can be set using either pixels or a percentage of the available screen area.
<table border="1" width="480" height="320">
...
</table>Table Background and Border Color
You can set table background color and border color using one of the following attributes depending on what you want to achieve.
- bgcolor attribute − Use this to set the background color for the whole table or if used as a attribute then it will apply to just one cell.
- background attribute − Use this to set a background image for the whole table or if used as a attribute then it will apply to just one cell.
- bordercolor attribute – Use this to set a border color for the whole table.
Note − The bgcolor, background, and bordercolor attributes were deprecated in HTML5. Do not use these attributes. Instead, use the style attribute or external CSS styles.
Cell Padding and Cell Spacing
You can use the following attributes to control white space within and surrounding cells. The value of these attributes is in pixes.
-
cellpadding attribute – use this attribute in the
<td>tag to set the white space between the content and the edge of the cell -
cellspacing attribute – Use this attribute in the
<td>tag to set the white space between surrounding cells
<table border="1" cellpadding="7" cellspacing="7">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Zawadi Amani</td>
<td>50</td>
</tr>
<tr>
<td>Mumbi Gichui</td>
<td>35</td>
</tr>
</table>The above code will produce a table such as this:
| Name | Age |
|---|---|
| Zawadi Amani | 50 |
| Mumbi Gichui | 35 |
Column Spans and Row Spans
You can use the following attributes in the <td> tags as follows:
- colspan attribute – use this attribute to merge cells horizontally
- rowspan attribute – use this attribute to merge cells vertically
Example
colspan and rowspan attributes usage:
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td colspan="3">Row 1 Cell 1</td>
</tr>
<tr>
<td rowspan="2">Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td>Row 3 Cell 2</td>
<td>Row 3 Cell 3</td>
</tr>
</table>The above code will produce a table such as this:
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Row 1 Cell 1 | ||
| Row 2 Cell 1 | Row 2 Cell 2 | Row 2 Cell 3 |
| Row 3 Cell 2 | Row 3 Cell 3 |
Table Header, Body, and Footer
HTML tables can be divided into three logical sections namely a header, a body, and a footer.
The three elements for sectioning the header, body, and footer of a table are:
-
<thead>− used to create a separate table header. -
<tbody>− used to indicate the main body of the table. -
<tfoot>− used to create a separate table footer.
The content within the <thead> is always displayed at the top of the table while the content within the <tfoot> tag is always at the end of the table. These tags work similarly to the header and footer of a Word Processor where the content in those sections is displayed on every page. A table can have more than one <tbody> tag. These can act as different pages or groups of data.
Example
Table showing the use of <thead>, <tbody>, <tfoot> tags:
<table>
<thead>
<tr>
<th colspan="2">This is the table header</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">This is the table footer</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>The above code will produce a table such as this:
| This is the table header | |
|---|---|
| January | $100 |
| February | $80 |
| This is the table footer |
Nested Tables
Tables can be nested within other tables as long as the child table is placed inside a <td> tag.
Example
<table border="1" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td colspan="2">
<table border = "1" width = "100%">
<tr>
<th>Month</th>
<th>Profit</th>
</tr>
<tr>
<td>January</td>
<td>$5000</td>
</tr>
<tr>
<td>February</td>
<td>$7000</td>
</tr>
</table>
</td>
</tr>
</table>