Skip to main content Skip to docs navigation
View on GitHub

Tables

Learn HTML table elements, table accessibility and usability features and best practices to present tabular data.

On this page

HTML tables

A very common task in HTML is structuring tabular data, and it has a number of elements and attributes for just this purpose. Coupled with a little CSS for styling, HTML makes it easy to display tables of information on the web such as your school lesson plan, the timetable at your local swimming pool, or statistics about your favorite dinosaurs or football team. This module takes you through all you need to know about structuring tabular data using HTML.

Prerequisites

Before starting this module, you should already have covered the basics of HTML — see Introduction to HTML .

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Glitch .

Guides

This module contains the following articles, which will take you through all the fundamentals of creating tables in HTML.

HTML table basics

This article gets you started with HTML tables, covering the very basics such as rows and cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes.

HTML table advanced features and accessibility

This article looks at some more advanced features of HTML tables — such as captions/summaries and grouping your rows into table head, body and footer sections — as well as looking at the accessibility of tables for visually impaired users.

Assessments

The following assessment will test your understanding of the HTML table techniques covered in the guides above.

Structuring planet data

In our table assessment, we provide you with some data on the planets in our solar system, and get you to structure it into an HTML table.

HTML table basics

This article gets you started with HTML tables, covering the very basics such as rows, cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes.

Prerequisites: The basics of HTML (see Introduction to HTML ).
Objective: To gain basic familiarity with HTML tables.

What is a table?

A table is a structured set of data made up of rows and columns (tabular data ). A table allows you to quickly and easily look up values that indicate some kind of connection between different types of data, for example a person and their age, or a day of the week, or the timetable for a local swimming pool.

A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47.

A swimming timetable showing a sample data table

Tables are very commonly used in human society, and have been for a long time, as evidenced by this US Census document from 1800:

A very old parchment document; the data is not easily readable, but it clearly shows a data table being used.

It is therefore no wonder that the creators of HTML provided a means by which to structure and present tabular data on the web.

How does a table work?

The point of a table is that it is rigid. Information is easily interpreted by making visual associations between row and column headers. Look at the table below for example and find a Jovian gas giant with 62 moons. You can find the answer by associating the relevant row and column headers.

When implemented correctly, HTML tables are handled well by accessibility tools such as screen readers, so a successful HTML table should enhance the experience of sighted and visually impaired users alike.

Table styling

You can also have a look at the live example on GitHub! One thing you'll notice is that the table does look a bit more readable there — this is because the table you see above on this page has minimal styling, whereas the GitHub version has more significant CSS applied.

Be under no illusion; for tables to be effective on the web, you need to provide some styling information with CSS , as well as good solid structure with HTML. In this module we are focusing on the HTML part; to find out about the CSS part you should visit our Styling tables article after you've finished here.

We won't focus on CSS in this module, but we have provided a minimal CSS stylesheet for you to use that will make your tables more readable than the default you get without any styling. You can find the stylesheet here , and you can also find an HTML template that applies the stylesheet — these together will give you a good starting point for experimenting with HTML tables.

When should you NOT use HTML tables?

HTML tables should be used for tabular data — this is what they are designed for. Unfortunately, a lot of people used to use HTML tables to lay out web pages, e.g. one row to contain the header, one row to contain the content columns, one row to contain the footer, etc. You can find more details and an example at Page Layouts in our Accessibility Learning Module . This was commonly used because CSS support across browsers used to be terrible; table layouts are much less common nowadays, but you might still see them in some corners of the web.

In short, using tables for layout rather than CSS layout techniques is a bad idea. The main reasons are as follows:

  1. Layout tables reduce accessibility for visually impaired users : screen readers , used by blind people, interpret the tags that exist in an HTML page and read out the contents to the user. Because tables are not the right tool for layout, and the markup is more complex than with CSS layout techniques, the screen readers' output will be confusing to their users.
  2. Tables produce tag soup : As mentioned above, table layouts generally involve more complex markup structures than proper layout techniques. This can result in the code being harder to write, maintain, and debug.
  3. Tables are not automatically responsive : When you use proper layout containers (such as <header > , <section > , <article > , or <div > ), their width defaults to 100% of their parent element. Tables on the other hand are sized according to their content by default, so extra measures are needed to get table layout styling to effectively work across a variety of devices.

