Scroll to top
Read Time: 3 min

<table> is an HTML element that displays data in tabular format. HTML tables use rows and columns to make data and relationships easy to interpret.

You might use a <table> element to display a timetable, or a product’s pricing structure. Tables display related content in a way that is accessible and easy to understand at a quick glance.


The HTML <table> element works with some required and some optional nested elements.


    <th>First name</th>
    <th>Last name</th>
      <td>Web Developer</td>


Browser support

The <table> tag is supported in all modern browsers as well as many email clients. Read more on


The <table> tag supports Global Attributes in HTML. Global Attributes are common to all HTML elements and can be used on all of them (though they may not have much of an effect on some of them).


Within tables you can use a variety of additional HTML elements.

Add <caption> for Better Accessibility

To increase accessibility, try adding a <caption> element immediately after the opening <table> tag, giving a clear description of the table’s purpose.

The example above uses the CSS caption-side property to position the caption. This can either be top or bottom.

The <caption> will help someone understand what content is being presented and if they should spend time digesting it. Additionally, the <caption> element provides cues to assistive technologies like screen readers.

Styling HTML Tables

Tables are rigid but can be styled to meet most needs. CSS properties that might be useful in styling a <table> element include width, border, border-style, border-color, border-width, border-collapse, border-spacing, margin, padding, text-align, and vertical-align.

Mobile Device Considerations

  • Do not use tables unless the device or devices are known to support them (1)
  • Do not use nested tables (2)
  • Do not use tables for layout (3)
  • Use alternatives to tabular presentation (4)

Learn More

Did you know? <table> was a relative latecomer to HTML, only being introduced to the spec in January 1997.

After their introduction to the HTML spec, tables were soon being used to create layouts for web pages. This was a logical development as they allow for columns and nested content. 

Graphics packages such as Adobe Photoshop jumped onboard, developing the slice tool, which allowed designs to be “sliced” up and exported in pieces, ready to be reassembled in table cells.

Whilst all this was incorrect use of the <table> element, there were no layout alternatives at the time. Nowadays, table-based layouts on the web aren’t needed since CSS provides better solutions.

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.