Posted onSep 25, 2023 • Edited onSep 26, 2023

HTML5 - Key Insights into Tables

In this article, we will learn abouttables in HTML.

Tables serve a crucial role in effectively presenting structuredtabular data, where information is logically organized into rows and columns. However, it's imperative to emphasize that tables should never be employed to dictate the layout or structure of a webpage. Modern web design relies on more versatile and responsive techniques, such asCSS grid,flexbox, and semantic HTML elements. These methods enable the creation of visually appealing and adaptable page layouts, ensuring a seamless user experience. Utilizing tables for layout purposes can introduce issues related to accessibility, responsiveness, and the maintainability of web designs. Therefore, while tables excel at organizing data, they are not suited for defining the broader structure of a web page.

Remember that a table is like this one:

Movie	IMDB Rating
Interstellar	8.4
The Prestige	8.5
The Butterfly Effect	7.6

Notice that we have atable header and three lines (rows), each row has two cells.

In HTML we have:

an element to table, calledtable;
an element to table header, the group of cells that form the head, calledthead;
an element to table header cell, calledth;
an element to table body, the group of rows and cells that form the body of the table, calledtbody;
an element to table footer, the group of cells that form the footer, calledtfoot. This element is absolutely optional.
an element to each row, calledtr;
an element to cell (table data), calledtd;

See the below code:

<table><tr><td>Movie</td><td>IMDB Rating</td></tr><tr><td>Interstellar</td><td>8.4</td></tr><tr><td>The Prestige</td><td>8.5</td></tr><tr><td>The Butterfly Effect</td><td>7.6</td></tr></table>

This code looks like this:

Table Header

The first line doesn't appear like a table head, do you agree?

To fix this, we need to usethead andth elements, like this new example:

<table><thead><th>Movie</th><th>IMDB Rating</th></thead><tbody><tr><td>Interstellar</td><td>8.4</td></tr><tr><td>The Prestige</td><td>8.5</td></tr><tr><td>The Butterfly Effect</td><td>7.6</td></tr></tbody></table>

Notice that we also add thetbody element. This code looks like this:

Table Border

Notice that there isn't a border; to add a border, we use an attribute calledborder or, if you desire to do the right thing, useCSS.

<tableborder="1"><thead><th>Movie</th><th>IMDB Rating</th></thead><tbody><tr><td>Interstellar</td><td>8.4</td></tr><tr><td>The Prestige</td><td>8.5</td></tr><tr><td>The Butterfly Effect</td><td>7.6</td></tr></tbody></table>

This code looks like this:

Styling Tables

Now we have borders, but the border looks bad. For a good look, we can usecellspacing andcellpadding attributes.Cellspacing controls the space between the cell and the rest of the table, andcellpadding controls the space between the cell data and cell border.

<tableborder="1"cellspacing="0"cellpadding="8"><thead><th>Movie</th><th>IMDB Rating</th></thead><tbody><tr><td>Interstellar</td><td>8.4</td></tr><tr><td>The Prestige</td><td>8.5</td></tr><tr><td>The Butterfly Effect</td><td>7.6</td></tr></tbody></table>

Now, the table looks like this, much better, do you know?:

Remember: styling is made with CSS.

Table Cell Merging

Sometimes, we need to merge cells in a table, like we do in Excel (or another Spreadsheet editor). So, if you need to merge cells, you can usecolspan orrowspan for this. See the below example. Notice that I addcolspan attribute inth element, but it's possible to addcolspan intd element, becausecolspan is added in cell element and merges cells horizontally, cell next to each other. So, the first and second header cell are combined as one unique cell.

<tableborder="1"cellspacing="0"cellpadding="8"><thead><thcolspan="2">Movie Info</th><th>IMDB Rating</th></thead><tbody><tr><td>Interstellar</td><td>Sci-fi</td><td>8.4</td></tr><tr><td>The Prestige</td><td>Drama</td><td>8.5</td></tr><tr><td>The Butterfly Effect</td><td>Sci-fi</td><td>7.6</td></tr></tbody></table>

This code looks like the below image.

As I mentioned, it's possible to merge cells one on top of the other withrowspan attribute.

Table Column and Row Head

Until here, we had only a header in the first row, but it's possible there is a header in the first column usingth cell. See the below example:

<tableborder="1"cellspacing="0"cellpadding="8"><thead><th>Movie</th><th>Genre</th><th>IMDB Rating</th></thead><tbody><tr><td>Interstellar</td><td>Sci-fi</td><td>8.4</td></tr><tr><td>The Prestige</td><td>Drama</td><td>8.5</td></tr><tr><td>The Butterfly Effect</td><td>Sci-fi</td><td>7.6</td></tr></tbody></table>

This example looks like this:

Other Table Considerations

There arecolgroup andcol elements, but I don't recommend using them because they are for styling, and as we know, styling is done withCSS. It's more common to style tables with CSS rather than usingcolgroup.

Tables with div and span

Yes, you read correct. It's possible create tables using divs or other block element, but the div will behave as a table for accessibility, but with less semantic. In this case, it's essential to organize the table layout with CSS.

For this, you should userole attribute andAria Role

See the below example:

<divrole="table"aria-label="Movie Information"><divrole="rowgroup"><divrole="row"><spanrole="columnheader"aria-colspan="2">Movie Info</div><spanrole="columnheader">IMDB Rating</div></div></div><divrole="rowgroup"><divrole="row"><spanrole="cell">Interstellar</span><spanrole="cell">Sci-fi</span><spanrole="cell">8.4</span></div><divrole="row"><spanrole="cell">The Prestige</span><spanrole="cell">Drama</span><spanrole="cell">8.5</span></div><divrole="row"><spanrole="cell">The Butterfly Effect</span><spanrole="cell">Sci-fi</span><spanrole="cell">7.6</span></div></div></div>

This code will be rendered like this:

Notice, that we usediv andspan withrole attribute and its values:

table: for the whole table;
rowgroup: for row group, header row group or data row group;
columnheader: for column header;
row: for rows;
cell: for cells;

In detail:

<div role="table" aria-label="Movie Information"> represents the entire table with an aria-label attribute for accessibility.
<div role="rowgroup"> groups the rows, similar to the thead and tbody elements.
<div role="row"> represents each row.
<div role="columnheader" aria-colspan="2"> represents the table header with aria-colspan indicating the colspan of 2.
<div role="cell"> represents the table data.

When use this form?

Both forms,table element orrole attribute, work almost equally, mainly we need to use CSS to improve layout and appearance of the table. Buttable element is more semantic, then you should prefer table. And, the better is creating a table with role attribute for more accessibility.