Active learning: Creating your first table

We've talked table theory enough, so, let's dive into a practical example and build up a simple table.

  1. First of all, make a local copy of blank-template.html and minimal-table.css in a new directory on your local machine.
  2. The content of every table is enclosed by these two tags: <table ></table > . Add these inside the body of your HTML.
  3. The smallest container inside a table is a table cell, which is created by a <td > element ('td' stands for 'table data'). Add the following inside your table tags:
    html 
                                                    
                                                    
                                                        
                                                            <
                                                            td
                                                        
                                                        >
                                                    
                                                    Hi, I'm your first cell.
                                                    
                                                        
                                                            </
                                                            td
                                                        
                                                        >
  4. If we want a row of four cells, we need to copy these tags three times. Update the contents of your table to look like so:
    html 
                                                    
                                                    
                                                        
                                                            <
                                                            td
                                                        
                                                        >
                                                    
                                                    Hi, I'm your first cell.
                                                    
                                                        
                                                            </
                                                            td
                                                        
                                                        >
                                                    
                                                    
                                                        
                                                            <
                                                            td
                                                        
                                                        >
                                                    
                                                    I'm your second cell.
                                                    
                                                        
                                                            </
                                                            td
                                                        
                                                        >
                                                    
                                                    
                                                        
                                                            <
                                                            td
                                                        
                                                        >
                                                    
                                                    I'm your third cell.
                                                    
                                                        
                                                            </
                                                            td
                                                        
                                                        >
                                                    
                                                    
                                                        
                                                            <
                                                            td
                                                        
                                                        >
                                                    
                                                    I'm your fourth cell.
                                                    
                                                        
                                                            </
                                                            td
                                                        
                                                        >

As you will see, the cells are not placed underneath each other, rather they are automatically aligned with each other on the same row. Each <td > element creates a single cell and together they make up the first row. Every cell we add makes the row grow longer.

To stop this row from growing and start placing subsequent cells on a second row, we need to use the <tr > element ('tr' stands for 'table row'). Let's investigate this now.

  1. Place the four cells you've already created inside <tr > tags, like so:
    html 
                                                    
                                                    
                                                        
                                                            <
                                                            tr
                                                        
                                                        >
                                                    
                                                    
                                                        
                                                            <
                                                            td
                                                        
                                                        >
                                                    
                                                    Hi, I'm your first cell.
                                                    
                                                        
                                                            </
                                                            td
                                                        
                                                        >
                                                    
                                                    
                                                        
                                                            <
                                                            td
                                                        
                                                        >
                                                    
                                                    I'm your second cell.
                                                    
                                                        
                                                            </
                                                            td
                                                        
                                                        >
                                                    
                                                    
                                                        
                                                            <
                                                            td
                                                        
                                                        >
                                                    
                                                    I'm your third cell.
                                                    
                                                        
                                                            </
                                                            td
                                                        
                                                        >
                                                    
                                                    
                                                        
                                                            <
                                                            td
                                                        
                                                        >
                                                    
                                                    I'm your fourth cell.
                                                    
                                                        
                                                            </
                                                            td
                                                        
                                                        >
                                                    
                                                    
                                                        
                                                            </
                                                            tr
                                                        
                                                        >
  2. Now you've made one row, have a go at making one or two more — each row needs to be wrapped in an additional <tr > element, with each cell contained in a <td > .

Result

This should result in a table that looks something like the following:

Note: You can also find this on GitHub as simple-table.html (see it live also ).

Adding headers with <th >elements

Now let's turn our attention to table headers — special cells that go at the start of a row or column and define the type of data that row or column contains (as an example, see the "Person" and "Age" cells in the first example shown in this article). To illustrate why they are useful, have a look at the following table example. First the source code:

