Home  >  Article  >  Web Front-end  >  Relevant introduction to Table in CSS

Relevant introduction to Table in CSS

零下一度
零下一度Original
2017-05-16 11:20:231803browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn