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-
It is the most basic class which gives some padding and borders.
It draws a table with a border.
It draws a table with only horizontal lines.
It draws a stripped table.
Let's see each class' use one by one.
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.
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.