Google AMP Tables Library

Documentation and examples for css tables: Google AMP Tables Library.

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>

Bootstrap tables documentation

Read more
We use cookies to improve your experience on our website. By browsing this website, you agree to our use of cookies.