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



Color Picker

List of color names supported by all browser »



Character Code

List of character codes to display special character »



Language Code

List of all language supported by all browser »



Country Code

List of Country code supported by all browser »

Latest Updates

PHP Introduction

How to Run a PHP program in Xampp?

How can I create a phpinfo.php page?

How to Define a Variable in PHP

PHP Echo and Print Statements

Working with PHP Operators

Understanding the PHP Data Types

How to Write Comments in PHP

How to Define a Constant in PHP

PHP if...else...elseif Statements