HTML Table Advanced Features And Accessibility - MDN Web Docs

• Skip to main content
• Skip to search
• Skip to select language

1. Guides
2. HTML
3. HTML tables
4. HTML table advanced features and accessibility

Article Actions

• English (US)
  • Remember language
  • Deutsch
  • Español
  • Français
  • 日本語
  • 한국어
  • Русский
  • 中文 (简体)

• Adding a caption to your table with <caption>
• Adding structure with <thead>, <tbody>, and <tfoot>
• Nesting Tables
• Tables for visually impaired users
• Summary

1. Complete beginners start here!
2. Getting started with the web
   1. Getting started with the web
   2. Installing basic software
   3. What will your website look like?
   4. Dealing with files
   5. HTML basics
   6. CSS basics
   7. JavaScript basics
   8. Publishing your website
   9. How the web works
3. HTML — Structuring the web
4. Introduction to HTML
   1. Introduction to HTML
   2. Getting started with HTML
   3. What's in the head? Metadata in HTML
   4. HTML text fundamentals
   5. Creating hyperlinks
   6. Advanced text formatting
   7. Document and website structure
   8. Debugging HTML
   9. Marking up a letter
   10. Structuring a page of content
5. Multimedia and embedding
   1. Multimedia and embedding
   2. Images in HTML
   3. Video and audio content
   4. From object to iframe — other embedding technologies
   5. Adding vector graphics to the web
   6. Responsive images
   7. Mozilla splash page
6. HTML tables
   1. HTML tables
   2. HTML table basics
   3. HTML table advanced features and accessibility
   4. Structuring planet data
7. CSS — Styling the web
8. CSS first steps
   1. CSS first steps
   2. What is CSS?
   3. Getting started with CSS
   4. How CSS is structured
   5. How CSS works
   6. Styling a biography page
9. CSS building blocks
   1. CSS building blocks
   2. CSS selectors
   3. Type, class, and ID selectors
   4. Attribute selectors
   5. Pseudo-classes and pseudo-elements
   6. Combinators
   7. Cascade, specificity, and inheritance
   8. Cascade layers
   9. The box model
   10. Backgrounds and borders
   11. Handling different text directions
   12. Overflowing content
   13. CSS values and units
   14. Sizing items in CSS
   15. Images, media, and form elements
   16. Styling tables
   17. Advanced styling effects
   18. Debugging CSS
   19. Organizing your CSS
   20. Fundamental CSS comprehension
   21. Creating fancy letterheaded paper
   22. A cool-looking box
10. Styling text
    1. CSS styling text
    2. Fundamental text and font styling
    3. Styling lists
    4. Styling links
    5. Web fonts
    6. Typesetting a community school homepage
11. CSS layout
    1. CSS layout
    2. Introduction to CSS layout
    3. Normal Flow
    4. Flexbox
    5. Grids
    6. Floats
    7. Positioning
    8. Multiple-column layout
    9. Responsive design
    10. Beginner's guide to media queries
    11. Legacy layout methods
    12. Supporting older browsers
    13. Fundamental layout comprehension
12. JavaScript — Dynamic client-side scripting
13. JavaScript first steps
    1. JavaScript first steps
    2. What is JavaScript?
    3. A first splash into JavaScript
    4. What went wrong? Troubleshooting JavaScript
    5. Storing the information you need — Variables
    6. Basic math in JavaScript — numbers and operators
    7. Handling text — strings in JavaScript
    8. Useful string methods
    9. Arrays
    10. Silly story generator
14. JavaScript building blocks
    1. JavaScript building blocks
    2. Making decisions in your code — conditionals
    3. Looping code
    4. Functions — reusable blocks of code
    5. Build your own function
    6. Function return values
    7. Introduction to events
    8. Event bubbling
    9. Image gallery
15. Introducing JavaScript objects
    1. Introducing JavaScript objects
    2. JavaScript object basics
    3. Object prototypes
    4. Object-oriented programming
    5. Classes in JavaScript
    6. Working with JSON
    7. Object building practice
    8. Adding features to our bouncing balls demo
16. Asynchronous JavaScript
    1. Asynchronous JavaScript
    2. Introducing asynchronous JavaScript
    3. How to use promises
    4. How to implement a promise-based API
    5. Introducing workers
    6. Sequencing animations
17. Client-side web APIs
    1. Client-side web APIs
    2. Introduction to web APIs
    3. Manipulating documents
    4. Fetching data from the server
    5. Third-party APIs
    6. Drawing graphics
    7. Video and Audio APIs
    8. Client-side storage
18. Web forms — Working with user data
19. Web form building blocks
    1. Web form building blocks
    2. Your first form
    3. How to structure a web form
    4. Basic native form controls
    5. The HTML5 input types
    6. Other form controls
    7. Styling web forms
    8. Advanced form styling
    9. UI pseudo-classes
    10. Client-side form validation
    11. Sending form data
20. Advanced web form techniques
    1. How to build custom form controls
    2. Sending forms through JavaScript
    3. CSS property compatibility table for form controls
    4. HTML forms in legacy browsers
21. Accessibility — Make the web usable by everyone
22. Accessibility guides
    1. Accessibility
    2. What is accessibility?
    3. HTML: A good basis for accessibility
    4. CSS and JavaScript accessibility best practices
    5. WAI-ARIA basics
    6. Accessible multimedia
    7. Mobile accessibility
    8. Assessment: Accessibility troubleshooting
