HTML Table

The HTML table defined using the <table> tag allows to arrange data including text, images, links, videos, etc in rows and columns.
The table contains 2 important tags <tr> and <td>. The <tr> tag allows creating the rows and <td> tag allows creating the cells within the row. Below is an exmaple of HTML table.

Example

CountryCapitalCity
ChinaBeijingShanghai
IndiaNew DelhiHyderabad
AustraliaCanberraSydney

Creating HTML Table

In the example above, the HTML table is created using the <table> tag. The heading of the table is defined using the <th> tag. Each of the rows is created using the <tr> tag. And each of the cells are created using the <td> tag. Here is the source code for the above table.
<table border="1"> <tr><th>Country</th><th>Capital</th><th>City</th></tr> <tr><td>China</td><td>Beijing</td><td>Shanghai</td></tr> <tr><td>India</td><td>New Delhi</td><td>Hyderabad</td></tr> <tr><td>Australia</td><td>Canberra</td><td>Sydney</td></tr> </table>

Adding Header and Footer to a Table

A table can contain a header that can be defined using the <th> tag or with <thead> tag in conjunction with <th> tag. The <th> tag identifies the header for a column and is inserted within the <tr> tag. However, this approach does not clearly identify a specific header row. To identify the header row, <thead> should be used. Usually, <tbody> and <tfoot> tags are also used to identify the body and footer of the table respectively. This approach is better as it identifies a specific row as the header. This can be used, for example, to print the header row on each page when a very long table is printed and prints in multiple pages.

Similar to adding header, a footer can be added to the table by using the <tfoot> tag. The <tfoot> tag, by default, will appear as the last row in the table.

Note: Visually, there is no difference between <thead> and <th> tag unless a style has been written to render the tags differently. Also, note that a <tbody> tag should be used to display the contents of the table when <thead> and <tfoot> is used.

<table border="1"> <thead> <tr><th>Country</th><th>Capital</th><th>City</th></tr> </thead> <tbody> <tr><td>China</td><td>Beijing</td><td>Shanghai</td></tr> <tr><td>India</td><td>New Delhi</td><td>Hyderabad</td></tr> </tbody> <tfoot> <tr><td>Table</td><td>Ends</td><td>Here</td></tr> </tfoot> </table>

Adding Borders to a Table

By default, a table does not have borders. Border can be added simply by using CSS and setting the border property as shown below. A border for the table allows for improved visibility.

<table border="1"> <tr><th>Country</th><th>Capital</th><th>City</th></tr> <tr><td>China</td><td>Beijing</td><td>Shanghai</td></tr> <tr><td>India</td><td>New Delhi</td><td>Hyderabad</td></tr> </table>

Though we can easily add a border by the above style, the border does not look nice (at least to me) as there are multiple borders around the same cell. To remove the multiple borders and display the table with single border, using the "border-collapse" property in the CSS as shown below.

<table border="1" style="border-collapse:collapse"> <tr><th>Country</th><th>Capital</th><th>City</th></tr> <tr><td>China</td><td>Beijing</td><td>Shanghai</td></tr> <tr><td>India</td><td>New Delhi</td><td>Hyderabad</td></tr> </table>

On the contrary, spacing between the cells and therefore the cell borders can be changed using the CSS border-spacing property as shown below.

<table border="1" style="border-spacing:10px"> <tr><th>Country</th><th>Capital</th><th>City</th></tr> <tr><td>China</td><td>Beijing</td><td>Shanghai</td></tr> <tr><td>India</td><td>New Delhi</td><td>Hyderabad</td></tr> </table>

Add Cell Padding to a Table

Cell Padding for a table is the space between the contents of a cell and its border. Prior to HTML5, the cell-padding could have been set using the cellpadding property. In HTML5, cellpadding property has been removed and it needs to be set using the CSS padding property as shown below.

<style> td { padding:4px;} </style> <table border="1"> <tr><th>Country</th><th>Capital</th><th>City</th></tr> <tr><td>China</td><td>Beijing</td><td>Shanghai</td></tr> <tr><td>India</td><td>New Delhi</td><td>Hyderabad</td></tr> </table>

Align the Table Headers

By default, table headers are center aligned and in bold format. The alignment and formatting of the header can be easily achieved using the CSS text-align property as shown below.

<style> th { text-align:left;} </style> <table border="1"> <tr><th>Country</th><th>Capital</th><th>City</th></tr> <tr><td>China</td><td>Beijing</td><td>Shanghai</td></tr> <tr><td>India</td><td>New Delhi</td><td>Hyderabad</td></tr> </table>

Colspan - Add Cells with many Columns

Sometimes, a cell can be divided into multiple columns using the colspan attribute as shown below. This allows for a increased flexibility in creating the structure of the table.

<table border="1"> <tr><th>Country</th><th>Capital</th><th>City</th></tr> <tr><td colspan="2">China and Tibet</td><td>Beijing</td></tr> <tr><td>India</td><td>New Delhi</td><td>Hyderabad</td></tr> </table>