html 
                                        
                                            
                                                
                                                    <
                                                    table
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            &nbsp;
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            Knocky
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            Flor
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            Ella
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            Juan
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            Breed
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            Jack Russell
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            Poodle
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            Streetdog
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            Cocker Spaniel
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            Age
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            16
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            9
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            10
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            5
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            Owner
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            Mother-in-law
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            Me
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            Me
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            Sister-in-law
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            Eating Habits
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            Eats everyone's leftovers
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            Nibbles at food
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            Hearty eater
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            Will eat till he explodes
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    table
                                                
                                                >

Now the actual rendered table:

The problem here is that, while you can kind of make out what's going on, it is not as easy to cross reference data as it could be. If the column and row headings stood out in some way, it would be much better.

Active learning: table headers

Let's have a go at improving this table.

  1. First, make a local copy of our dogs-table.html and minimal-table.css files in a new directory on your local machine. The HTML contains the same Dogs example as you saw above.
  2. To recognize the table headers as headers, both visually and semantically, you can use the <th > element ('th' stands for 'table header'). This works in exactly the same way as a <td > , except that it denotes a header, not a normal cell. Go into your HTML, and change all the <td > elements surrounding the table headers into <th > elements.
  3. Save your HTML and load it in a browser, and you should see that the headers now look like headers.

Note: You can find our finished example at dogs-table-fixed.html on GitHub (see it live also ).

Why are headers useful?

We have already partially answered this question — it is easier to find the data you are looking for when the headers clearly stand out, and the design just generally looks better.

Note: Table headings come with some default styling — they are bold and centered even if you don't add your own styling to the table, to help them stand out.

Tables headers also have an added benefit — along with the scope attribute (which we'll learn about in the next article), they allow you to make tables more accessible by associating each header with all the data in the same row or column. Screen readers are then able to read out a whole row or column of data at once, which is pretty useful.

Allowing cells to span multiple rows and columns

Sometimes we want cells to span multiple rows or columns. Take the following simple example, which shows the names of common animals. In some cases, we want to show the names of the males and females next to the animal name. Sometimes we don't, and in such cases we just want the animal name to span the whole table.

The initial markup looks like this:

html 
                                        
                                            
                                                
                                                    <
                                                    table
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    th
                                                
                                                >
                                            
                                            Animals
                                            
                                                
                                                    </
                                                    th
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    th
                                                
                                                >
                                            
                                            Hippopotamus
                                            
                                                
                                                    </
                                                    th
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    th
                                                
                                                >
                                            
                                            Horse
                                            
                                                
                                                    </
                                                    th
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            Mare
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            Stallion
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    th
                                                
                                                >
                                            
                                            Crocodile
                                            
                                                
                                                    </
                                                    th
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    th
                                                
                                                >
                                            
                                            Chicken
                                            
                                                
                                                    </
                                                    th
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            Hen
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            Rooster
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    table
                                                
                                                >

But the output doesn't give us quite what we want:

We need a way to get "Animals", "Hippopotamus", and "Crocodile" to span across two columns, and "Horse" and "Chicken" to span downwards over two rows. Fortunately, table headers and cells have the colspan and rowspan attributes, which allow us to do just those things. Both accept a unitless number value, which equals the number of rows or columns you want spanned. For example, colspan="2" makes a cell span two columns.

Let's use colspan and rowspan to improve this table.

  1. First, make a local copy of our animals-table.html and minimal-table.css files in a new directory on your local machine. The HTML contains the same animals example as you saw above.
  2. Next, use colspan to make "Animals", "Hippopotamus", and "Crocodile" span across two columns.
  3. Finally, use rowspan to make "Horse" and "Chicken" span across two rows.
  4. Save and open your code in a browser to see the improvement.

Note: You can find our finished example at animals-table-fixed.html on GitHub (see it live also ).

Providing common styling to columns

Styling without <col >

There is one last feature we'll tell you about in this article before we move on. HTML has a method of defining styling information for an entire column of data all in one place — the <col > and <colgroup > elements. These exist because it can be a bit annoying and inefficient having to specify styling on columns — you generally have to specify your styling information on every <td > or <th > in the column, or use a complex selector such as :nth-child .

Note: Styling columns like this is limited to a few properties : border , background , width , and visibility . To set other properties you'll have to either style every <td > or <th > in the column, or use a complex selector such as :nth-child .

Take the following simple example:

html 
                                        
                                            
                                                
                                                    <
                                                    table
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    th
                                                
                                                >
                                            
                                            Data 1
                                            
                                                
                                                    </
                                                    th
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    th
                                                
                                                
                                                    style
                                                    
                                                        =
                                                        "
                                                        
                                                            background-color
                                                            :
                                                            yellow
                                                        
                                                        "
                                                    
                                                
                                                >
                                            
                                            Data 2
                                            
                                                
                                                    </
                                                    th
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            Calcutta
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                
                                                    style
                                                    
                                                        =
                                                        "
                                                        
                                                            background-color
                                                            :
                                                            yellow
                                                        
                                                        "
                                                    
                                                
                                                >
                                            
                                            Orange
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            Robots
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                
                                                    style
                                                    
                                                        =
                                                        "
                                                        
                                                            background-color
                                                            :
                                                            yellow
                                                        
                                                        "
                                                    
                                                
                                                >
                                            
                                            Jazz
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    table
                                                
                                                >

Which gives us the following result:

This isn't ideal, as we have to repeat the styling information across all three cells in the column (we'd probably have a class set on all three in a real project and specify the styling in a separate stylesheet).

