Table

A standard table

Variants

Basic table

A basic data table

Horizontal table

A basic data table, but with row headers

Compact table

A basic data table, but compact

  • 

    <table>
  <tr>
    <th> column </th>
    <th> column </th>
    <th> column </th>
  </tr>
  <tr>
    <td> data </td>
    <td> data </td>
    <td> data </td>
  </tr>
  <tr>
    <td> data </td>
    <td> data </td>
    <td> data </td>
  </tr>
</table>
    

  • 

    <table>
  <tr>
    <th> header </th>
    <td> data </td>
    <td> data </td>
  </tr>
  <tr>
    <th> header </th>
    <td> data </td>
    <td> data </td>
  </tr>
  <tr>
    <th> header </th>
    <td> data </td>
    <td> data </td>
  </tr>
</table>
    

  • 

    <table class="compact">
  <tr>
    <th> header </th>
    <td> data </td>
    <td> data </td>
  </tr>
  <tr>
    <th> header </th>
    <td> data </td>
    <td> data </td>
  </tr>
  <tr>
    <th> header </th>
    <td> data </td>
    <td> data </td>
  </tr>
</table>

Usage

When to use

Use <table> when you need to display data in a table format

Class Name Description
compact

Adding this class to a table reduces cell padding and gives borders between all cells