CSS - Tables

Table Borders

The look of an HTML table can be greatly improved with CSS:

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Berglunds snabbk�p	Christina Berglund	Sweden
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
K�niglich Essen	Philip Cramer	Germany
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy
North/South	Simon Crowther	UK
Paris sp�cialit�s	Marie Bertrand	France
The Big Cheese	Liz Nixon	USA
Vaffeljernet	Palle Ibsen	Denmark

To specify table borders in CSS, use the border property.

The example below specifies a black border for table, th, and td elements:

Collapse Border

The border-collapse property sets whether the table borders are collapsed into a single border or separated:

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

Width and Height

Width and height of a table is defined by the width and height properties.

The example below sets the width of the table to 100%, and the height of the th elements to 50px:

Example

table
{
width:100%;
}
th
{
height:50px;
}

Text Alignment

The text in a table is aligned with the text-align and vertical-align properties.

The text-align property sets the horizontal alignment, like left, right, or center:

Example

td
{
text-align:right;
}

The vertical-align property sets the vertical alignment, like top, bottom, or middle:

td
{
height:50px;
vertical-align:bottom;
}

Padding

To control the space between the border and content in a table, use the padding property on td and th elements:

Example

td
{
padding:15px;
}

Color

The example below specifies the color of the borders, and the text and background color of th elements:

Example

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

Tutorial

References

HTML & CSS References
HTML References
HTML 5.0 References
CSS References
CSS 3 References
Browser Scripting Ref.
Javascript References
HTML DOM References
Server Scripting Ref.
PHP References

CSS - Tables

Table Borders

Collapse Border

Width and Height

Text Alignment

Example

Padding

Example

Color

Example

Tutorial

References

Other Tutorials

Links

About Us

Tools

Accounts