A quick introduction to HTML table syntax and styling.

Go fullscreen: ⌃⌥F



Column/row data information—like Excel or Numbers

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

Building tables

  1. Define a row

  2. 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

<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 -->
      <th scope="col">Resource</th>
      <th scope="col">Cost</th>
      <th scope="col">Available</th>
      <td>2 moneys</td>
      <td>1 money</td>

Videos & tutorials


A quick introduction to HTML table syntax and styling.