WS WhereIsStuff
Tutorial Guides
Log In Sign Up

Advertisement

Google Ad Slot: content-top

CSS Table

Previous Next

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