Styling Tables
- CSS provides many attributes to greatly enhance the look of a plain HTML table.
-
We can change the border pattern, merge the borders as well as highlight table text
Styling Border
-
To specify table borders in CSS, we use the border property.
-
There are multiple options for border:
-
border-style
- border-width
- border-color
- border individual sides
- border shorthand
“border-style”
-
none
-
dotted
-
dashed
-
solid
-
double
-
groove
-
ridge
-
inset
-
outset
“border-width”
-
The border-width property is used to set the width of the border.
-
The width is set in pixels, or by using one of the three pre-defined values:
-
thin
-
medium
-
thick.
“border-color”
-
The border-color property is used to set the color of the border.
-
The color can be set by:
-
name
-
rgb
-
hex
It can also be set to transparent
Individual borders
In CSS it is possible to specify different borders for different sides using:
-
border-top-style
-
border-right-style
-
border-bottom-style
-
border-left-style