HTML / HTML Tags

HTML <Table> Tag

Oct 12, 2022
2 min read
HTML table Tag

Definition

A <table> element represents data in a two-dimensional table comprising rows and columns of cells.

Example

<table>
  <caption>This is the table's caption</caption>
    <thead>
        <tr>
            <th colspan="2">The table header with one column</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>The table body</td>
            <td>with two columns</td>
        </tr>
    </tbody>
</table>

Usage

  • An opening and closing tag is required.
  • The <table> element may contain the following elements, but in strict order:
  • Within the <tr> element you can have <th> or <td> elements representing table heading cells and normal table data cells respectively.

Best Practices

  • You should supply a <caption> element describing the table’s purpose. This assists users in deciding whether to read the table and users using assistive technology such as screen readers.
  • On more complex tables, you may want to add the <th> scope attribute to provide better information for assistive technologies such as screen readers to understand your table. An example where it may be needed is where you have table headings along the top and down the table’s first column.
  • Avoid complicated tables that use the colspan and rowspan attributes where possible. These attributes make it difficult for assistive technologies such as screen readers.

Attributes

The Table element only supports the Global Attributes.

There used to be a range of <table> elements that helped style the table, but these are now deprecated. You should use CSS to style a table.

CSS Properties for Styling a Table

Here are the basic CSS properties for styling a table:

CSSTagsDescription
border-spacing<table>Sets the space between borders of adjacent <table> cells when border-collapse is separate
border-collapse<table>Sets whether the adjacent borders are collapsed or separate.
padding<table>, <th>, <td>Sets the padding.
border<table>, <th>, <td>Sets the border, either as a whole, or each side independently.
background-image<table>, <th>, <td>Sets a background image.
background-colorAllSets a background color.
width<table>, <th>, <td>Specifies the width of the table or cells.
height<table>, <tr>, <th>, <td>Specifies the height of the table or cells.
text-align<tr>, <th>, <td>Aligns the text.
vertical-align<tr>, <th>, <td>Aligns the text vertically.

Specification

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes