Use Sophia to knock out your gen-ed requirements quickly and affordably. Learn more
×

HTML Tables

Author: Sophia

what's covered
In this lesson, you will learn how to construct an HTML table for holding and displaying tabular data and other structure information. You will learn about the code structure for creating a table’s rows and cells, as well as how to create header cells in the table. You will also learn how to merge multiple cells using the optional span attributes.

Specifically, this lesson will cover the following:

Table of Contents

1. Tables

As mentioned earlier, tables are one tool for structuring content and are effective at displaying tabular data. A table begins with the <table> element as the parent container for the entire table. The next element within the table is the <tr> table row element. Each set of <tr> tags represents one row in the table. Next, within each row are the <th> or <td> elements, which effectively represent one cell in a row. <th> is used to create table header cells, wherein the text content within the cell will be bold and centered. <td> is used to create table data cells within a row; there is no special formatting applied to <td> cell content by default.

As you may have noticed, there are no “column” tags. This is because columns within an HTML table are implied by matching up the number of cells within each row. If you need a table that is three cells high by three cells wide, you would have three sets of <td> tags, and within each <td> element, you will need three sets of <td> tags for a total of nine.

EXAMPLE


<table>
      <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
      </tr>
      <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
      </tr>
      <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
      </tr>
</table>

This will render as follows:

Tables can also be structured with three additional semantic tags designed specifically for HTML tables. These are <thead>, <tbody>, and <tfoot>. While these additional table semantic tags do not apply any special formatting to the contents, they do provide more meaning to screen reader technology, as well as allow the ability to scroll the table of data independently of the <thead> and <tfoot> sections. To use these semantic tags, you will encapsulate the rows intended for the tags with the semantic tag.

EXAMPLE


<table>
      <thead>
            <tr>
                  <th>1</th>
                  <th>2</th>
                  <th>3</th>
            </tr>
      </thead>
      <tbody>
            <tr>
                  <td>4</td>
                  <td>5</td>
                  <td>6</td>
            </tr>
      </tbody>
      <tfoot>	
            <tr>
                  <td>7</td>
                  <td>8</td>
                  <td>9</td>
            </tr>
      </tfoot>
</table>

This will render as follows:

As you can see, the thead, tbody, and tfoot do not have any visual effect on the table, but they instead provide programmatic meaning for assistive technology utilized by impaired individuals.

EXAMPLE


<table>
      <thead>
            <tr>
                  <th>1</th>
                  <td>2</td>
                  <td>3</td>
            </tr>
      </thead>
      <tbody>
            <tr>
                  <th>4</th>
                  <td>5</td>
                  <td>6</td>
            </tr>
      </tbody>
      <tfoot>	
            <tr>
                  <th>7</th>
                  <td>8</td>
                  <td>9</td>
            </tr>
      </tfoot>
</table>

This will render as follows:

terms to know

Table Row Tag <tr>
An HTML tag used to define an individual row of an HTML table.

Table Header Tag <th>
An HTML tag used to define an individual header cell, with its content formatted as bold and center aligned.

Table Data Tag <td>
An HTML tag used to define an individual cell within a row of an HTML table.

Table Head Tag <thead>
An HTML semantic tag used to surround and identify certain rows in the table as the table’s header.

Table Body Tag <tbody>
An HTML semantic tag used to surround and identify certain rows in the table as the table’s body.

Table Foot Tag <tfoot>
An HTML semantic tag used to surround and identify certain rows in the table as the table’s footer.


2. Merging Cells

Table cells can also be merged with others, which is referred to as column or row spanning. This is done by adding either the “rowspan” or “colspan” attributes to the opening cell tag (<td> or <th>) and setting it equal to the number of rows or columns you want the cell to span across, including its original row or column.

EXAMPLE

Note that the numbers show the original cell that was spanned.


<table>
      <tr>
            <th colspan="3">1</th>
      </tr>
      <tr>
            <td rowspan="2">4</td>
            <td>5</td>
            <td>6</td>
      </tr>
      <tr>
            <td>8</td>
            <td>9</td>
      </tr>
</table>

This will render as follows:

Remember that you can only use colspan to span a cell to the right x number of columns and rowspan to span a cell down x number of rows. When you want to span cells, make sure you start with the cell that is either in the highest row or the left-most column of the rows or columns you want to span across.

Now that you have seen how to create HTML tables, it’s time to practice! We will create a three-column, five-row table to hold the hours of operations. The first row will be a header for the table, the second will be the headers for the columns, and the remaining three rows will be the data.
Mon-Friday, 8am to 8pm.
Sat, 8am to 2pm.
Sun, closed.

try it

Directions:

1. Return to your StackBlitz project and, in the index.html file, position your insertion point between the main sections and add a table element. In the table’s opening tag, give it an id attribute with a value of “hours.”

2. Next, add five rows to the table using the <tr> elements.

This is the expected output:

The image shows an HTML document open in a dark-themed editor, displaying the structure of a webpage. The code is within the <body> section of the HTML file. At the top, a <header> tag contains an image with the source images/mainLogo.jpg and the alt text "pastry buns that are ready to eat." Below the header is a <nav> tag that includes an unordered list (<ul>) with three list items (<li>), each containing a link (<a>) to the following pages: "Home" (index.html), "About" (about.html), and "Menu" (menu.html). After the navigation, there is a <section> tag with the text "Section." Inside this section, the <main> tag contains a table with the ID "hours," but the table rows (<tr>) are currently empty. Following the main section is an <aside> tag with the placeholder text "Aside." At the bottom of the document, there is a <footer> tag labeled "Footer," representing the footer of the webpage. The document ends with closing tags for the body and HTML elements. The layout appears to be prepared for further content, with structural placeholders ready for text or other elements to be inserted later.

