HTML Tables

HTML Tables

HTML tables allow web developers to arrange data into rows and columns.

Example

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy

Define an HTML Table

A table in HTML consists of table cells inside rows and columns.

A simple HTML table looks like this:

<table>   <tr>     <th>Company</th>     <th>Contact</th>     <th>Country</th>   </tr>   <tr>     <td>Alfreds Futterkiste</td>     <td>Maria Anders</td>     <td>Germany</td>   </tr>   <tr>     <td>Centro comercial Moctezuma</td>     <td>Francisco Chang</td>     <td>Mexico</td>   </tr> </table>

Table Cells

Each table cell is defined by a <td> and a </td> tag.

The td element stands for table data.

Everything between <td> and </td> is the content of a table cell.

<table>   <tr>     <td>Emil</td>     <td>Tobias</td>     <td>Linus</td>   </tr> </table>

Note: A table cell can contain text, images, lists, links, or even another table.

Table Rows

Each table row starts with a <tr> tag and ends with a </tr> tag.

The tr element stands for table row.

<table>   <tr>     <td>Emil</td>     <td>Tobias</td>     <td>Linus</td>   </tr>   <tr>     <td>16</td>     <td>14</td>     <td>10</td>   </tr> </table>

You can have as many rows as you like in a table, as long as each row contains the same number of cells.

Note: In some cases, rows can have different numbers of cells. This will be covered later.

Table Headers

Header cells are defined with the <th> tag instead of <td>.

The th element stands for table header.

<table>   <tr>     <th>Person 1</th>     <th>Person 2</th>     <th>Person 3</th>   </tr>   <tr>     <td>Emil</td>     <td>Tobias</td>     <td>Linus</td>   </tr>   <tr>     <td>16</td>     <td>14</td>     <td>10</td>   </tr> </table>

By default, text inside <th> elements is bold and centered. This can be changed using CSS.

Exercise

What is the correct tag name for a table cell in HTML?

<tc> <td> <tr>

HTML Table Tags

Tag	Description
<table>	Defines a table
<th>	Defines a header cell in a table
<tr>	Defines a row in a table
<td>	Defines a cell in a table
<caption>	Defines a table caption
<colgroup>	Specifies a group of columns for formatting
<col>	Specifies column properties
<thead>	Groups the header content
<tbody>	Groups the body content
<tfoot>	Groups the footer content

HTML Table Borders

HTML tables can have borders with different styles, colors, and shapes.

How to Add a Border

To add a border to a table, use the CSS border property on the table, th, and td elements.

table, th, td {   border: 1px solid black; }

Collapsed Table Borders

By default, table borders are separated, which can result in double borders.

To collapse borders into a single border, use the border-collapse property.

table, th, td {   border: 1px solid black;   border-collapse: collapse; }

Styled Table Borders

You can create the effect of invisible borders by setting a background color for table cells and using a border color that matches the page background.

