Tables

Tables

Column/row data information—like Excel or Numbers

Name	Period	Discovery
Stegosaurus	Late Jurassic	1877
Apatosaurus	Jurassic Period	1877
Total	2 dinosaurs

Building tables

Define a row
Split the row into chunks (cells)

Every row must have the same number of cells

Cells can be merged to make larger cells—but must still add up

HTML

<table>                 <!-- Everything goes inside this element -->
  <caption>             <!-- For accessibility: a short description, like `alt` -->

  <thead>               <!-- Groups the “header” rows: column labels, etc. -->
  <tbody>               <!-- Groups the “main body” rows: actual data -->
  <tfoot>               <!-- Groups the “footer” rows: totals, etc. -->

    <tr>                <!-- Defines a row of data in the table -->

      <th>              <!-- Defines a column/row heading -->
      <td>              <!-- Defines a piece of data in the table -->

      <th scope="col">  <!-- `scope` defines the heading’s direction -->
      <td rowspan="3">  <!-- `rowspan` merges a cell vertically, across rows -->
      <td colspan="2">  <!-- `colspan` merges a cell horizontally, across cells -->

HTML

<table>
  <thead>
    <tr>
      <th scope="col">Resource</th>
      <th scope="col">Cost</th>
      <th scope="col">Available</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Wood</th>
      <td>2 moneys</td>
      <td>4</td>
    </tr>
    <tr>
      <th>Wheat</th>
      <td>1 money</td>
      <td>6</td>
    </tr>
  </tbody>
</table>

Tables

Building tables

Every row must have the same number of cells

Videos & tutorials