Rowspan - Add Cells with many Rows

Similarly, a cell can be divided into multiple rows using the rowspan attribute as shown below. This allows for a increased flexibility in creating the structure of the table.

<table border="1"> <tr><th>Country</th><th>Capital</th><th>City</th></tr> <tr><td rowspan="2">China</td><td>Beijing</td><td>Shanghai</td></tr> <tr><td>Beijing</td><td>Shanghai</td></tr> <tr><td>India</td><td>New Delhi</td><td>Hyderabad</td></tr> </table>

Add Caption to the table

Caption for a table can be defined using the caption tag. The caption can be thought of as the name of the table and is different from the table header. A table header usually identifies the header of each column whereas the caption identifies the name of the table. The caption can be set as shown below.

<table border="1"> <caption>Table showing county and cities</caption> <tr><th>Country</th><th>Capital</th><th>City</th></tr> <tr><td>China</td><td>Beijing</td><td>Shanghai</td></tr> <tr><td>India</td><td>New Delhi</td><td>Hyderabad</td></tr> </table>

Styling a Table

Alternate Rows Columns

The dafult style of the table is quite simple and long tables are difficult to read or follow. To improve readibility, alternate rows of a table can be styled differently. Usually, a different background color is used to identify alternate rows. There are a couple of ways to achieve this effect. The cumbersome way is to specify different CSS classes to different rows and then to have different styles for the rows. Alternately, and even better is to use the CSS pseudo-selector called nth-child. The nth-child selector allows to add "even" and "odd" and formula like "2n+1" to select the specific items to apply the style to. Below are some examples.

<style> tr:nth-child(even) { background-color: #aaa; } tr:nth-child(odd) { background-color: #ccc; } </style>

Add Images within a Cell

A table cell can contain any content, graphics, media or anything that HTML can contain. To insert images to a cell, simply use the <img> tag inside the <td> as shown below.

<table border="1"> <caption>Table showing county and cities</caption> <tr><th>Country</th><th>Capital</th><th>Flag</th></tr> <tr><td>China</td><td>Beijing</td><td><img src="flag.png" /></td></tr> <tr><td>India</td><td>New Delhi</td><td><img src="flag.png" /></td></tr> </table>

Add Background Images to a Table

A table like any other block element can have a background image and color. You might have guessed it already and yes CSS can be used to specify a background color or image for a table as shown below.

<table border="1" style="background-image:url('bg.png')"> <caption>Table showing county and cities</caption> <tr><th>Country</th><th>Capital</th><th>Flag</th></tr> <tr><td>China</td><td>Beijing</td><td>Shanghai</td></tr> <tr><td>India</td><td>New Delhi</td><td>Hyderabad</td></tr> </table>

Setting Height and Width of a Table

A table, by default, will take up 100% of the width and height that is required to display it. The height and width can be set to make a table larger or smaller. Height and width can be set using the either pixels or percentages. Prior to HTML5, the height and width could be set using "height" and "width" attributes. From HTML5 onwards, it needs to be set using CSS as shown below.

<table border="1" style="height:400px; width:50%;"> <caption>Table showing county and cities</caption> <tr><th>Country</th><th>Capital</th><th>Flag</th></tr> <tr><td>China</td><td>Beijing</td><td>Shanghai</td></tr> <tr><td>India</td><td>New Delhi</td><td>Hyderabad</td></tr> </table>

Create a Scrollable Table

Sometimes a table can become very large due to having lots of data. However, though we want to display the whole table, we do not want to take up substantial space area within the screen and this is when we would want to make a table scrollable. The table can be made to scroll simply by creating the table within a div element with fixed height or width and then adding the CSS property overflow to scroll.

<div style="height:200px; overflow:scroll;"> <table border="1" style="height:400px; width:50%;"> <caption>Table showing county and cities</caption> <tr><th>Country</th><th>Capital</th><th>Flag</th></tr> <tr><td>China</td><td>Beijing</td><td>Shanghai</td></tr> <tr><td>India</td><td>New Delhi</td><td>Hyderabad</td></tr> </table> </div>

Create a Nested Table

Sometimes it might be necessary to diaplay a table within another table. Like said before, pretty much any other HTML tags can be added within the <td> tag. So, to add another table within a table cell, simply add the table structure within the table's <td> tag. Here is an example shown below.

<table border="1" style="height:400px; width:50%;"> <caption>Table showing county and cities</caption> <tr><th>Country</th><th>Capital</th><th>Flag</th></tr> <tr><td>China</td><td>Beijing</td><td>Shanghai</td></tr> <tr><td>India</td><td>New Delhi</td><td><table border="1"> <tr><td>more cities</td><td>Chennai</td></tr> <tr><td>more cities</td><td>Calcutta</td></tr></table></td></tr> </table>