HTML Table Designing and Best Practices with Examples

In this post I will cover all HTML table tags and CSS table properties. I will also go through table designing concepts and creating responsive tables.

What is HTML Tables?

HTML tables let us display information in a table like structure(i.e, in form of columns and rows). HTML tables can be used to display pricing, comparisons, DBMS tables and much more.

<table> tag

<table> tag is used to define a table. <table> tag has display CSS property set to “table” which is similar to “inline-block”.
JS Bin

<tr> and <td> tags

tr is used to define table rows whereas td is used to define table cells(cells contain information). The number of columns in a table is auto calculated based on the maximum number cells in a row.

Width of the columns are calculated based on the width occupied by the content of table cells.

JS Bin

Table cells have their display CSS property set to “table-cell”. You can apply width or height CSS property to them only if they are wrapped with <table> tag. Here it is therefore you can apply height and width using CSS height and width property.

<th> tag

All table cells don’t display information, some are used as a header for group of cells. Cells representing header should be created using th tag. Grouping is done to represent similarly structured information.

In the above example the first row represented the header therefore we need to replace the first row cells with th tag.
JS Bin

Now I would also like to make the first cell of all other rows as the header(here grouping the right side cells).

JS Bin

Now you can see that the text inside header cells are bold and also center aligned.

So we saw how a th tag can be header cells to a group of row and/or column cells. The make this information specific we can use the scope attribute of the th tag. scope attribute can have the values “col” or “row”. “col” represents the header cell is a header to a column of cells whereas “row” represents the header cell is a header to a row of cells.

JS Bin

<thead>

When a complete row(tr tag) is filled with th tags then its recommended to wrap the row with thead tag. This represents that a complete row is a table header.

JS Bin

Important: Row that is wrapped using this tag is always placed first in the table, doesn’t follow the declarative order.

<tfoot>

Some tables use their last row to represent the summation of the table information. For example: a table representing a purchased items and their price can have a last row representing to money spent. A table may or may not have a footer. Some tables also use their last row to represent table info data sources, copyright info or some other information also.

In any of the above cases or similar cases its recommended to wrap the last row with tfoot tag.
JS Bin
Important: Row that is wrapped using this tag is always placed last in the table, doesn’t follow the declarative order.

Here the footer has only one column. As the table has 4 columns, the footer cells got the first column. We might want the footer cell to occupy all the space that would be occupied by 4 cells, we can achieve this using the colspan attribute of the td tag. It takes a number representing the width of the cell in terms of number of cells.

JS Bin

<tbody>

All other rows rather than body and footer that represent information is recommend to be put inside tbody tag.

JS Bin

Browsers can use thead, tbody and tfoot elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.

<caption> tag

caption tag is used to define a cation for a table. Caption is very small description(2-4 words) about the table.

Its placed immediately after the table tag.

JS Bin

Responsive Table

Responsive websites needs responsive tables. Responsive tables hide their columns when width decreases. Specific columns can be unhidden/hidden using JavaScript on user choice.

My favorite responsive table framework is gergeo responsive table.