HTML Tables
HTML tables allow web developers to arrange data into rows and columns.
Define an HTML Table
A table in HTML consists of table cells inside rows and columns.
Table Cells
Each table cell is defined by a <td> and a </td> tag.
td stands for table data.
Everything between <td> and </td> are the content of the table cell.
Table Rows
Each table row starts with a <tr> and ends with a </tr> tag.
tr stands for table row.
Table Headers
Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of the <td> tag:
th stands for table header.
HTML Table Borders
HTML tables can have borders of different styles and shapes.
How To Add a Border
When you add a border to a table, you also add borders around each table cell:
To add a border, use the CSS border property on table, th, and td elements:
Collapsed Table Borders
To avoid having double borders like in the example above, set the CSS border-collapse property to collapse.
This will make the borders collapse into a single border:
Style Table Borders
If you set a background color of each cell, and give the border a white color (the same as the document background), you get the impression of an invisible border:
Round Table Borders
With the border-radius property, the borders get rounded corners:
Skip the border around the table by leaving out table from the css selector:
Dotted Table Borders
With the border-style property, you can set the appearance of the border.
The following values are allowed:
dotteddashedsoliddoublegrooveridgeinsetoutsetnonehidden
Border Color
With the border-color property, you can set the color of the border.
HTML Table Sizes
HTML tables can have different sizes for each column, row or the entire table.
Use the style attribute with the width or height properties to specify the size of a table, row or column.
HTML Table Width
To set the width of a table, add the style attribute to the <table> element:
HTML Table Column Width
To set the size of a specific column, add the style attribute on a <th> or <td> element:
HTML Table Row Height
To set the height of a specific row, add the style attribute on a table row element:
HTML Table Headers
HTML tables can have headers for each column or row, or for many columns/rows.
HTML Table Headers
Table headers are defined with th elements. Each th element represents a table cell.
Vertical Table Headers
To use the first column as table headers, define the first cell in each row as a <th> element:
Align Table Headers
By default, table headers are bold and centered:
To left-align the table headers, use the CSS text-align property:
Header for Multiple Columns
You can have a header that spans over two or more columns.
To do this, use the colspan attribute on the <th> element:
Table Caption
You can add a caption that serves as a heading for the entire table.
To add a caption to a table, use the <caption> tag:
HTML Table Padding & Spacing
HTML tables can adjust the padding inside the cells, and also the space between the cells.
HTML Table - Cell Padding
Cell padding is the space between the cell edges and the cell content.
By default the padding is set to 0.
To add padding on table cells, use the CSS padding property:
To add padding only above the content, use the padding-top property.
And the others sides with the padding-bottom, padding-left, and padding-right properties:
HTML Table - Cell Spacing
Cell spacing is the space between each cell.
By default the space is set to 2 pixels.
To change the space between table cells, use the CSS border-spacing property on the table element:
HTML Table Colspan & Rowspan
HTML tables can have cells that span over multiple rows and/or columns.
HTML Table - Colspan
To make a cell span over multiple columns, use the colspan attribute:
HTML Table - Rowspan
To make a cell span over multiple rows, use the rowspan attribute:
HTML Table Styling
Use CSS to make your tables look better.
HTML Table - Zebra Stripes
If you add a background color on every other table row, you will get a nice zebra stripes effect.
To style every other table row element, use the :nth-child(even) selector like this:
HTML Table - Vertical Zebra Stripes
To make vertical zebra stripes, style every other column, instead of every other row.
Set the :nth-child(even) for table data elements like this:
Combine Vertical and Horizontal Zebra Stripes
You can combine the styling from the two examples above and you will have stripes on every other row and every other column.
If you use a transparent color you will get an overlapping effect.
Use an rgba() color to specify the transparency of the color:
Horizontal Dividers
If you specify borders only at the bottom of each table row, you will have a table with horizontal dividers.
Add the border-bottom property to all tr elements to get horizontal dividers:
Hoverable Table
Use the :hover selector on tr to highlight table rows on mouse over:
Last updated
