Skip to content

ExpressiveCSS

Browse documentation

Table

Organize data with a few utility classes on a standard HTML table.

View as Markdown

Use a table to organize a lot of data. A few utility classes change how it looks.

Name Item Name Item Price
Alvin Eclair $0.87
Alan Jellybean $3.76
Jonathan Lollipop $7.00
Shannon KitKat $9.99
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Item Name</th>
      <th>Item Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alvin</td>
      <td>Eclair</td>
      <td>$0.87</td>
    </tr>
    <tr>
      <td>Alan</td>
      <td>Jellybean</td>
      <td>$3.76</td>
    </tr>
    <tr>
      <td>Jonathan</td>
      <td>Lollipop</td>
      <td>$7.00</td>
    </tr>
  </tbody>
</table>

Striped table

Add class="striped" to the table tag for a striped table.

Name Item Name Item Price
Alvin Eclair $0.87
Alan Jellybean $3.76
Jonathan Lollipop $7.00
Shannon KitKat $9.99

Highlight table

Add class="highlight" to the table tag for a highlight table.

Name Item Name Item Price
Alvin Eclair $0.87
Alan Jellybean $3.76
Jonathan Lollipop $7.00
Shannon KitKat $9.99

Centered table

Add class="centered" to the table tag to center-align all the text in the table.

Name Item Name Item Price
Alvin Eclair $0.87
Alan Jellybean $3.76
Jonathan Lollipop $7.00
Shannon KitKat $9.99

Responsive table

Add class="responsive-table" to the table tag to make the table horizontally scrollable on smaller screen widths.

Name Item Name Item Price
Alvin Eclair $0.87
Alan Jellybean $3.76
Jonathan Lollipop $7.00
Shannon KitKat $9.99

No matching pages

  • Source color

    The seed every generated ramp derives from. Pick one and browse the docs — the whole theme follows. Error does not: it is a fixed hue.

    Default source: Mist Iris.

    ExpressiveCSS presets: Lagoon, Harbor, Breeze, Cobalt, Iris.

    Bold

    Soft

    Mist

    Glow