Styling with <col >

Instead of doing this, we can specify the information once, on a <col > element. <col > elements are specified inside a <colgroup > container just below the opening <table > tag. We could create the same effect as we see above by specifying our table as follows:

html 
                                        
                                            
                                                
                                                    <
                                                    table
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    colgroup
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    col
                                                
                                                />
                                            
                                            
                                                
                                                    <
                                                    col
                                                
                                                
                                                    style
                                                    
                                                        =
                                                        "
                                                        
                                                            background-color
                                                            :
                                                            yellow
                                                        
                                                        "
                                                    
                                                
                                                />
                                            
                                            
                                                
                                                    </
                                                    colgroup
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    th
                                                
                                                >
                                            
                                            Data 1
                                            
                                                
                                                    </
                                                    th
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    th
                                                
                                                >
                                            
                                            Data 2
                                            
                                                
                                                    </
                                                    th
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            Calcutta
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            Orange
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            Robots
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            Jazz
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    table
                                                
                                                >

Effectively we are defining two "style columns", one specifying styling information for each column. We are not styling the first column, but we still have to include a blank <col > element — if we didn't, the styling would just be applied to the first column.

If we wanted to apply the styling information to both columns, we could just include one <col > element with a span attribute on it, like this:

html 
                                        
                                            
                                                
                                                    <
                                                    colgroup
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    col
                                                
                                                
                                                    style
                                                    
                                                        =
                                                        "
                                                        
                                                            background-color
                                                            :
                                                            yellow
                                                        
                                                        "
                                                    
                                                
                                                span
                                                
                                                    =
                                                    "
                                                    2"
                                                
                                                />
                                            
                                            
                                                
                                                    </
                                                    colgroup
                                                
                                                >

Just like colspan and rowspan , span takes a unitless number value that specifies the number of columns you want the styling to apply to.

Note: When the table, a column, and table cells in that column are all styled separately then styles applied to the cells are painted on top of column styles which are painted on top of the table. This is because the table layer is rendered first, then the columns' layer is rendered, with the cells' layer rendered on top of all the other table layers .

Active learning: colgroup and col

Now it's time to have a go yourself.

Below you can see the timetable of a languages teacher. On Friday she has a new class teaching Dutch all day, but she also teaches German for a few periods on Tuesday and Thursdays. She wants to highlight the columns containing the days she is teaching.