NOTE: Table cells, by default, only take up as much space as needed per its content. At this time, there is no content in the cells, so in the output, you do not see anything appear between the “Main” and “Aside” words.

3. In the first row, add a single table header cell using the <th> element. Give it a “colspan” attribute of 3 and write the text “Hours of Operations” between the opening and closing <th> tags. This will serve as the table’s title.

4. In the second, add three table header cells <th>. Type the text “Days,” “Open,” and “Close” in each of the three header cells.

5. In the third and fourth rows, add three table data cells <td> to each row.

a. Fill out the third row with Mon-Fri information.
b. Fill out the fourth row with Sat information.

6. In the fifth row, add two table data cells and give the second cell a colspan of 2. This last row will be Sunday in the first cell and the word “closed” in the merged second and third cells.

This is the expected output:

The right output window displays a webpage preview. At the top, there is an image of three pastry buns. Below the image, the text "Header" and "Nav" are shown as placeholders for those sections. A yellow navigation bar contains three labeled buttons: "Home," "About," and "Menu," with "Home" highlighted in yellow. Beneath the navigation bar, the words "Section" and "Main" appear as placeholders. Under "Main," a table labeled "Hours of Operations" is visible, with columns for "Days," "Open," and "Close." The table lists the operating hours as Monday to Friday from 8 am to 8 pm, Saturday from 8 am to 2 pm, and Sunday as closed. The placeholders "Aside" and "Footer" are shown at the bottom of the page.

7. Now that we have the HTML structure in place, let’s add a few basic style properties to improve its appearance. Open the stylesheet file (style.css), and create a new style rule that uses the “hours” id selector. Assign the width to be 275 pixels. Give the table a border of 1 pixel wide, solid, and #000000 (black). This will widen the table to 275 pixels and will add a solid 1-pixel-wide border around the entire table.

This is the expected output:

The right output window displays a webpage preview. At the top, there is an image of three pastry buns. Below the image, the text "Header" and "Nav" are visible as placeholders. A yellow navigation bar contains three buttons labeled "Home," "About," and "Menu," with "Home" highlighted in yellow. Beneath the navigation bar, the words "Section" and "Main" are shown as placeholders. Under the "Main" section, there is a bordered table labeled "Hours of Operations." The table has three columns labeled "Days," "Open," and "Close." The rows list the operating hours as Monday to Friday from 8 am to 8 pm, Saturday from 8 am to 2 pm, and Sunday as closed. Below the table, the placeholders "Aside" and "Footer" are displayed.

8. Next, add a new style rule that uses the following selectors in a comma-separated list:

#hours td, #hours th

Then, give it the same border properties as the table itself. This should add a set of borders around each cell.

This is the expected output:

The right output window displays a webpage preview. At the top, there is an image of three pastry buns. Below the image, the text "Header" and "Nav" are shown as placeholders. A yellow navigation bar contains three buttons labeled "Home," "About," and "Menu," with "Home" highlighted in yellow. Beneath the navigation bar, the words "Section" and "Main" are displayed as placeholders. In the "Main" section, there is a table labeled "Hours of Operations." The table has three columns labeled "Days," "Open," and "Close," with borders around each cell. The rows list the operating hours as Monday to Friday from 8 am to 8 pm, Saturday from 8 am to 2 pm, and Sunday as closed. The table is neatly bordered in black. Below the table, the placeholders "Aside" and "Footer" are shown.

9. If you haven't already done so, now is a good time to save your project.

reflect

Tables are very useful for displaying data in a way that adds meaning and clarity to the data. In this case, a nice little hours of operations table lets the audience know when the physical store will be open and when it will close, and on what days. We were able to convey the meaning of the table data overall using the spanned first row header cell; then, we added meaning to the columns of data using the second row of header cells.

Table headers and spanned cells can add a multitude of meanings and organization to the information needed by the site’s audience. Furthermore, using <thead>, <tbody>, and <tfoot> can add programmatic meaning to assistive technology as well as SEO spider bots.

watch

View the following video for more on using tables to display data on a page.


terms to know

Rowspan
An HTML attribute for <td> and <th> tags that merges the cell down across multiple rows of the table.

Colspan
An HTML attribute for <td> and <th> tags that merges the cell to the right across multiple columns of the table.

summary
In this lesson, you learned about HTML tables and how they are constructed using the <table>, <tr>, <td>, and <th> tags. You also learned about the process of merging cells across multiple columns or rows and how you can define the head, body, and footer for each table.

Source: This Tutorial has been adapted from "The Missing Link: An Introduction to Web Development and Programming " by Michael Mendez. Access for free at https://open.umn.edu/opentextbooks/textbooks/the-missing-link-an-introduction-to-web-development-and-programming. License: Creative Commons attribution: CC BY-NC-SA

Terms to Know
Colspan

An HTML attribute for <td> and <th> tags that merges the cell to the right across multiple columns of the table.

Rowspan

An HTML attribute for <td> and <th> tags that merges the cell down across multiple rows of the table.

Table Body Tag <tbody>

An HTML semantic tag used to surround and identify certain rows in the table as the table’s body.

Table Data Tag <td>

An HTML tag used to define an individual cell within a row of an HTML table.

Table Foot Tag <tfoot>

An HTML semantic tag used to surround and identify certain rows in the table as the table’s footer.

Table Head Tag <thead>

An HTML semantic tag used to surround and identify certain rows in the table as the table’s header.

Table Header Tag <th>

An HTML tag used to define an individual header cell, with its content formatted as bold and center aligned.

Table Row Tag <tr>

An HTML tag used to define an individual row of an HTML table.