Tables

Table markup

You should use semantic HTML when marking up a data table, as in the following example.

Code:

<table>
 <thead>
  <tr>
   <th></th>
   <th scope="col">Header</th>
   <th scope="col">Header</th>
   <th scope="col">Header</th>
  </tr>
 </thead>
 <tfoot>
  <tr>
   <td></td>
   <td>Footer</td>
   <td>Footer</td>
   <td>Footer</td>
  </tr>
 </tfoot>
 <tbody>
  <tr>
   <th scope="row">Header row</th>
   <td>Table cell</td>
   <td>Table cell</td>
   <td>Table cell</td>
  </tr>
  <tr>
   <th scope="row">Header row</th>
   <td>Table cell</td>
   <td>Table cell</td>
   <td>Table cell</td>
  </tr>
  <tr>
   <th scope="row">Header row</th>
   <td>Table cell</td>
   <td>Table cell</td>
   <td>Table cell</td>
  </tr>
 </tbody>
</table>

Default style

Using the markup example from the section above will result in a table using the default Ubuntu style.

In smaller screen sizes, when the table is wide it becomes scrollable horizontally.

Example:

Header Header Header
Footer Footer Footer
Header row Table cell Table cell Table cell
Header row Table cell Table cell Table cell
Header row Table cell Table cell Table cell