CSS Table
Using CSS can greatly improve the appearance of HTML tables.
CSS Table Properties
CSS table properties can help you greatly improve the appearance of your table.
Table border
To set the table border in CSS, please use the border property.
The following example sets blue borders for table, th and td:
table, th, td
{
border: 1px solid blue ;
}
Please note that the table in the above example has a double line border. This is because the table, th and td elements have independent borders.
If you need to display the table as a single line border, please use the border-collapse attribute.
Collapse border
border-collapse property sets whether the border of the table is collapsed into a single border or separated
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<p><b>注意；</b> 如果没有指定 !DOCTYPE border-collapse 属性在 IE8 及更早 IE 版本中是不起作用的。</p>
</body>
</html>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:
table
{
width:100%;
}
th
{
height:50px;
}Table text alignment
Text alignment and vertical alignment properties in tables.
text-align属性设置水平对齐方式，像左，右，或中心：
td{text-align:right;}Vertical alignment property sets vertical alignment, such as top, bottom or middle:
td
{
height:50px;
vertical-align:bottom;
}Table fill
If in To control the borders between spaces in the content of the table, the padding attributes of the td and th elements should be used:
td
{
padding:15px;
}Table color
The following example specifies the color of the border, and the text and background colors of the th element
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
table, td, th
{
border:1px solid blue;
}
th
{
background-color:pink;
color:white;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>0</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>0</td>
</tr>
</table>
</body>
</html>
Next Section