Table variations

Tables are given a default style using minimal markup. Be sure to include <thead> and <tbody> sections to distinguish between headings and content.

Tables are evil?

One of the biggest myths of building a site with web standards is that you should never use a table. While tables rightfully get a bad rep for creating complex, byzantine layouts, they are a perfect solution for marking up tabular data where lookup and comparison is important. A good rule of thumb is to use tables when the information would also make sense to record in a spreadsheet.

table
Name Nickname
1 Charles Barkley The Round Mound of Rebound
2 Kobe Bryant Kobe Wan Kenobi
3 Tim Duncan Old Man Riverwalk
4 Shaquille O'Neal Shaq Fu
5 Yao Ming The Great Wall of Yao
table.prose

Adding the .prose class to tables provides additional breathing space for rows, columns and cells.

Name Nickname
1 Charles Barkley The Round Mound of Rebound
2 Kobe Bryant Kobe Wan Kenobi
3 Tim Duncan Old Man Riverwalk
4 Shaquille O'Neal Shaq Fu
5 Yao Ming The Great Wall of Yao
table.prose.fixed

Adding a .fixed class creates columns of equal width.

Name Nickname
1 Charles Barkley The Round Mound of Rebound
2 Kobe Bryant Kobe Wan Kenobi
3 Tim Duncan Old Man Riverwalk
4 Shaquille O'Neal Shaq Fu
5 Yao Ming The Great Wall of Yao
<table>
  <thead>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Nickname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Charles Barkley</td>
      <td>The Round Mound of Rebound</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Kobe Bryant</td>
      <td>Kobe Wan Kenobi</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Tim Duncan</td>
      <td>Old Man Riverwalk</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Shaquille O'Neal</td>
      <td>Shaq Fu</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Yao Ming</td>
      <td>The Great Wall of Yao</td>
    </tr>
  </tbody>
</table>
Made with in Norcross by the UX Team.