Skip to content Skip to main navigation Report an accessibility issue

Tables

Documentation

Usage: Tables are not bad, but they are exclusively for tabular data.

Do
  • Use tables only to display tabular data
  • Keep headers as short as possible. One or two words should do for the top of each column.
  • Tabular data can be enormous and robust, but try to keep your rows and columns to a minimum. Keep in mind that if you have too many columns, they may not be easily displayed on small screens.
Don’t
  • Never use a table to change the layout of information.
  • Never design a table that requires a lot of explaining. If your headers are long, your information is likely better presented as a paragraph of text, a description list, or some other kind of presentation.
EXAMPLE
Optional table caption.
# First Name Last Name Username
1 Johnny Beegood @guitarbell
2 Pat Summitt @dontmess
3 Blount College @oldskool

Code

HTML
<table>
  <caption>Optional table caption.</caption>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Johnny</td>
      <td>Beegood</td>
      <td>@guitarbell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Pat</td>
      <td>Summitt</td>
      <td>@dontmess</td>
    </tr>
    <tr>
    <th scope="row">3</th>
      <td>Blount</td>
      <td>College</td>
      <td>@oldskool</td>
    </tr>
  </tbody>
</table>