23. Performance — Making websites fast and responsive
24. Performance guides
    1. Web performance
    2. The "why" of web performance
    3. What is web performance?
    4. Perceived performance
    5. Measuring performance
    6. Multimedia: Images
    7. Multimedia: video
    8. JavaScript performance optimization
    9. HTML performance optimization
    10. CSS performance optimization
    11. The business case for web performance
25. MathML — Writing mathematics with MathML
26. MathML first steps
    1. MathML first steps
    2. Getting started with MathML
    3. MathML Text Containers
    4. MathML fractions and roots
    5. MathML scripted elements
    6. MathML tables
    7. Three famous mathematical formulas
27. Games — Developing games for the web
28. Guides and tutorials
    1. Introduction to game development for the Web
    2. Techniques for game development
    3. Tutorials
    4. Publishing games
29. Tools and testing
30. Client-side web development tools
    1. Understanding client-side web development tools
    2. Client-side tooling overview
    3. Command line crash course
    4. Package management basics
    5. Introducing a complete toolchain
    6. Deploying our app
31. Introduction to client-side frameworks
    1. Introduction to client-side frameworks
    2. Framework main features
32. React
    1. Getting started with React
    2. Beginning our React todo list
    3. Componentizing our React app
    4. React interactivity: Events and state
    5. React interactivity: Editing, filtering, conditional rendering
    6. Accessibility in React
    7. React resources
33. Ember
    1. Getting started with Ember
    2. Ember app structure and componentization
    3. Ember interactivity: Events, classes and state
    4. Ember Interactivity: Footer functionality, conditional rendering
    5. Routing in Ember
    6. Ember resources and troubleshooting
34. Vue
    1. Getting started with Vue
    2. Creating our first Vue component
    3. Rendering a list of Vue components
    4. Adding a new todo form: Vue events, methods, and models
    5. Styling Vue components with CSS
    6. Using Vue computed properties
    7. Vue conditional rendering: editing existing todos
    8. Vue refs and lifecycle methods for focus management
    9. Vue resources
35. Svelte
    1. Getting started with Svelte
    2. Starting our Svelte to-do list app
    3. Dynamic behavior in Svelte: working with variables and props
    4. Componentizing our Svelte app
    5. Advanced Svelte: Reactivity, lifecycle, accessibility
    6. Working with Svelte stores
    7. TypeScript support in Svelte
    8. Deployment and next steps
36. Angular
    1. Getting started with Angular
    2. Beginning our Angular todo list app
    3. Styling our Angular app
    4. Creating an item component
    5. Filtering our to-do items
    6. Building Angular applications and further resources
37. Git and GitHub
    1. Git and GitHub
38. Cross browser testing
    1. Cross browser testing
    2. Introduction to cross-browser testing
    3. Strategies for carrying out testing
    4. Handling common HTML and CSS problems
    5. Handling common JavaScript problems
    6. Handling common accessibility problems
    7. Implementing feature detection
    8. Introduction to automated testing
    9. Setting up your own test automation environment
39. Server-side website programming
40. First steps
    1. Server-side website programming first steps
    2. Introduction to the server side
    3. Client-Server Overview
    4. Server-side web frameworks
    5. Website security
41. Django web framework (Python)
    1. Django Web Framework (Python)
    2. Django introduction
    3. Setting up a Django development environment
    4. Django Tutorial: The Local Library website
    5. Django Tutorial Part 2: Creating a skeleton website
    6. Django Tutorial Part 3: Using models
    7. Django Tutorial Part 4: Django admin site
    8. Django Tutorial Part 5: Creating our home page
    9. Django Tutorial Part 6: Generic list and detail views
    10. Django Tutorial Part 7: Sessions framework
    11. Django Tutorial Part 8: User authentication and permissions
    12. Django Tutorial Part 9: Working with forms
    13. Django Tutorial Part 10: Testing a Django web application
    14. Django Tutorial Part 11: Deploying Django to production
    15. Django web application security
    16. Assessment: DIY Django mini blog
42. Express Web Framework (Node.js/JavaScript)
    1. Express web framework (Node.js/JavaScript)
    2. Express/Node introduction
    3. Setting up a Node development environment
    4. Express Tutorial: The Local Library website
    5. Express Tutorial Part 2: Creating a skeleton website
    6. Express Tutorial Part 3: Using a Database (with Mongoose)
    7. Express Tutorial Part 4: Routes and controllers
    8. Express Tutorial Part 5: Displaying library data
    9. Express Tutorial Part 6: Working with forms
    10. Express Tutorial Part 7: Deploying to production
43. Further resources
44. Common questions
    1. Common questions
    2. Use HTML to solve common problems
    3. Use CSS to solve common problems
    4. Solve common problems in your JavaScript code
    5. Web mechanics
    6. Tools and setup
    7. Design and accessibility

• Adding a caption to your table with <caption>
• Adding structure with <thead>, <tbody>, and <tfoot>
• Nesting Tables
• Tables for visually impaired users
• Summary

• Previous
• Overview: HTML tables
• Next

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 putting 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.

3. 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.

4. 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:

   csstbody { font-size: 95%; font-style: italic; } tfoot { font-weight: bold; }

5. 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:

table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 10px 20px; }

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 ids 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 ids 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!

• Previous
• Overview: HTML tables
• Next

Help improve MDN

Was this page helpful to you?YesNoLearn how to contribute.

This page was last modified on Oct 14, 2024 by MDN contributors.

View this page on GitHub • Report a problem with this content