CSS Tables - Styling and Formatting Tables with CSS

In CSS, tables can be styled to enhance their appearance and make them more visually appealing. Tables consist of elements such as <table>, <thead>, <tbody>, <tr>, <th>, and <td>. CSS allows you to style each of these elements, adjusting borders, spacing, background colors, and more.

Example

table, th, td {

border: 1px solid;

}

Try it yourself

Border collapse:

The border-collapse determines whether table borders are collapsed into a single border or separated.

Syntax:

border-collapse : collapse | separate;

Example

table{

width:100%;

border-collapse: collapse;

}

Try it yourself

Border spacing:

The border-spacing specifies the spacing between borders when border-collapse: separate is used.

Syntax:

border-spacing : <value>;

Value: Can be specified in various units such as pixels (px), percentages (%), ems (em), rems (rem), viewport units (vw, vh), or keywords like auto and inherit.

Example

table{

width:100%;

border-collapse: seperate;

border-spacing: 20px;

}

Try it yourself

Text align:

The text-align aligns the content of table cells. Default for <th> is center, and for <td>, it's left.

Syntax:

text-align : left | right | center | justify;

Example

td{

text-align : center;

}

Try it yourself

Vertical align:

The vertical-align aligns the content vertically within table cells.

Syntax:

vertical-align : top | bottom | center;

Example

td {

background-color: #f9f9f9;

height : 50px;

vertical-align: bottom;

}

Try it yourself

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.