Advertisement

Advertisement


Pure.CSS Table

An HTML table, as you all know, is very dull looking and no one nowadays use those directly in the websites without stylizing. In Pure CSS, the styling of the tables is very easy and gives the user a variety to style the table. There are many predefined classes which gives a lot of variety to the users. Have a look at the classes below-

Class Name Description
pure-table It is the most basic class which gives some padding and borders.
pure-table-bordered It draws a table with a border.
pure-table-horizontal It draws a table with only horizontal lines.
pure-table-odd It draws a stripped table.
Let's see each class' use one by one.

Default Table

The pure-table class adds padding and borders to table elements, and also style the header. See the changes made into table by this class in the output shown below.


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Pure.CSS Default table </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css"> </head> <style> table{ margin:10px; } </style> <body> <table class="pure-table"> <thead> <tr> <th>#</th> <th>Brand</th> <th>Model</th> <th>Year</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Samsung</td> <td>Galaxy S10 Plus</td> <td>2019</td> </tr> <tr> <td>2</td> <td>OnePlus</td> <td>7 Pro</td> <td>2012</td> </tr> <tr> <td>3</td> <td>Xiaomi</td> <td>MIX 3</td> <td>2018</td> </tr> </tbody> </table> </body> </html>

Output

Pure.CSS Default table
# Brand Model Year
1 Samsung Galaxy S10 Plus 2019
2 OnePlus 7 Pro 2019
3 Xiaomi MIX 3 2018

Pure.CSS Bordered Table

A bordered table is the one where each cell is bordered from all sides. So in order to make a table bordered you have to use the class pure-table-bordered. It will add horizontal and vertical borders to all cells. See the output and compare it with the output above.


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Pure.CSS Bordered table </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css"> </head> <style> table{ margin:10px; } </style> <body> <table class="pure-table pure-table-bordered"> <thead> <tr> <th>#</th> <th>Smartphone</th> <th>Model</th> <th>Year</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Samsung</td> <td>A80</td> <td>2019</td> </tr> <tr> <td>2</td> <td>Realme</td> <td>X</td> <td>2019</td> </tr> <tr> <td>3</td> <td>Oppo</td> <td>Reno 10X Zoom</td> <td>2019</td> </tr> </tbody> </table> </body> </html>

Output

Pure.CSS Bordered table
# Smartphone Model Year
1 Samsung A80 2019
2 Realme X 2019
3 Oppo Reno 10X Zoom 2019

Pure.CSS Table with Horizontal Borders

These types of tables only have horizontal lines visible and the vertical lines gets disappeared. The class pure-table-horizontal is used to create a table having horizontal only lines.

Note: Don't forget to use all the classes along with the default class pure-table.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Pure.CSS Horizontal Table </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css"> </head> <style> table{ margin:10px; } </style> <body> <table class="pure-table pure-table-horizontal"> <thead> <tr> <th>#</th> <th>Laptop</th> <th>Model</th> <th>Year</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Dell</td> <td>XPS 13</td> <td>2019</td> </tr> <tr> <td>2</td> <td>Asus</td> <td>Zenbook</td> <td>2018</td> </tr> <tr> <td>3</td> <td>Microsoft</td> <td>Surface Pro</td> <td>2019</td> </tr> </tbody> </table> </body> </html>

Output

Pure.CSS Horizontal Table
# Laptop Model Year
1 Dell XPS 13 2019
2 Asus Zenbook 2018
3 Microsoft Surface Pro 2019

Pure.CSS Stripped Tables

The stripped table looks like a zebra styled background, it colors every other row in a table. The class pure-table-odd is used to make a stripped table. Again, don't forget to use all the class along with the default class pure-table.

Note : In browsers which support the CSS3 nth-child pseudo selector a simpler approach can be used. The pure-table-striped classname can be added to the <table> element and the zebra-styled striping will happen automatically. This approach will not work in Internet Explorer 8 or lower.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Pure.CSS Triped Table </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css"> </head> <style> table{ margin:10px; } </style> <body> <table class="pure-table"> <thead> <tr> <th>#</th> <th>Website</th> <th>Services</th> <th>Paid/Free</th> </tr> </thead> <tbody> <tr class="pure-table-odd"> <td>1</td> <td>CodeRepublics</td> <td>Free Web Tutorials Educations</td> <td>Free</td> </tr> <tr> <td>2</td> <td>Facebook</td> <td>Social Service</td> <td>Free</td> </tr> <tr class="pure-table-odd"> <td>3</td> <td>YouTube</td> <td>Entertainment</td> <td>Free</td> </tr> </tbody> </table> </body> </html>

Output

Pure.CSS Triped Table
# Website Services Paid/Free
1 CodeRepublics Free Web Tutorials Educations Free
2 Facebook Social Service Free
3 YouTube Entertainment Free









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.