Material Design Lite
Banner
Bottom sheet
Date picker
Expansion Panel
Image list
Grid list
Menu
Ripple
Select
Stepper
Sort header
Tree
View on Material.io

Preview

# Make Model Year
1 Honda Accord 2009
2 Toyota Camry 2012
3 Hyundai Elantra 2010

Installation

To import just the component styles, copy the following into your project’s styles.css file:

/* Core Styles */
@import url('https://kherrick.github.io/material-design-lite/css/core.css');
/* Material Icons */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
/* Roboto Font */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
/* Component Styles */
@import url('https://kherrick.github.io/material-design-lite/css/components/table/style.css');

Usage

Start with a table element and add the table class name:

<table class="table"></table>

The table class name is implicit when used with the table element.

Table Head

Add a thead element with the table-head class name:

<table class="table">
  <thead class="table-head"></thead>
</table>

The table-head class name is implicit when used with the thead element.

Table Rows

Add a tr element with the table-row class name:

<table class="table">
  <thead class="table-head">
    <tr class="table-row"></tr>
  </thead>
</table>

The table-row class name is implicit when used with the tr element.

Table Cells

Add a th element with the table-cell class name:

<table class="table">
  <thead class="table-head">
    <tr class="table-row">
      <th class="table-cell"></th>
    </tr>
  </thead>
</table>

The table-cell class name is implicit when used with the th element.

Table Body

Add a tbody element with the table-body class name:

<table class="table">
  <thead class="table-head">
    <tr class="table-row">
      <th class="table-cell"></th>
    </tr>
  </thead>
  <tbody class="table-body"></tbody>
</table>

The table-body class name is implicit when used with the tbody element.

Table Rows

Add a tr element with the table-row class name:

<table class="table">
  <thead class="table-head">
    <tr class="table-row">
      <th class="table-cell"></th>
    </tr>
  </thead>
  <tbody class="table-body">
    <tr class="table-row"></tr>
  </tbody>
</table>

The table-row class name is implicit when used with the tr element.

Table Cells

Add a td element with the table-cell class name:

<table class="table">
  <thead class="table-head">
    <tr class="table-row">
      <th class="table-cell"></th>
    </tr>
  </thead>
  <tbody class="table-body">
    <tr class="table-row">
      <td class="table-cell"></td>
    </tr>
  </tbody>
</table>

The table-cell class name is implicit when used with the td element.

Variants

Default

Default table styling.

# Make Model Year
1 Honda Accord 2009
2 Toyota Camry 2012
3 Hyundai Elantra 2010
<table>
    <thead>
      <tr>
        <th>#</th>
        <th>Make</th>
        <th>Model</th>
        <th>Year</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Honda</td>
        <td>Accord</td>
        <td>2009</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Toyota</td>
        <td>Camry</td>
        <td>2012</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Hyundai</td>
        <td>Elantra</td>
        <td>2010</td>
      </tr>
    </tbody>
  </table>

Zebra

Zebra table styling.

# Make Model Year
1 Honda Accord 2009
2 Toyota Camry 2012
3 Hyundai Elantra 2010
<table class="zebra">
  <thead>
    <tr>
      <th>#</th>
      <th>Make</th>
      <th>Model</th>
      <th>Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Honda</td>
      <td>Accord</td>
      <td>2009</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Toyota</td>
      <td>Camry</td>
      <td>2012</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Hyundai</td>
      <td>Elantra</td>
      <td>2010</td>
    </tr>
  </tbody>
</table>

Activatable

To make a table row activatable, add the activatable class name to the table element.

# Make Model Year
1 Honda Accord 2009
2 Toyota Camry 2012
3 Hyundai Elantra 2010
<table class="activatable">
  <thead>
    <tr>
      <th>#</th>
      <th>Make</th>
      <th>Model</th>
      <th>Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Honda</td>
      <td>Accord</td>
      <td>2009</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Toyota</td>
      <td>Camry</td>
      <td>2012</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Hyundai</td>
      <td>Elantra</td>
      <td>2010</td>
    </tr>
  </tbody>
</table>

Design Tokens

TokenDescriptionDefault
--md-sys-comp-table-border-colorThe outline color of the table

Resources

Playground

See the Pen Data Table by Rody Davis (@kherrick ) on CodePen.