Recreate the table by following the steps below.

  1. First, make a local copy of our timetable.html file in a new directory on your local machine. The HTML contains the same table you saw above, minus the column styling information.
  2. Add a <colgroup > element at the top of the table, just underneath the <table > tag, in which you can add your <col > elements (see the remaining steps below).
  3. The first two columns need to be left unstyled.
  4. Add a background color to the third column. The value for your style attribute is background-color:#97DB9A;
  5. Set a separate width on the fourth column. The value for your style attribute is width: 42px;
  6. Add a background color to the fifth column. The value for your style attribute is background-color: #97DB9A;
  7. Add a different background color plus a border to the sixth column, to signify that this is a special day and she's teaching a new class. The values for your style attribute are background-color:#DCC48E; border:4px solid #C1437A;
  8. The last two days are free days, so just set them to no background color but a set width; the value for the style attribute is width: 42px;

See how you get on with the example. If you get stuck, or want to check your work, you can find our version on GitHub as timetable-fixed.html (see it live also ).

Summary

That just about wraps up the basics of HTML tables. In the next article, we'll look at some slightly more advanced table features , and start to think how accessible they are for visually impaired people.

HTML table advanced features and accessibility

In the second article in this module, we look at some more advanced features of HTML tables — such as captions/summaries and grouping your rows into table head, body and footer sections — as well as looking at the accessibility of tables for visually impaired users.

Prerequisites: The basics of HTML (see Introduction to HTML ).
Objective: To learn about more advanced HTML table features, and the accessibility of tables.

Adding a caption to your table with <caption >

You can give your table a caption by putting it inside a <caption > element and nesting that inside the <table > element. You should put it just below the opening <table > tag.

html 
                                        
                                            
                                                
                                                    <
                                                    table
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    caption
                                                
                                                >
                                            
                                            Dinosaurs in the Jurassic period

                                            
                                                
                                                    </
                                                    caption
                                                
                                                >
                                            
                                            …

                                            
                                                
                                                    </
                                                    table
                                                
                                                >

As you can infer from the brief example above, the caption is meant to contain a description of the table contents. This is useful for all readers wishing to get a quick idea of whether the table is useful to them as they scan the page, but particularly for blind users. Rather than have a screen reader read out the contents of many cells just to find out what the table is about, the user can rely on a caption and then decide whether or not to read the table in greater detail.

A caption is placed directly beneath the <table > tag.

