CSS Tutorial

Styling Tables In CSS

CSS provides several properties that allow us to control the layout and presentation of the table elements.
We can change the border pattern, merge the borders as well as highlight table text

Adding/Styling Border

To specify table borders in CSS, we use the border property.
There are multiple options for border and they are:
1. border-style
The border-style property specifies what kind of border to display.
The options available for border-style are:
1. none
2. dotted
3. dashed
4. solid
5. double
6. groove
7. ridge
8. inset
9. outset
2. border-width
The border-width property is used to set the width of the border.
Normally we set the width in pixels, or by using one of the three pre-defined values: 1. thin
2. medium
3. thick
3. border-color
The border-color property is used to set the color of the border.
The color can be set by:
>name
>rgb()
>hex
4. border individual sides
In CSS it is possible to specify different borders for different sides using:
1. border-top-style
2. border-right-style
3. border-bottom-style
4. border-left-style
5. border shorthand To shorten the code, it is also possible to specify all the individual border properties in one property.
This is called a shorthand property.
The border property is a shorthand for the following individual border properties:
border-width
border-style (required)
border-color

Collapsing Borders

There are two distinct models for setting borders on table cells in CSS: separate and collapse.
In the separate border model, which is the default, each table cell has its own distinct border, whereas in the collapsed border model, adjacent table cells share a common border.
We can set the border model for an HTML table by using the CSS property called border-collapse .
Example:

table
{
 border-collapse: collapse;
}

Adjusting Space Inside Table

By default, the browser creates the table cells just large enough to contain the data in the cells.
To add more space between the table cell contents and the cell borders, we can simply use the CSS property called padding .
Example:

th,td
{
padding: 15px;
}
    

This will style the table by adding a gap of 15px between cell contents and its border

Setting Table Width And Height

By default, a table will render just wide and tall enough to contain all of its contents.
However, we can also set the width and height of the table as well as its cells explicitly using the width and height property in CSS.
Example:

table
{
width: 100%;
}
th
{
height: 40px;
}

    

This will style the table by setting the width of the table to 100%, and the height of the table header cells to 40px.

Colors In The Table

To control color in the table we have 3 properties:
1. border-color
2. background-color
3. color

Controlling The Table Caption

We can set the vertical position of a table caption using the CSS property caption-side.
The caption can be placed either at the top or bottom of the table
Example:

caption
 {
caption-side: bottom;
 }

    

This will style the table by aligning the caption at the bottom

Creating Zebra Striped Table

Setting different background colors for alternate rows is a popular technique to improve the readability of tables and is commonly known as zebra-striping a table.
We can easily achieve this effect by using the CSS pseudoclass selector called :nth-child().
The :nth-child() pseudo-class select elements based on their position in a group of siblings.
It can take a number or keywords which are even or odd.
Example:

tr:nth-child(odd)
{
 background-color: #f2f2f2;
 }

This will style the table by setting the background color of every odd row of the table with gray color