table, th, td {   border: 1px solid white;   border-collapse: collapse; }  th, td {   background-color: #96D4D4; }

Rounded Table Borders

The border-radius property adds rounded corners to table borders.

table, th, td {   border: 1px solid black;   border-radius: 10px; }

If you want rounded borders only on table cells, remove table from the selector.

th, td {   border: 1px solid black;   border-radius: 10px; }

Dotted Table Borders

The border-style property controls the appearance of the border.

The following values are commonly used.

• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset
• none
• hidden

th, td {   border-style: dotted; }

Border Color

You can change the border color using the border-color property.

th, td {   border-color: #96D4D4; }

HTML Table Sizes

HTML tables can have different sizes for the entire table, individual columns, or specific rows.

You can control table sizes by using the style attribute with the width and height CSS properties.

HTML Table Width

To set the width of a table, add the style attribute to the <table> element.

The following example sets the table width to 100%.

<table style="width:100%">   <tr>     <th>Firstname</th>     <th>Lastname</th>     <th>Age</th>   </tr>   <tr>     <td>Jill</td>     <td>Smith</td>     <td>50</td>   </tr>   <tr>     <td>Eve</td>     <td>Jackson</td>     <td>94</td>   </tr> </table>

Note: When using percentage values, the table width is calculated relative to its parent element, usually the <body>.

HTML Table Column Width

To set the width of a specific column, apply the style attribute to a <th> or <td> element.

The following example sets the width of the first column to 70%.

<table style="width:100%">   <tr>     <th style="width:70%">Firstname</th>     <th>Lastname</th>     <th>Age</th>   </tr>   <tr>     <td>Jill</td>     <td>Smith</td>     <td>50</td>   </tr>   <tr>     <td>Eve</td>     <td>Jackson</td>     <td>94</td>   </tr> </table>

HTML Table Row Height

To set the height of a specific row, apply the style attribute to a <tr> element.

The following example sets the height of the second row to 200 pixels.

<table style="width:100%">   <tr>     <th>Firstname</th>     <th>Lastname</th>     <th>Age</th>   </tr>   <tr style="height:200px">     <td>Jill</td>     <td>Smith</td>     <td>50</td>   </tr>   <tr>     <td>Eve</td>     <td>Jackson</td>     <td>94</td>   </tr> </table>

HTML Table Headers

HTML tables can have headers for each column or row, or for multiple columns and rows.

Table Headers

Table headers are defined using the <th> element. Each <th> represents a header cell.

<table>   <tr>     <th>Firstname</th>     <th>Lastname</th>     <th>Age</th>   </tr>   <tr>     <td>Jill</td>     <td>Smith</td>     <td>50</td>   </tr>   <tr>     <td>Eve</td>     <td>Jackson</td>     <td>94</td>   </tr> </table>

Vertical Table Headers

To use the first column as table headers, define the first cell in each row as a <th> element.

<table>   <tr>     <th>Firstname</th>     <td>Jill</td>     <td>Eve</td>   </tr>   <tr>     <th>Lastname</th>     <td>Smith</td>     <td>Jackson</td>   </tr>   <tr>     <th>Age</th>     <td>94</td>     <td>50</td>   </tr> </table>

Align Table Headers

By default, table headers are bold and centered.

To left-align table headers, use the CSS text-align property.

th {   text-align: left; }

Header for Multiple Columns

A table header can span across two or more columns by using the colspan attribute.

<table>   <tr>     <th colspan="2">Name</th>     <th>Age</th>   </tr>   <tr>     <td>Jill</td>     <td>Smith</td>     <td>50</td>   </tr>   <tr>     <td>Eve</td>     <td>Jackson</td>     <td>94</td>   </tr> </table>

You will learn more about colspan and rowspan in a later chapter.

Table Caption

You can add a caption that serves as a heading for the entire table by using the <caption> element.

<table style="width:100%">   <caption>Monthly savings</caption>   <tr>     <th>Month</th>     <th>Savings</th>   </tr>   <tr>     <td>January</td>     <td>$100</td>   </tr>   <tr>     <td>February</td>     <td>$50</td>   </tr> </table>

HTML Table Padding & Spacing

HTML tables can control the padding inside table cells and the space between cells.

HTML Table – Cell Padding

Cell padding is the space between the cell border and the cell content.

By default, table cell padding is set to 0.

To add padding to table cells, use the CSS padding property.

th, td {   padding: 15px; }

You can also control padding on individual sides of a cell.

th, td {   padding-top: 10px;   padding-bottom: 20px;   padding-left: 30px;   padding-right: 40px; }

HTML Table – Cell Spacing

Cell spacing is the space between table cells.

By default, the space between cells is 2 pixels.

To change the spacing between table cells, use the CSS border-spacing property on the <table> element.

table {   border-spacing: 30px; }

HTML Table Colspan & Rowspan

HTML tables can contain cells that span across multiple columns or rows.

HTML Table – Colspan

The colspan attribute allows a table cell to span across multiple columns.

The value of the colspan attribute defines how many columns the cell should cover.

<table>   <tr>     <th colspan="2">Name</th>     <th>Age</th>   </tr>   <tr>     <td>Jill</td>     <td>Smith</td>     <td>43</td>   </tr>   <tr>     <td>Eve</td>     <td>Jackson</td>     <td>57</td>   </tr> </table>

HTML Table – Rowspan

The rowspan attribute allows a table cell to span across multiple rows.

The value of the rowspan attribute defines how many rows the cell should cover.

<table>   <tr>     <th>Name</th>     <td>Jill</td>   </tr>   <tr>     <th rowspan="2">Phone</th>     <td>555-1234</td>   </tr>   <tr>     <td>555-8745</td>   </tr> </table>

HTML Table Styling

CSS can be used to improve the appearance and readability of HTML tables.

HTML Table – Zebra Stripes

By applying a background color to every other table row, you can create a zebra stripe effect.

To style every other row, use the :nth-child(even) selector.

tr:nth-child(even) {   background-color: #D6EEEE; }

Note: Using odd instead of even will apply the style to rows 1, 3, 5, and so on.

HTML Table – Vertical Zebra Stripes

Vertical zebra stripes can be applied by styling every other column.

To do this, use the :nth-child(even) selector on td and th elements.

td:nth-child(even), th:nth-child(even) {   background-color: #D6EEEE; }

Note: Apply the selector to both th and td to style header and data cells.

Combine Vertical and Horizontal Zebra Stripes

You can combine horizontal and vertical zebra stripes for a grid-style effect.

Using a semi-transparent color allows overlapping stripes to blend visually.

tr:nth-child(even) {   background-color: rgba(150, 212, 212, 0.4); }  th:nth-child(even), td:nth-child(even) {   background-color: rgba(150, 212, 212, 0.4); }

Horizontal Dividers

You can create tables with horizontal dividers by adding a border only to the bottom of each table row.

tr {   border-bottom: 1px solid #ddd; }

Hoverable Table

Use the :hover selector to highlight table rows when the mouse pointer moves over them.

tr:hover {   background-color: #D6EEEE; }

HTML Table Colgroup

The <colgroup> element is used to apply styles to specific columns of a table.

HTML Table Colgroup

To style one or more columns, use the <colgroup> element together with one or more <col> elements.

The <colgroup> element acts as a container for column definitions.

Each column or group of columns is defined with a <col> element.

• The span attribute defines how many columns are affected
• The style attribute defines the style applied to those columns

<table>   <colgroup>     <col span="2" style="background-color: #D6EEEE">   </colgroup>   <tr>     <th>MON</th>     <th>TUE</th>     <th>WED</th>     <th>THU</th>     <th>FRI</th>     <th>SAT</th>     <th>SUN</th>   </tr> </table>

Note: The <colgroup> element must be placed inside the <table> element and before any <thead>, <tbody>, <tr>, or <td> elements. If a <caption> is present, it must come before <colgroup>.

Legal CSS Properties

Only a limited set of CSS properties can be used with <colgroup> and <col>.

• width
• visibility
• background properties
• border properties

All other CSS properties will have no effect on table columns.

Multiple col Elements

To style different column groups with different styles, use multiple <col> elements.

<table>   <colgroup>     <col span="2" style="background-color: #D6EEEE">     <col span="3" style="background-color: pink">   </colgroup>   <tr>     <th>MON</th>     <th>TUE</th>     <th>WED</th>     <th>THU</th>     <th>FRI</th>     <th>SAT</th>     <th>SUN</th>   </tr> </table>

Empty Colgroups

If you want to style columns in the middle of a table, insert empty <col> elements for the columns that should not be styled.

<table>   <colgroup>     <col span="3">     <col span="2" style="background-color: pink">   </colgroup>   <tr>     <th>MON</th>     <th>TUE</th>     <th>WED</th>     <th>THU</th>     <th>FRI</th>     <th>SAT</th>     <th>SUN</th>   </tr> </table>

Hide Columns

You can hide table columns using the visibility: collapse property.

<table>   <colgroup>     <col span="2">     <col span="3" style="visibility: collapse">   </colgroup>   <tr>     <th>MON</th>     <th>TUE</th>     <th>WED</th>     <th>THU</th>     <th>FRI</th>     <th>SAT</th>     <th>SUN</th>   </tr> </table>