Home Advertise with us Forum Articles Sitemap Contact
Logo  

CSS Tables

Though HTML allows styling of tables, this styling can be greatly improved using CSS. Tables are largely associated with attributes like, borders, cellspacing & cellpadding. With the help of CSS, tables can be styled with respect to font, border, text, color & background.

Table Borders – The table border property is used to specify borders in tables. This property causes a double border to be created for the table.

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


Table Collapse Borders – The border collapse property is used to specify whether the borders are collapsed into a single border or is it separated.

Example:

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


Table Width & Height – These properties help set the width & height of the table.

Example: table {width:100%;} th {height:25px;}


Table Text Alignment – The alignment of text in the table is set with the text align property (left, right, center) & the vertical align property (top, bottom, middle).

Example: td {text-align:left;} or td {height:50px;vertical-align:top;}


Table Padding – The padding property is used on the td & th elements to control the space between the table text & border.

Example: td {padding:15px;}


Table Color – This property is used to specify the color of borders along with the text & background color of th elements.

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