Home > Article > Web Front-end > 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!