Relevant introduction to Table in CSS

Table border

Specify the CSS table border, using the border attribute.

The following example specifies a black border for the Th and TD elements of a table:

Example

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

Please note that in the above example the table has double borders. This is because the table and th/td elements have separate boundaries.

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

Collapse border

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

Example

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

Table width and height

The Width and height properties define the width and height of the table.

The following example is a table that sets the width of 100% and the height of the th element to 50 pixels:

Example

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

Table text alignment

Table Text alignment and vertical alignment properties in .

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

Example

td{text-align:right;}

The vertical alignment property sets the vertical alignment, like top, bottom, or center :

Example

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

Table padding

If you want to control the borders between spaces in the content of a table, you should use the padding attributes of the td and th elements:

Example

td
{
padding:15px;
}

Table Color

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

Example

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

【 Related recommendations】

1. Special recommendation:"php Programmer Toolbox" V0.1 version download

2. Free css online video tutorial

3. php.cn Dugu Jiujian (2)-css video tutorial

The above is the detailed content of Relevant introduction to Table in CSS. For more information, please follow other related articles on the PHP Chinese website!