Pure CSS Table
Pure CSS table is used to represent data in tabular form. ?Pure CSS provides different predefined table classes that are used over pure tables to create an attractive table layout.
Pure CSS tables have followings predefined classes that are used to create different table styles.
.pure-table-It adds padding and borders to the table elements & also emphasizes the headers..pure-table-bordered- It is used to create bordered table..pure-table-horizontal- It is used to add a horizontal line in the table only..pure-table-striped- It is used to make pure table-striped. If the browser supports CSS3 then it will be shown stripped table..pure-table-odd-To create a zebra-styled table, simply add the.pure-table-oddclass to every other<tr>element.
Default Table
If you want to create a default table in Pure CSS, add the pure-table class to the table element. This class adds padding and borders to <table> elements, and also highlights the table header.
General Syntax
<table class = "pure-table"></table>
Source Code
<table class="pure-table">
<thead>
<tr>
<th>Name</th>
<th>Job</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>Web Designer</td>
</tr>
<tr></tr>
<tr>
<td>Smith Jain</td>
<td>Graphics Designer</td>
</tr>
<tr></tr>
</tbody>
</table>
Source Code: Output
| Name | Job |
|---|---|
| Smith | Web Designer |
| Smith Jain | Graphics Designer |
Bordered Table
This table has horizontal and vertical borders for all the cells. Add the pure-table-bordered class, followed by the pure-table classes, to the table element to create a bordered <table> with pure CSS.
General Syntax
<table class="pure-table pure-table-bordered"></table>
Source Code
<table class="pure-table pure-table-bordered">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Smith</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane Doe</td>
<td>26</td>
</tr>
<tr>
<td>3</td>
<td>John Smith</td>
<td>32</td>
</tr>
</tbody>
</table>
Source Code: Output
| # | Name | Age |
|---|---|---|
| 1 | Smith | 25 |
| 2 | Jane Doe | 26 |
| 3 | John Smith | 32 |
Table with Horizontal Borders
This table has only horizontal line. It does not contain any vertical lines. If you want to create a table with only horizontal lines, then add the pure-table-horizontal class to the <table> element base class.
General Syntax
<table class="pure-table pure-table-horizontal"></table>
Source Code
<table class="pure-table pure-table-horizontal">
<thead>
<tr>
<th>Name</th>
<th>Job</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>Web Designer</td>
</tr>
<tr>
<td>Smith Jain</td>
<td>Graphics Designer</td>
</tr>
</tbody>
</table>
Source Code: Output
| Name | Job |
|---|---|
| Smith | Web Designer |
| Smith Jain | Graphics Designer |
Striped Table
To create a pure CSS striped table, simply add the pure-table-odd class to the <tr> tag alternately. It changes the background of the row and creates a zebra-style effect.
General Syntax
<table class="pure-table">
<tr class="pure-table-odd"></tr>
</table>
Source Code
<table class="pure-table">
<thead>
<tr>
<th>Name</th>
<th>Job</th>
</tr>
</thead>
<tbody>
<tr class="pure-table-odd">
<td>Smith</td>
<td>Web Designer</td>
</tr>
<tr>
<td>Smith Jain</td>
<td>Graphics Designer</td>
</tr>
<tr class="pure-table-odd">
<td>Abhishek Verma</td>
<td>App Designer</td>
</tr>
</tbody>
</table>
Source Code: Output
| Name | Job |
|---|---|
| Smith | Web Designer |
| Smith Jain | Graphics Designer |
| Abhishek Verma | App Designer |
Web Tutorials
