We can change the look of a table using the following CSS properties
By property border can change the thickness, size and color of a table edge, in a column or row of the table.
Example CSS table border:
To avoid double edges which are produced in the previous example, we use the property border-collapse.
TABLE WIDTH HEIGHT
By property width defines the width of the table. It can be expressed as a percentage or in pixels.
Example, if you want the table spans the width available
Example, if you want the table occupies a width of 50 pixels
The same goes for the top of the table, in this case, have the property height.
The properties width and height are also used to define the width and height of a row or column.
For example, if we want the top row (header) has a height greater than usual, we:
TABLE TEXT ALIGNMENT
The text in a table can be aligned in two ways:
- Horizontally (left, center, right) using the property text-align
- Vertically (top, middle, bottom) by vertical-align.
Example, to align the text to the right and below:
The property padding is used to specify the spacing between the text and the edges of the table.
For example, to define a spacing of 12 pixels between text and the edge
In a table, you can define the following colors.
Property "background-color" to specify the background color
Property "color" to specify the text color
Property "border" to specify the border color
For example, if we define a table with borders of blue, green background and white text, then define the following CSS: