An HTML table is defined by the table tag. HTML tables should be used for tabular data.
Each table row is defined by the tr tag.
The table header is defined using the th tag.
Cells are defined using the td tag. Table cells can contain any HTML elements such as headers, lists, text, images, form elements, and other tables.
For example lets create our first table:
<table> <tr> <th>header1</th> <th>header2</th> </tr> <tr> <td>cell1</td> <td>cell2</td> </tr> </table>
Result:
By default, the table and cells do not have visible borders. Borders are set using the border property:
table {
border: 1px solid grey;
}
th {
border: 1px solid grey;
}
td {
border: 1px solid grey;
}
The default width of a table is equal to the width of its inner content. You can change the width of the table using CSS property – width:
table {
width: 100%;
}
Gaps between table cells are removed using the table property:
table {
border-collapse: collapse;
}
Table header
To add a header for the table use caption tag. Added directly after the table tag, outside of a row or cell.
Example
<table> <caption>Table example</caption> <tr> <th>header1</th> <th>header2</th> </tr> <tr> <td>cell1</td> <td>cell2</td> </tr> </table>
id and headers attributes
The id and headers attributes specify associations between headers and cells. This way looks like this:
- You are setting a unique id for each th element.
- You set the headers attribute on each td element. Each headers attribute must contain a list of all id’s, separated by spaces, to all th elements that act as a header for that cell.
Example:
<thead>
<tr>
<th id="purchase">Purchase</th>
<th id="location">Location</th>
<th id="date">Date</th>
<th id="evaluation">Evaluation</th>
<th id="cost">Cost (€)</th>
</tr>
</thead>
<tbody>
<tr>
<td id="haircut">Haircut</th>
<td headers="location haircut">Hairdresser</td>
<td headers="date haircut">12/09</td>
<td headers="evaluation haircut">Great idea</td>
<td headers="cost haircut">30</td>
</tr>
scope attribute
Can be added to the <th> element it tells the screen reader which cells exactly are headers:
<thead>
<tr>
<th scope="col">Purchase</th>
<th scope="col">Location</th>
<th scope="col">Date</th>
<th scope="col">Evaluation</th>
<th scope="col">Cost (€)</th>
</tr>
</thead>
Grouping table rows and columns
The colgroup element creates a structural group of columns by highlighting logically homogeneous cells. Groups one or more columns for uniform formatting, allowing styles to be applied to columns instead of repeating styles for every cell and every row.
It is added directly after the table and/or caption tags.
The col element forms groups of columns that divide the table into sections that do not belong to the general structure, i.e. not containing information of the same type. Allows you to set column properties for each column within the colgroup element.
With the style attribute, you can change the background color or another properties of cells.
The col element has a span attribute that specifies the number of columns to merge.
On example:
<table>
<colgroup>
<col span="2" style="background:Khaki">
<col style="background-color:LightCyan">
</colgroup>
<tr>
<th>First column</th>
<th>Second column</th>
<th>Third cplumn</th>
</tr>
<tr>
<td>1</td>
<td>Text 1</td>
<td>Text 11</td>
</tr>
<tr>
<td>2</td>
<td>Text 2</td>
<td>Text 22</td>
</tr>
</table>
Result:
Grouping table sections
The thead element creates a group of headings for table rows to provide a uniform look. Used in conjunction with the tbody and tfoot elements to specify each part of the table.
The element must be used in the following order: as a child of the table element, after the caption and colgroup elements, and before the tbody , tfoot and tr elements. Can only be used once within the same table.
The tbody element groups the main content of the table. Used in conjunction with the thead and tfoot elements.
The tfoot element creates a group of rows for representing information about sums or totals, located at the bottom of the table. Used in the table once. Placed after the thead element, before the tbody and tr elements.
Example:
<table>
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th>Unit</th>
<th>Amount</th>
<th>Price for item</th>
<th>Sum</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5" style="text-align:right">Total:</td><td>1168,80</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1.</td><td>Item1</td><td>kg</td><td>15,20</td><td>69,00</td><td>1048,80</td>
</tr>
<tr>
<td>2.</td><td>Item2</td><td>kg</td><td>2,50</td><td>48,00</td><td>120,00</td>
</tr>
</tbody>
</table>
Result:
Merge table cells
The colspan and rowspan attributes join table cells. The colspan attribute specifies the number of cells merged horizontally, and the rowspan attribute specifies the number of cells merged vertically.
Example:
<table>
<tr>
<th>Number</th>
<th>Name</th>
<th>Unit</th>
<th>Quantity</th>
<th>Price for item</th>
<th>Sum</th>
</tr>
<tr>
<td>1.</td><td>Item</td><td>kg</td><td>15,20</td><td>69,00</td><td>1048,80</td>
</tr>
<tr>
<td>2.</td><td>Item2</td><td>kg</td><td>2,50</td><td>48,00</td><td>120,00</td>
</tr>
<tr>
<td colspan="5" style="text-align:right">Total:</td><td>1168,80</td>
</table>
table {
border: 1px solid grey;
}
th {
border: 1px solid grey;
}
td {
border: 1px solid grey;
}
Result:
