HTML Table Basics - Learn Web Development | MDN

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

1. Guides
2. HTML
3. HTML tables
4. HTML table basics

Article Actions

• English (US)
  • Remember language
  • Deutsch
  • Español
  • Français
  • 日本語
  • 한국어
  • Português (do Brasil)
  • Русский
  • 中文 (简体)
  • 正體中文 (繁體)

• What is a table?
• Active learning: Creating your first table
• Adding headers with <th> elements
• Allowing cells to span multiple rows and columns
• Providing common styling to columns
• 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

• What is a table?
• Active learning: Creating your first table
• Adding headers with <th> elements
• Allowing cells to span multiple rows and columns
• Providing common styling to columns
• Summary

• Overview: HTML tables
• Next

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.

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

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.

<table> <caption> Data about the planets of our solar system (Source: <a href="https://nssdc.gsfc.nasa.gov/planetary/factsheet/" >Nasa's Planetary Fact Sheet - Metric</a >). </caption> <thead> <tr> <td colspan="2"></td> <th scope="col">Name</th> <th scope="col">Mass (10²⁴kg)</th> <th scope="col">Diameter (km)</th> <th scope="col">Density (kg/m³)</th> <th scope="col">Gravity (m/s²)</th> <th scope="col">Length of day (hours)</th> <th scope="col">Distance from Sun (10⁶km)</th> <th scope="col">Mean temperature (°C)</th> <th scope="col">Number of moons</th> <th scope="col">Notes</th> </tr> </thead> <tbody> <tr> <th colspan="2" rowspan="4" scope="rowgroup">Terrestrial planets</th> <th scope="row">Mercury</th> <td>0.330</td> <td>4,879</td> <td>5427</td> <td>3.7</td> <td>4222.6</td> <td>57.9</td> <td>167</td> <td>0</td> <td>Closest to the Sun</td> </tr> <tr> <th scope="row">Venus</th> <td>4.87</td> <td>12,104</td> <td>5243</td> <td>8.9</td> <td>2802.0</td> <td>108.2</td> <td>464</td> <td>0</td> <td></td> </tr> <tr> <th scope="row">Earth</th> <td>5.97</td> <td>12,756</td> <td>5514</td> <td>9.8</td> <td>24.0</td> <td>149.6</td> <td>15</td> <td>1</td> <td>Our world</td> </tr> <tr> <th scope="row">Mars</th> <td>0.642</td> <td>6,792</td> <td>3933</td> <td>3.7</td> <td>24.7</td> <td>227.9</td> <td>-65</td> <td>2</td> <td>The red planet</td> </tr> <tr> <th rowspan="4" scope="rowgroup">Jovian planets</th> <th rowspan="2" scope="rowgroup">Gas giants</th> <th scope="row">Jupiter</th> <td>1898</td> <td>142,984</td> <td>1326</td> <td>23.1</td> <td>9.9</td> <td>778.6</td> <td>-110</td> <td>67</td> <td>The largest planet</td> </tr> <tr> <th scope="row">Saturn</th> <td>568</td> <td>120,536</td> <td>687</td> <td>9.0</td> <td>10.7</td> <td>1433.5</td> <td>-140</td> <td>62</td> <td></td> </tr> <tr> <th rowspan="2" scope="rowgroup">Ice giants</th> <th scope="row">Uranus</th> <td>86.8</td> <td>51,118</td> <td>1271</td> <td>8.7</td> <td>17.2</td> <td>2872.5</td> <td>-195</td> <td>27</td> <td></td> </tr> <tr> <th scope="row">Neptune</th> <td>102</td> <td>49,528</td> <td>1638</td> <td>11.0</td> <td>16.1</td> <td>4495.1</td> <td>-200</td> <td>14</td> <td></td> </tr> <tr> <th colspan="2" scope="rowgroup">Dwarf planets</th> <th scope="row">Pluto</th> <td>0.0146</td> <td>2,370</td> <td>2095</td> <td>0.7</td> <td>153.3</td> <td>5906.4</td> <td>-225</td> <td>5</td> <td> Declassified as a planet in 2006, but this <a href="https://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/" >remains controversial</a >. </td> </tr> </tbody> </table> table { border-collapse: collapse; border: 2px solid black; } th, td { padding: 5px; border: 1px solid black; }

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:

<table> <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> <tr> <td>Second row, first cell.</td> <td>Cell 2.</td> <td>Cell 3.</td> <td>Cell 4.</td> </tr> </table> table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 10px 20px; }

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> table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 10px 20px; }

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> table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 10px 20px; }

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> table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 10px 20px; }

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: 100px;
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: 100px;

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.

• Overview: HTML tables
• Next

Help improve MDN

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

This page was last modified on Aug 1, 2024 by MDN contributors.

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