Pure CSS table is used to represent data in tabular form. Pure CSS provides a different predefined class for the table that will be very helpful for creating an attractive table layout.
Followings are the predefined table classes that are used to create different table styles.These classes are:
.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 create a striped table. 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-odd
class to every other <tr>
element. To create Pure CSS, default table add .pure-table
class to the <table>
element base class.
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 |
To create bordered table in Pure CSS, simply add .pure-table-bordered
class to the <table>
element base class.
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 |
If you want to create a table with horizontal lines only, then add the.pure-table-horizontal
class to the
<table>
element base class.
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 |
To create a pure CSS striped table, simply add the .pure-table-odd
to the <tr>
element base class alternately.
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 |