# Table

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

## Introduction

Tables are a nice way to organize a lot of data. We provide a few utility classes to help you style your table as easily as possible.

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