### Default Table
To create an HTML table with Pure CSS styling, use the `` component. This component adds padding and borders to table elements, and emphasizes the header.
```js
| Title |
Title |
Title |
| Hello Table |
Hello Table |
Hello Table |
| Hello Table |
Hello Table |
Hello Table |
```
### Bordered Table
To add horizontal and vertical borders to all cells, add the bordered prop to the `` element.
```js
| Title |
Title |
Title |
| Hello Table |
Hello Table |
Hello Table |
| Hello Table |
Hello Table |
Hello Table |
```
### Table with Horizontal Borders
If you prefer horizontal lines only, add the horizontal prop to the `` element.
```js
| Title |
Title |
Title |
| Hello Table |
Hello Table |
Hello Table |
| Hello Table |
Hello Table |
Hello Table |
```
### Striped Table
Large tables are easier to parse visually if rows are easily distinguishable. Adding the `.odd` class name to every other `` element changes the background of the row and creates a zebra-styled effect.
Note: In browsers which support the CSS3 nth-child pseudo selector a simpler approach can be used. The striped prop can be added to the `` component and the zebra-styled striping will happen automatically. This approach will not work in Internet Explorer 8 or lower.
```js
| Title |
Title |
Title |
| Hello Table |
Hello Table |
Hello Table |
| Hello Table |
Hello Table |
Hello Table |
```