HTML Tables
In the last chapter, we learned how to create links, images, and leared how to link to several pages. In this chapter, I’ll be going over how to create HTML tables.
Tables are great for displaying tabular data (these include text, images, links, etc.), meaning they are useful to show information in different rows and columns, similar to an Excel spreadsheet.
NOTE: Back before CSS was around, tables were used to create a layout of a webpage as a workaround. Nowadays, tables are used for their intended purposes.
Let’s first start by creating a brand new HTML file and call it tables.html. Save it in the same directory as all your other pages.
<!DOCTYPE html>
<html>
<head>
<title>Tables</title>
</head>
<body>
</body>
</html>
Table Structure
Tables are created using the <table> tag. Pretty self-explanatory right?
Tables contain table rows which are created using the <tr> element, and inside those table rows, they contain table data which is created using the <td> element.
Here’s an example of a basic table with 2 rows and 2 columns of data:
<!DOCTYPE html>
<html>
<head>
<title>Tables</title>
</head>
<body>
<table border="1">
<tr>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
</tr>
<tr>
<td>Row 2 Column 1</td>
<td>Row 2 Column 2</td>
</tr>
</table>
</body>
</html>
First thing you’ll notice is that the <table> tag has a border=”1″ attribute value. It is used to put a border around all table cells. If you didn’t want a border around your table cells, you can use border=”0″. For now, let’s keep it at border=”1″ so we can visualize the borders.
The next thing you’ll notice is the <tr> tag. The <tr> tag is used to denote a new table row. Table rows don’t contain any content or attributes, however, they do contain table data using the <td> tag.
I’ve added two table datas (<td>‘s) each with their own content inside of each table rows (<tr>‘s).
In the Codepen preview, you’ll notice that the table data cells in each row are lined up side-by-side as a column.
Let’s go ahead and update the table data with actual real content. We’ll be inserting another column by adding more table data to each row and also add a third row with it’s own table data.
<!DOCTYPE html>
<html>
<head>
<title>Tables</title>
</head>
<body>
<table border="1">
<tr>
<td>Coca Cola</td>
<td>Cappuccino</td>
<td>Green Tea</td>
</tr>
<tr>
<td>Dr. Pepper</td>
<td>Latte</td>
<td>Black Tea</td>
</tr>
<tr>
<td>Sprite</td>
<td>Espresso</td>
<td>Oolong Tea</td>
</tr>
</table>
</body>
</html>
Notice that each table cell for each column is occupying and taking up the width of the largest word. Table cells automatically resize to fit the width of the largest cell in each column, in order to keep them all the same width.
Cellpadding and Cellspacing
Let’s add a little bit of padding for each cell and also add some spacing on our table element. We can achieve that by adding cellpadding and cellspacing attributes to the <table> tag like so:
<!DOCTYPE html>
<html>
<head>
<title>Tables</title>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="5">
<tr>
<td>Coca Cola</td>
<td>Cappuccino</td>
<td>Green Tea</td>
</tr>
<tr>
<td>Dr. Pepper</td>
<td>Latte</td>
<td>Black Tea</td>
</tr>
<tr>
<td>Sprite</td>
<td>Espresso</td>
<td>Oolong Tea</td>
</tr>
</table>
</body>
</html>
Notice that there is now 10 pixels of padding on the inside of each table cell, and 5 pixels of spacing in between each cell.
Table Heading
Table data won’t be as useful without adding context for those data columns. To do that, we can add table headings.
Table headings area created using the <th> tag within a table row. It has the same exact similarities as normal <td>‘s but are usually displayed at the top of the table, however, they can be placed anywhere a normal <td> can be placed. Here’s an example:
<!DOCTYPE html>
<html>
<head>
<title>Tables</title>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="5">
<tr>
<th>Soft Drinks</th>
<th>Coffees</th>
<th>Teas</th>
</tr>
<tr>
<td>Coca Cola</td>
<td>Cappuccino</td>
<td>Green Tea</td>
</tr>
<tr>
<td>Dr. Pepper</td>
<td>Latte</td>
<td>Black Tea</td>
</tr>
<tr>
<td>Sprite</td>
<td>Espresso</td>
<td>Oolong Tea</td>
</tr>
</table>
</body>
</html>
Notice that the table headings are naturally bolded and center-aligned by default to signify their heading qualities as well.
Colspan and Rowspan Attributes
Currently, we have our table diplaying the 3 items for each row. What if we wanted to combine 2 or more columns together? Or how about 2 or more rows together?
We can do that with the colspan or rowspan attributes. These attributes can be added to our <td> tags.
NOTE: One thing to note regarding table columns is that you need to occupy the same number of columns for each row, else your table will break. By adding the colspan attribute, we can exapand a cell to occupy the number of cells needed to match the number of columns.
<!DOCTYPE html>
<html>
<head>
<title>Tables</title>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="5">
<tr>
<th>Soft Drinks</th>
<th>Coffees</th>
<th>Teas</th>
</tr>
<tr>
<td>Coca Cola</td>
<td>Cappuccino</td>
<td>Green Tea</td>
</tr>
<tr>
<td>Dr. Pepper</td>
<td>Latte</td>
<td>Black Tea</td>
</tr>
<tr>
<td>Sprite</td>
<td>Espresso</td>
<td>Oolong Tea</td>
</tr>
<tr>
<td rowspan="2">Root Beer</td>
<td colspan="2">Coffee Milk Tea</td>
</tr>
<tr>
<td>Americano</td>
<td>Ginger Tea</td>
</tr>
</table>
</body>
</html>
Notice on line 29, we have the attribute rowspan with a value of 2 for that <td> tag. In the example, you’ll see that it merged the equivalent of 2 table rows together into one single table cell.
Also, you’ll see that on line 30, the next <td> tag has the attribute colspan with a value of 2. This spans 2 column cells and merges them together. The following table row on lines 32-25, fills up the remaing two table cells.
Table head, body, and footer
A table can be divided into three separate sections: the head, body, and foot. The head of a table can be created using the <thead> element, and is placed after the <table> tag.
As you can guess, the <tbody> element is used for the main body of a table, which includes all the table data that we have written before. This element should go after the <thead> element.
The table foot is created using the (you guessed it) <tfoot> element. While you might think that this goes after the <tbody> element, this is actually placed right after the <thead> element instead.
NOTE: In HTML4, the <tfoot> element cannot be placed after any <tbody> elements, however, in HTML5 it is permissible. But for graceful degradation purposes, we’ll place it before the <tbody>.
Let’s go ahead and update our previous table to include the table head, body, and footer:
<!DOCTYPE html>
<html>
<head>
<title>Tables</title>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="5">
<thead>
<tr>
<th>Soft Drinks</th>
<th>Coffees</th>
<th>Teas</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3"><strong>Warning:</strong> Some of these beverages can become addicting. Drink at your own risk.</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Coca Cola</td>
<td>Cappuccino</td>
<td>Green Tea</td>
</tr>
<tr>
<td>Dr. Pepper</td>
<td>Latte</td>
<td>Black Tea</td>
</tr>
<tr>
<td>Sprite</td>
<td>Espresso</td>
<td>Oolong Tea</td>
</tr>
<tr>
<td rowspan="2">Root Beer</td>
<td colspan="2">Coffee Milk Tea</td>
</tr>
<tr>
<td>Americano</td>
<td>Ginger Tea</td>
</tr>
</tbody>
</table>
</body>
</html>
You’ll notice that even though we place the <tfoot> element before the <tbody> element, in the preview however, it was still placed at the bottom of the table.
Tables inside tables
There may be a time when you need to include another table inside of a table (Emails are built using tables inside of tables).
Like I mentioned earlier, we can include almost anything inside of table cells (<td>‘s) including other tables. Here’s an example:
<!DOCTYPE html>
<html>
<head>
<title>Tables</title>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="5">
<thead>
<tr>
<th>Soft Drinks</th>
<th>Coffees</th>
<th>Teas</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3"><strong>Warning:</strong> Some of these beverages can become addicting. Drink at your own risk.</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Coca Cola</td>
<td>Cappuccino</td>
<td>Green Tea</td>
</tr>
<tr>
<td>Dr. Pepper</td>
<td>Latte</td>
<td>Black Tea</td>
</tr>
<tr>
<td>Sprite</td>
<td>Espresso</td>
<td>Oolong Tea</td>
</tr>
<tr>
<td rowspan="2">Root Beer</td>
<td colspan="2">Coffee Milk Tea</td>
</tr>
<tr>
<td>Americano</td>
<td>Ginger Tea</td>
</tr>
<tr>
<td colspan="3">
<table width="100%" border="1">
<thead>
<tr>
<th>Beer</th>
<th>Liquor</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3"><strong>Warning:</strong> DO NOT drink and drive!</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Hefeweizen</td>
<td>Cognac</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
You’ll notice that we included the new table inside of a <td> element. We also added a new “width” attribute to the new table and exanded the table to take up 100% of the width of that parent <td> element.
Also, with each new table, they don’t need to match up the same number of columns are the parent table. You’ll notice that we only have 2 columns in the new table, yet they take up the same width of the entire 3-column layout of the parent table. This is because we expanded the <td> element on line 45 to expand the whole 3 columns using the colspan attribute.
Conclusion
It might be a little confusing at first, trying to wrap your head around table cells, but once you understand how tables work and how each table cell fits in place, it gets a lot easier to visualize in your head.
Exercises you can do on your own
- Create a new table, with 4 columns with table headings(Fill it up with your favorite sports, hobbies, books, and food), and at least 5 rows of data for each column.
- Edit that new table and see if you can combine some of those columns and rows. Maybe your favorite sport is also your hobby? If it is, merge those two columns