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.
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.
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.
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.