Note: The summary attribute can also be used on the <table > element to provide a description — this is also read out by screen readers. We'd recommend using the <caption > element instead, however, as summary is deprecated and can't be read by sighted users (it doesn't appear on the page).

Active learning: Adding a caption

Let's try this out, revisiting an example we first met in the previous article.

  1. Open up your language teacher's school timetable from the end of HTML Table Basics , or make a local copy of our timetable-fixed.html file.
  2. Add a suitable caption for the table.
  3. Save your code and open it in a browser to see what it looks like.

Note: You can find our version on GitHub — see timetable-caption.html (see it live also ).

Adding structure with <thead >, <tbody >, and <tfoot >

As your tables get a bit more complex in structure, it is useful to give them more structural definition. One clear way to do this is by using <thead > , <tbody > , and <tfoot > , which allow you to mark up a header, body, and footer section for the table.

These elements don't make the table any more accessible to screen reader users, and don't result in any visual enhancement on their own. They are however very useful for styling and layout — acting as useful hooks for adding CSS to your table. To give you some interesting examples, in the case of a long table you could make the table header and footer repeat on every printed page, and you could make the table body display on a single page and have the contents available by scrolling up and down.

To use them, they should be included in the following order:

  • The <thead > element must wrap the part of the table that is the header — this is usually the first row containing the column headings, but this is not necessarily always the case. If you are using <col > / <colgroup > elements, the table header should come just below those.
  • The <tbody > element needs to wrap the main part of the table content that isn't the table header or footer.
  • The <tfoot > element needs to wrap the part of the table that is the footer — this might be a final row with items in the previous rows summed, for example.

Note: <tbody > is always included in every table, implicitly if you don't specify it in your code. To check this, open up one of your previous examples that doesn't include <tbody > and look at the HTML code in your browser developer tools — you will see that the browser has added this tag for you. You might wonder why you ought to bother including it at all — you should, because it gives you more control over your table structure and styling.

Active learning: Adding table structure

Let's put these new elements into action.

  1. First of all, make a local copy of spending-record.html and minimal-table.css in a new folder.
  2. Try opening it in a browser — You'll see that it looks OK, but it could stand to be improved. The "SUM" row that contains a summation of the spent amounts seems to be in the wrong place, and there are some details missing from the code.
  3. Put the obvious headers row inside a <thead > element, the "SUM" row inside a <tfoot > element, and the rest of the content inside a <tbody > element.
  4. Save and refresh, and you'll see that adding the <tfoot > element has caused the "SUM" row to go down to the bottom of the table.
  5. Next, add a colspan attribute to make the "SUM" cell span across the first four columns, so the actual number appears at the bottom of the "Cost" column.
  6. Let's add some simple extra styling to the table, to give you an idea of how useful these elements are for applying CSS. Inside the head of your HTML document, you'll see an empty <style > element. Inside this element, add the following lines of CSS code:
    css 
                                                    
                                                    tbody
                                                    {
                                                    font-size
                                                    :
                                                    95%;
                                                    font-style
                                                    :
                                                    italic;
                                                    }
                                                    tfoot
                                                    {
                                                    font-weight
                                                    :
                                                    bold;
                                                    }
  7. Save and refresh, and have a look at the result. If the <tbody > and <tfoot > elements weren't in place, you'd have to write much more complicated selectors/rules to apply the same styling.

Note: We don't expect you to fully understand the CSS right now. You'll learn more about this when you go through our CSS modules (Introduction to CSS is a good place to start; we also have an article specifically on styling tables ).

Your finished table should look something like the following:

Note: You can also find it on GitHub as spending-record-finished.html .

Nesting Tables

It is possible to nest a table inside another one, as long as you include the complete structure, including the <table > element. This is generally not really advised, as it makes the markup more confusing and less accessible to screen reader users, and in many cases you might as well just insert extra cells/rows/columns into the existing table. It is however sometimes necessary, for example if you want to import content easily from other sources.

The following markup shows a simple nested table:

html 
                                        
                                            
                                                
                                                    <
                                                    table
                                                
                                                id
                                                
                                                    =
                                                    "
                                                    table1"
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    th
                                                
                                                >
                                            
                                            title1
                                            
                                                
                                                    </
                                                    th
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    th
                                                
                                                >
                                            
                                            title2
                                            
                                                
                                                    </
                                                    th
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    th
                                                
                                                >
                                            
                                            title3
                                            
                                                
                                                    </
                                                    th
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                id
                                                
                                                    =
                                                    "
                                                    nested"
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    table
                                                
                                                id
                                                
                                                    =
                                                    "
                                                    table2"
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            cell1
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            cell2
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            cell3
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    table
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            cell2
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            cell3
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            cell4
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            cell5
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            cell6
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    table
                                                
                                                >

The output of which looks something like this:

Tables for visually impaired users

Let's recap briefly on how we use data tables. A table can be a handy tool, for giving us quick access to data and allowing us to look up different values. For example, it takes only a short glance at the table below to find out how many rings were sold in Gent during August 2016. To understand its information we make visual associations between the data in this table and its column and/or row headers.

Items Sold August 2016
Clothes Accessories
Trousers Skirts Dresses Bracelets Rings
Belgium Antwerp 56 22 43 72 23
Gent 46 18 50 61 15
Brussels 51 27 38 69 28
The Netherlands Amsterdam 89 34 69 85 38
Utrecht 80 12 43 36 19

But what if you cannot make those visual associations? How then can you read a table like the above? Visually impaired people often use a screen reader that reads out information on web pages to them. This is no problem when you're reading plain text but interpreting a table can be quite a challenge for a blind person. Nevertheless, with the proper markup we can replace visual associations by programmatic ones.

Note: There are around 253 Million people living with Visual Impairment according to WHO data in 2017 .

This section of the article provides further techniques for making tables as accessible as possible.

Using column and row headers

Screen readers will identify all headers and use them to make programmatic associations between those headers and the cells they relate to. The combination of column and row headers will identify and interpret the data in each cell so that screen reader users can interpret the table similarly to how a sighted user does.

We already covered headers in our previous article — see Adding headers with <th >elements .

The scope attribute

A new topic for this article is the scope attribute, which can be added to the <th > element to tell screen readers exactly what cells the header is a header for — is it a header for the row it is in, or the column, for example? Looking back to our spending record example from earlier on, you could unambiguously define the column headers as column headers like this:

html 
                                        
                                            
                                                
                                                    <
                                                    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
                                                
                                                >

And each row could have a header defined like this (if we added row headers as well as column headers):

html 
                                        
                                            
                                                
                                                    <
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    th
                                                
                                                scope
                                                
                                                    =
                                                    "
                                                    row"
                                                
                                                >
                                            
                                            Haircut
                                            
                                                
                                                    </
                                                    th
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            Hairdresser
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            12/09
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            Great idea
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            30
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    tr
                                                
                                                >

Screen readers will recognize markup structured like this, and allow their users to read out the entire column or row at once, for example.

scope has two more possible values — colgroup and rowgroup . These are used for headings that sit over the top of multiple columns or rows. If you look back at the "Items Sold August 2016" table at the start of this section of the article, you'll see that the "Clothes" cell sits above the "Trousers", "Skirts", and "Dresses" cells. All of these cells should be marked up as headers (<th > ), but "Clothes" is a heading that sits over the top and defines the other three subheadings. "Clothes" therefore should get an attribute of scope="colgroup" , whereas the others would get an attribute of scope="col" :

html 
                                        
                                            
                                                
                                                    <
                                                    thead
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    th
                                                
                                                colspan
                                                
                                                    =
                                                    "
                                                    3"
                                                
                                                scope
                                                
                                                    =
                                                    "
                                                    colgroup"
                                                
                                                >
                                            
                                            Clothes
                                            
                                                
                                                    </
                                                    th
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    th
                                                
                                                scope
                                                
                                                    =
                                                    "
                                                    col"
                                                
                                                >
                                            
                                            Trousers
                                            
                                                
                                                    </
                                                    th
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    th
                                                
                                                scope
                                                
                                                    =
                                                    "
                                                    col"
                                                
                                                >
                                            
                                            Skirts
                                            
                                                
                                                    </
                                                    th
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    th
                                                
                                                scope
                                                
                                                    =
                                                    "
                                                    col"
                                                
                                                >
                                            
                                            Dresses
                                            
                                                
                                                    </
                                                    th
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    thead
                                                
                                                >

The same applies to headers for multiple grouped rows. Take another look at the "Items Sold August 2016" table, this time focusing on the rows with the "Amsterdam" and "Utrecht" headers (<th > ). You'll notice that the "The Netherlands" header, also marked up as a <th > element, spans both rows, being the heading for the other two subheadings. Therefore, scope="rowgroup" should be specified on this header cell to help screen readers create the correct associations:

html 
                                        
                                            
                                                
                                                    <
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    th
                                                
                                                rowspan
                                                
                                                    =
                                                    "
                                                    2"
                                                
                                                scope
                                                
                                                    =
                                                    "
                                                    rowgroup"
                                                
                                                >
                                            
                                            The Netherlands
                                            
                                                
                                                    </
                                                    th
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    th
                                                
                                                scope
                                                
                                                    =
                                                    "
                                                    row"
                                                
                                                >
                                            
                                            Amsterdam
                                            
                                                
                                                    </
                                                    th
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            89
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            34
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            69
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    th
                                                
                                                scope
                                                
                                                    =
                                                    "
                                                    row"
                                                
                                                >
                                            
                                            Utrecht
                                            
                                                
                                                    </
                                                    th
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            80
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            12
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                >
                                            
                                            43
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    tr
                                                
                                                >

The id and headers attributes

An alternative to using the scope attribute is to use id and headers attributes to create associations between headers and cells.

The headers attribute takes a list of unordered, space-separated strings , each corresponding to the unique id of the <th > elements that provide headings for either a data cell (<td > element) or another header cell (<th > element).

This gives your HTML table an explicit definition of the position of each cell in the table, defined by the header(s) for each column and row it is part of, kind of like a spreadsheet. For it to work well, the table really needs both column and row headers.

Returning to our "Items Sold August 2016" example, we can use the id and headers attributes as follows:

  1. Add a unique id to each <th > element in the table.
  2. Add a headers attribute to each <th > element that acts as a subheading, i.e., has a header element above it. The value is the id of the heading that sits over the top and defines the subheadings, which is "clothes" for the column headers and "belgium" for the row header in our example.
  3. Add a headers attribute to each <td > element and add the id s of the associated <th > element(s) in form of a space-separated list. You can proceed as you would in a spreadsheet: Find the data cell and search for the corresponding headings for the row and column. The order of the specified id s doesn't matter, but you should be consistent to keep it organized.
html 
                                        
                                            
                                                
                                                    <
                                                    thead
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    th
                                                
                                                id
                                                
                                                    =
                                                    "
                                                    clothes"
                                                
                                                colspan
                                                
                                                    =
                                                    "
                                                    3"
                                                
                                                >
                                            
                                            Clothes
                                            
                                                
                                                    </
                                                    th
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    th
                                                
                                                id
                                                
                                                    =
                                                    "
                                                    trousers"
                                                
                                                headers
                                                
                                                    =
                                                    "
                                                    clothes"
                                                
                                                >
                                            
                                            Trousers
                                            
                                                
                                                    </
                                                    th
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    th
                                                
                                                id
                                                
                                                    =
                                                    "
                                                    skirts"
                                                
                                                headers
                                                
                                                    =
                                                    "
                                                    clothes"
                                                
                                                >
                                            
                                            Skirts
                                            
                                                
                                                    </
                                                    th
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    th
                                                
                                                id
                                                
                                                    =
                                                    "
                                                    dresses"
                                                
                                                headers
                                                
                                                    =
                                                    "
                                                    clothes"
                                                
                                                >
                                            
                                            Dresses
                                            
                                                
                                                    </
                                                    th
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    thead
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    tbody
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    th
                                                
                                                id
                                                
                                                    =
                                                    "
                                                    belgium"
                                                
                                                rowspan
                                                
                                                    =
                                                    "
                                                    3"
                                                
                                                >
                                            
                                            Belgium
                                            
                                                
                                                    </
                                                    th
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    th
                                                
                                                id
                                                
                                                    =
                                                    "
                                                    antwerp"
                                                
                                                headers
                                                
                                                    =
                                                    "
                                                    belgium"
                                                
                                                >
                                            
                                            Antwerp
                                            
                                                
                                                    </
                                                    th
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                headers
                                                
                                                    =
                                                    "
                                                    antwerp belgium clothes trousers"
                                                
                                                >
                                            
                                            56
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                headers
                                                
                                                    =
                                                    "
                                                    antwerp belgium clothes skirts"
                                                
                                                >
                                            
                                            22
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    <
                                                    td
                                                
                                                headers
                                                
                                                    =
                                                    "
                                                    antwerp belgium clothes dresses"
                                                
                                                >
                                            
                                            43
                                            
                                                
                                                    </
                                                    td
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    tr
                                                
                                                >
                                            
                                            
                                                
                                                    </
                                                    tbody
                                                
                                                >

Note: This method creates very precise associations between headers and data cells but it uses a lot more markup and does not leave any room for errors. The scope approach is usually sufficient for most tables.

Active learning: playing with scope and headers

  1. For this final exercise, we'd like you to first make local copies of items-sold.html and minimal-table.css , in a new directory.
  2. Now try adding in the appropriate scope attributes to make this table more accessible.
  3. Finally, try making another copy of the starter files, and this time make the table more accessible by creating precise and explicit associations using id and headers attributes.

Note: You can check your work against our finished examples — see items-sold-scope.html (also see this live ) and items-sold-headers.html (see this live too ).

Summary

There are a few other things you could learn about tables in HTML, but this is all you need to know for now. Next, you can test yourself with our HTML tables assessment . Have fun!

If you are already learning CSS and have done well on the assessment, you can move on and learn about styling HTML tables — see Styling tables .

If you want to get started with learning CSS, check out the CSS Learning Area !

Updated on April 20, 2024 by Datarist.