Tables in HTML are a great tool for displaying information that is tabular in nature. This includes things like sports scores, invoice data, stock prices, and so on. Many websites on the Internet continue to use HTML tables because they are very efficient at organizing data in a visually pleasing way. While tabular data can also be displayed nicely using div elements and creative CSS styling, good old HTML tables keep things simple and effective when you need to quickly present tabular data. In this tutorial, we’ll learn how to use the HTML <table> element to present information in a two-dimensional table to the users.
The <table> HTML tag
The first step in creating an HTML table is to create an opening and closing <table> declaration like so.
<table>
</table>The <table> element will contain new HTML tags to display data.
<tr> elements create table rows
Tables consist of rows of data. In order to create a row, you can use the <tr> element.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Tables</title>
</head>
<body>
<table>
<tr></tr>
<tr></tr>
</table>
</body>
</html>Adding Data With <td>
We do not place raw data directly in the row itself. To add data, it must be wrapped in <td> tags.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Tables</title>
</head>
<body>
<table>
<tr></tr>
<tr>
<td>Yummy</td>
<td>10</td>
</tr>
</table>
</body>
</html>
We can see the data, but it’s not easy to visualize which cells contain which data. Let’s add a border via <table border=”1″>. Note that this is a deprecated attribute, but it will likely continue to work for some time. It’s also great for learning and visualizing HTML table layouts.
Adding Table Headings With <th>
To add titles to rows and columns, you can use the table heading element: <th>. The table heading element is used just like a <td> element, except with a relevant title. Just like table data, a table heading must be placed within a table row.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="1">
<tr>
<th scope="col">Pepper To Plant</th>
<th scope="col">Quantity Needed</th>
</tr>
<tr>
<td>Yummy</td>
<td>10</td>
</tr>
</table>
</body>
</html>
The scope attribute can take one of two values:
- row – this value makes it clear that the heading is for a row.
- col – this value makes it clear that the heading is for a column.
colspan and rowspan
The colspan and rowspan attributes are available for use on both <th> and <td> elements. They provide the same type of function as merge cell in spreadsheet programs like Excel. The markup below shows a couple of examples.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="1">
<tr>
<th>Pepper To Plant</th>
<th>Quantity Needed</th>
</tr>
<tr>
<td rowspan="2">Yummy</td>
<td>10</td>
</tr>
<tr>
<td>Lemon Dream</td>
<td>5</td>
</tr>
<tr>
<td colspan="2">Red Bell</td>
<td>15</td>
</table>
</body>
</html>
<thead> and <tbody>
Just like an HTML document itself has a head area and a body area, so too can HTML tables have the same type of layout using <thead> and <tbody>. These tags are useful to make the HTML markup more semantic. Table headings should go in the <thead> area and the meat of the data to be displayed would be placed in the <tbody> area of the table.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Tables</title>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Pepper To Plant</th>
<th>Quantity Needed</th>
</tr>
</thead>
<tbody>
<tr>
<td>Yummy</td>
<td>10</td>
</tr>
<tr>
<td>Lemon Dream</td>
<td>5</td>
</tr>
<tr>
<td>Red Bell</td>
<td>15</td>
</tbody>
</table>
</body>
</html>Replace table border=1 with css
Since the border attribute of the <table> tag, let’s see how to get the same effect using CSS instead. The CSS for this simply trick is as shown.
table, th, td {
border: 1px solid black;
}Table Footer
The bottom part of a long table can also be sectioned off using the <tfoot> element. Footers are often used to contain sums, differences, and other data results.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Tables</title>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Pepper To Plant</th>
<th>Quantity Needed</th>
</tr>
</thead>
<tbody>
<tr>
<td>Yummy</td>
<td>10</td>
</tr>
<tr>
<td>Lemon Dream</td>
<td>5</td>
</tr>
<tr>
<td>Red Bell</td>
<td>15</td>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>30</td>
</tfoot>
</table>
</body>
</html>Simple Table Styling
CSS styling can go a long way with your HTML tables. This small amount of CSS will give us a neat-looking table.
table, td {
border: 2px solid green;
font-family: Arial, sans-serif;
text-align: center;
}
th {
background-color: green;
color: white;
}
What Are HTML Tables Summary
- A table’s body is created with the <tbody> element.
- Tables can be split into three main sections: a head, a body, and a footer.
- A table’s head is created with the <thead> element.
- A table’s footer is created with the <tfoot> element.
- The <tr> element adds rows to a table.
- All the CSS properties you learned about in this course can be applied to tables and their data.
- The <table> element creates a table.
- Table headings clarify the meaning of data. Headings are added with the <th> element.
- To add data to a row, you can use the <td> element.
- Table data can span rows using the rowspan attribute.
- Table data can span columns using the colspan attribute.
