HTML tables are utilized for structuring and displaying data on the web. Although CSS alternatives (like grids or flexbox) are often favored for their modernity, HTML tables are still the best choice for arranging data in a tabular layout.
They enable data presentation in a structured format by organizing them into rows and columns. This method simplifies the display of intricate data and aids the user in comprehending the information more thoroughly. They’re commonly employed for comparison tables, financial statements, or to present information in an orderly manner.
What is the structure of an HTML table?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
1. <table >: The primary container
This tag serves as the main holding element for any HTML table. It encompasses all the table’s components, such as rows, columns, and cells. By default, a table does not possess a visible border, although one can be added through the border attribute.
2. <thead >, <tbody > and <tfoot >: Organizing the table
- <thead>: Contains the headers for the columns. Utilizing this tag groups together elements that act as the table’s header. Within <thead>, <th> tags (for table headers) are typically used.
- <tbody>: Forms the main body of the table, where the data is normally placed. Data rows are produced using the <tr> tag..
- <tfoot>: Applied to organize details that go at the bottom of the table, like summaries or totals.
Below is an example of a table:
<table border="1">
<thead>
<tr>
<th>Variable</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Age</td>
<td>Integer</td>
<td>Represents a person's age in years</td>
</tr>
<tr>
<td>Income</td>
<td>Float</td>
<td>Denotes the annual income in euros</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total number of variables</td>
<td>2</td>
</tr>
</tfoot>
</table>
In this example, <tr>, <th>, and <td> are used to respectively create rows, header cells (usually displayed in bold by default), and data cells.
This is what this basic table looks like:
| Variable | Type | Description |
|---|---|---|
| Age | Integer | Represents a person's age in years |
| Income | Float | Denotes the annual income in euros |
| Total number of variables | 2 | |
What about complex tables?
HTML tables can become quite complex when representing large datasets or when detailing relationships between various columns and rows. Here is an instance of a sophisticated table using both merged rows and columns:
<table id="maTable" border="1">
<thead>
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Professional Information</th>
<th rowspan="2">Salary (€)</th>
</tr>
<tr>
<th>Occupation</th>
<th>Level</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bob Sponge</td>
<td>Data Analyst</td>
<td>Junior</td>
<td>45 000</td>
</tr>
<tr>
<td>Alice Wonderland</td>
<td>Data Scientist</td>
<td>Senior</td>
<td>60 000</td>
</tr>
<tr>
<td>Bart Simpson</td>
<td>Data Engineer</td>
<td>Intermediate</td>
<td>55 000</td>
</tr>
<tr>
<td>Rick Sanchez</td>
<td>Big Data Architecte</td>
<td>Expert</td>
<td>75 000</td>
</tr>
<tr>
<td>Morty Smith</td>
<td>Machine Learning Engineer</td>
<td>Junior</td>
<td>70 000</td>
</tr>
</tbody>
</table>
- Column spanning with colspan: In the <thead> section, the cell “Professional Information” spans two columns (“Occupation” and “Level”). This is accomplished using the attribute colspan=“2”.
- Row spanning with rowspan: The “Name” cell extends over two header rows using rowspan=“2”, designating each person’s name as independent of the subcategories (occupation and level).
- Increased complexity: Such tables are advantageous for showcasing data with subcategories, such as expertise levels or additional entry details.
- Employing advanced techniques like colspan and rowspan enables the creation of tables that organize data clearly while delivering more intricate information in a user-friendly way.
The table’s appearance is as follows:
| Name | Professional Information | Salary (€) | |
|---|---|---|---|
| Occupation | Level | ||
| Bob Sponge | Data Analyst | Junior | 45,000 |
| Alice Wonderland | Data Scientist | Senior | 60,000 |
| Bart Simpson | Data Engineer | Intermediate | 55,000 |
| Rick Sanchez | Big Data Architect | Expert | 75,000 |
| Morty Smith | Machine Learning Engineer | Junior | 70,000 |
How can HTML tables be styled?
Although you can customize HTML tables using certain properties, CSS is generally the preferred method.
The following example illustrates a relatively simple table customization using CSS:
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
<table>
<thead>
<tr>
<th>Name</th>
<th>Occupation</th>
<th>Salary (€)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bob Sponge</td>
<td>Data Analyst</td>
<td>45 000</td>
</tr>
<tr>
<td>Alice Wonderland</td>
<td>Data Scientist</td>
<td>60 000</td>
</tr>
<tr>
<td>Bart Simpson</td>
<td>Data Engineer</td>
<td>55 000</td>
</tr>
<tr>
<td>Rick Sanchez</td>
<td>Big Data Architecte</td>
<td>75 000</td>
</tr>
<tr>
<td>Morty Smith</td>
<td>Machine Learning Engineer</td>
<td>70 000</td>
</tr>
</tbody>
</table>
The result appears less austere:
| Name | Occupation | Salary (€) |
|---|---|---|
| Bob Sponge | Data Analyst | 45,000 |
| Alice Wonderland | Data Scientist | 60,000 |
| Bart Simpson | Data Engineer | 55,000 |
| Rick Sanchez | Big Data Architect | 75,000 |
| Morty Smith | Machine Learning Engineer | 70,000 |
By thoughtfully combining CSS with tables, one can achieve highly appealing visual results, emphasize specific elements, and much more.
How to ensure accessibility and follow best practices with tables?
Tables can lead to accessibility issues if not well-structured. This can become particularly pertinent depending on the browsers, and especially concerning users who depend on screen readers. These are special tools that allow visually impaired users to navigate a website. These programs convert on-screen content into audio or braille.
Here are some best practices to ensure accessibility of your tables:
- Use descriptive headers: The <th> tags help screen readers identify column headers. Each header should accurately depict the column or row’s content so users can navigate the table with ease.
- Include Scope Attributes: Using scope=“col” or scope=“row” signifies the extent of a header column or row. This helps screen readers correlate each data cell with its header. Consider the following example:
<table border="1">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Occupation</th>
<th scope="col">Salary (€)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice Wonderland</td>
<td>Data Scientist</td>
<td>60 000</td>
</tr>
</tbody>
</table>
Incorporate a <caption>: This tag gives the table a descriptive title. It enables users, including those with screen readers, to swiftly comprehend the table’s purpose. For example:
<table border="1">
<caption>Employee Salaries in the Data Department</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Occupation</th>
<th scope="col">Salary (€)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice Wonderland</td>
<td>Data Scientist</td>
<td>60 000</td>
</tr>
</tbody>
</table>
- Prioritize CSS for customization: Maintain straightforward HTML and utilize CSS for customization, which enhances maintainability and fosters code accessibility. For instance, styling tables with CSS contributes to a more visually pleasing interface without complicating the HTML.
- Complex tables and linking header-cells: When dealing with intricate tables where data is structured across various levels, it is beneficial to link each data cell with its header using the headers and id attributes. This ensures greater navigation ease for those utilizing screen readers. Consider the following example:
<table border="1">
<thead>
<tr>
<th id="name">Name</th>
<th id="occupation">Occupation</th>
<th id="salary">Average Salary (€)</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="name">Alice Wonderland</td>
<td headers="occupation">Data Scientist</td>
<td headers="salary">45 000</td>
</tr>
</tbody>
</table>
How do tables integrate with dynamic data?
Incorporating dynamics into tables can be extremely beneficial. Through JavaScript, you can add or remove rows dynamically, leading to more interactive interfaces.
Here is a simple example of a script that adds a row to a table:
<button onclick="addRow()">Add a Row</button>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
<table id=“maTable” border=“1”>
<thead>
<tr>
<th>Name</th>
<th>Occupation</th>
<th>Salary (€)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice Wonderland</td>
<td>Data Scientist</td>
<td>60 000</td>
</tr>
</tbody>
</table>
<script>
function addRow() {
var table = document.getElementById(“maTable”).getElementsByTagName(‘tbody’)[0];
var newRow = table.insertRow();
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
var cell3 = newRow.insertCell(2);
cell1.innerHTML = “Firstname Lastname”;
cell2.innerHTML = “Data Engineer”;
cell3.innerHTML = “55 000”;
}
</script>
The button will allow you to add a new row, in this example, with default values.
| Name | Job | Salary (€) |
|---|---|---|
| Alice Wonderland | Data Scientist | 60,000 |
Conclusion
HTML tables are powerful for presenting data in a structured format, making information easier to read and understand. By knowing the basic elements like <table>, <thead>, <tbody>, <tr>, <th>, and <td>, as well as more advanced concepts like colspan and rowspan, you’ll be able to create sophisticated and accessible tables. Even more so by combining CSS for visual customization and JavaScript to make it interactive. With best practices, particularly those related to accessibility, your tables will be usable by a wide range of users and compatible across many browsers.
