Introduction to table in CSS

Table border

Specifies the CSS table border, using the border property.

The following example specifies the black border of a table's th and TD elements:

Instance

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

Please note that the table in the example above has a bilateral box. This is because the table and the TH/TD element have separate boundaries.

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

Collapse border

The Border-collapse property sets whether the border of the table is collapsed into a single border or separated:

Instance

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

Table width and Height

The width and Height properties define the widths and heights of the table.

The following example is a table that sets the height of the 100%-width, 50-pixel th element:

Instance

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

Alignment of table text

The text alignment and vertical alignment properties in the table.

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

Instance

Td{text-align:right;}

Vertical alignment properties Set vertical alignment, such as top, bottom, or middle:

Instance

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

Table Fill

If you control the border between spaces in the contents of the table, you should use the fill properties of the TD and TH elements:

Instance

td{padding:15px;}

Table Color

The following example specifies the color of the border, and the text and background color of the th element:

Instance

Table, TD, TH{BORDER:1PX solid Green;} Th{background-color:green;color:white;}

"Recommended"

1. Special recommendation : "PHP Programmer Toolkit" V0.1 version download

2. Free CSS Online video tutorial

3. php.cn Lonely Nine-base (2)-css video tutorial