CSS TABLE

We can change the look of a table using the following CSS properties

TABLE BORDERS

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:

<style type="text/css"> table, th, td { border: 1px solid black; } </style>

Borders Collapse

To avoid double edges which are produced in the previous example, we use the property border-collapse.

Example:

table { border-collapse:collapse; } table,th, td { border: 1px solid black; }

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

table { width:100%; }

Example, if you want the table occupies a width of 50 pixels

table { width: 50px; }

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:

th { height:50px; }

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:

td { text-align:right; vertical-align:bottom; }

TABLE PADDING

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

td { padding:12px; }

TABLE COLOR

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:

table, td, th { border:1px solid blue; } th { background-color:green; color:white; }