CSS Table

CSS table properties are used to style the HTML table. There are some common and broadly used table properties:

border
border-collapse
width and height
padding
text-align
color and background-color

The border Property

To specify the border for table, th and td tag border property is used.

Example:

table, th, td {
border: 1px solid #000;
}

Run Example

The border-collapse Property

To collapse all the border into a border border-collapse property is used.

Example:

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

Run Example

The width and height Property

To set the width and height of a table width and height properties are used. The values can be in px, percentage(%), em etc.

Example:

table {
width: 20%;
height: 200px;
}

Run Example

The padding Property

To set the space between the content and the border padding property is used. The values can be in px, percentage(%), em etc.

Example:

th, td {
padding: 20px;
}

Run Example

The text-align Property

To set the horizontal alignment of the content of a table the text-align property is used. The values can be right, left or center.

Example:

th, td {
text-align: center;
}

Run Example

The color and background-color Property

To set the color and background-color of a table color and background-color properties are used. The values can be in color name, Hex code, RGB value etc.

Example:

th {
color: #fff;
background-color: blue;
}

Run Example

CSS Tutorials

CSS Advance

CSS Table

The border Property

Example:

The border-collapse Property

Example:

The width and height Property

Example:

The padding Property

Example:

The text-align Property

Example:

The color and background-color Property

Example:

Recommended Posts: