Google AMP Tables

Google AMP Tables · Default

The tables are just your standard table element with thead, tbody, tr, th and td elements within.

#	First	Last	Handle
1	AMP	CSS	Framework
2	AMP	CSS	Library

<table>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>AMP</td>
      <td>CSS</td>
      <td>Framework</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>AMP</td>
      <td>CSS</td>
      <td>Library</td>
    </tr>
  </tbody>
</table>

Google AMP Tables · Striped

Use .striped to add striping to any table row within the <tbody>.

#	First	Last	Handle
1	AMP	CSS	Framework
2	AMP	CSS	Library

<table class="striped">
  ...
</table>

Google AMP Tables · Bordered

Add .bordered for tables with borders on all sides of the table and cells.

#	First	Last	Handle
1	AMP	CSS	Framework
2	AMP	CSS	Library

<table class="bordered">
  ...
</table>

Google AMP Tables · Borderless

Add .borderless for tables without borders.

#	First	Last	Handle
1	AMP	CSS	Framework
2	AMP	CSS	Library

<table class="borderless">
  ...
</table>

Google AMP Tables · Hoverable (rows)

Add .hover to enable a hover state on table rows within a <tbody>.

#	First	Last	Handle
1	AMP	CSS	Framework
2	AMP	CSS	Library

<table class="hover">
  ...
</table>

Google AMP Tables · Responsive

Across every breakpoint, use .responsive for horizontally scrolling tables.

#	1	2	3	4	5	6	7	8	9
1	1	2	3	4	5	6	7	8	9
2	1	2	3	4	5	6	7	8	9

<div class="table-responsive">
  <table>
    ...
  </table>
</div>

Google AMP Tables · Small

Add .small to make tables more compact by cutting cell padding in half.

#	First	Last	Handle
1	AMP	CSS	Framework
2	AMP	CSS	Library

<table class="small">
  ...
</table>

Google AMP Tables Library