cu.css

Tables

Tables are handy for visualising and making connections between different types of structured data. Use all the usual elements: <table>, <thead>, <tr>, <th>, <tbody>, <td> and <caption>.

Star Wars characters, their home worlds and preferred weapon.
Character Homeworld Weapon
Luke Tatooine Lightsaber
Han Corellia Blaster
Leia Alderaan Blaster
Obi-Wan Stewjon Lightsaber
Yoda Dagobah Lightsaber
<table>
  <caption>
    <small>Star Wars characters and their home worlds</small>
  </caption>
  <thead>
    <tr>
      <th>Character</th>
      <th>Homeworld</th>
      <th>Weapon</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Luke</td>
      <td>Tatooine</td>
      <td>Lightsaber</td>
    </tr>
    <tr>
      <td>Han</td>
      <td>Corellia</td>
      <td>Blaster</td>
    </tr>
    <tr>
      <td>Leia</td>
      <td>Alderaan</td>
      <td>Blaster</td>
    </tr>
    <tr>
      <td>Obi-Wan</td>
      <td>Stewjon</td>
      <td>Lightsaber</td>
    </tr>
    <tr>
      <td>Yoda</td>
      <td>Dagobah</td>
      <td>Lightsaber</td>
    </tr>
  </tbody>
</table>