Styling-tables-with-CSS- W3schools.in, article

Monday 21 May 2012

Styling-tables-with-CSS

From w3schools.in

Example:

Table Borders

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

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

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

Notice that the table in the example above has double borders. This is because both the table, th, and td elements have separate borders.

To display a single border for the table, use the border-collapse property.

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

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

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:

table
{
	width:100%;
}

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:

td
{
	text-align:left;
}

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

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

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

td
{
   padding:5px;
}

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

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

This page was last modified on 03 Jul 2011 at 17:25:13.

Gautam Kumar
EDP Manager