CSS TABLES

Table helps us to present data relations in an effective manner.

Tables created in an HTML document can be styled using CSS table properties.

CSS table style

Using CSS we can set following properties to the table :

1. border-collapse
2. cell-spanning
3. Table Caption
4. Text align
5. Background

1.) Border collapse

To create a collapsed border table we need to use CSS property border-collapse.

2).Cell spanning multiple rows or column

Cells of tables span only one row and one column but we can increase their spanning to multiple rows or columns.

For spanning multiple rows or columns we can use the attribute rowspan for multiple row span and colspan for multiple column span.

As we can see in the example below:

3.) Table Caption

We can add caption to any table. Caption provide basic information about the table.

For creating a caption to the table <caption> tag is used. This tag must be immediately used after the table tag.

To style caption we create classes and use caption-side property.

4.) Text alignment in table

In the grids of row and column texts can be aligned horizontally and vertically.

To align text horizontally use text-align property.

To align text vertically use vertical-align property.

5.) Background color in table

Using CSS we can add background color to the table element.In example we have created a zebra effect using nth.child() and background-color property.