Tables

Tables should only be used to display tabular data! They should not be used for layout, or creating text columns. Before creating a table, make sure that you are working with tabular data. Tables are set to expand and contract with the page. They should not require over 500px in width, or they could break the overall layout of the page.

Available Styles

The default table displays each cell with a simple gray border with a small amount of padding from adjacent cells. No width/height needs to be applied. Table rows should be divided by including <thead> and <tbody>. Individual cells that are defined using <th> will be styled differently. View the code in action.

<table>
    <thead>
      <tr><th>column head1</th>
          <th>column head2</th>
          <th>column head3</th>
      </tr>  						
   </thead>  						
   <tbody>  							
      <tr><th>row head A</th>
          <td>data 2a</td>  								
          <td>data 3a</td></tr>  							
      <tr><th>row head B</th>  								
          <td>data 2b</td>
          <td>data 3b</td></tr>  						
   </tbody>
</table>