免費(fèi)AI編程助手
CSS 表格
2018-10-27 11:34 更新
HTML表用于在表格中布置表格數(shù)據(jù)。使用CSS，我們可以通過添加邊框，控制表單元格文本對(duì)齊，高亮表行等樣式HTML表。
表格邊框
我們可以使用border屬性為表，表行和表單元格添加邊框。
table, th, td {
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {<!-- m.hgci.cn-->
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr><th>Value</th><th>Item</th></tr>
<tr><td>CSS</td><td>Style</td></tr>
<tr><td>HTML</td><td>Structure</td></tr>
</table>
</body>
</html>
表邊框折疊
border-collapse屬性控制瀏覽器繪制表格邊框的方式。它控制相鄰單元格的邊框。
其可能的值是折疊或單獨(dú)。
瀏覽器在表格周圍繪制邊框加上每個(gè)單元格周圍的邊框，創(chuàng)建雙邊框效果。您可以通過應(yīng)用border-collapse屬性解決此問題。
以下代碼使用border-collapse屬性。
<!DOCTYPE HTML>
<html>
<head>
<style>
table {<!--from m.hgci.cn-->
border-collapse: collapse;
}
th, td {
padding: 2px;
}
</style>
</head>
<body>
<table border="1">
<caption>Results of Survey</caption>
<colgroup id="colgroup1">
<col id="col1And2" span="2"/>
<col id="col3"/>
</colgroup>
<colgroup id="colgroup2" span="2"/>
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Color</th>
<th colspan="2">Size</th>
</tr>
</thead>
<tbody>
<tr>
<th>Favorite:</th>
<td>A</td>
<td>B</td>
<td>C</td>
<td>500</td>
</tr>
<tr>
<th>2nd Favorite:</th>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">? 2011 m.hgci.cn Data Enterprises</th>
</tr>
</tfoot>
</table>
</body>
</html>
折疊值告訴瀏覽器您不想在相鄰元素的每個(gè)邊上繪制邊框。
例子：
以下代碼顯示如何比較單獨(dú)和折疊表邊框。
<html>
<body>
<table id="myTable" border="1" style="border-collapse: collapse">
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
</tr><!-- m.hgci.cn-->
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
</table>
<button onclick="myTable.style.borderCollapse='separate'">separate</button>
<button onclick="myTable.style.borderCollapse='collapse'">collapse</button>
</body>
</html>
表寬度和高度
width和height屬性控制表的寬度和高度。
下面的示例將表的寬度設(shè)置為100％，th元素的高度設(shè)置為50px：
table {
width: 100%;
}
th {
height: 50px;
}
表文本對(duì)齊
text-align和vertical-align屬性控制表中的文本對(duì)齊。
text-align屬性設(shè)置水平對(duì)齊方式，如left，right或center。
vertical-align屬性設(shè)置垂直對(duì)齊方式，如頂部，中間或底部。
td {
text-align: right;
vertical-align: bottom;
}
以上內(nèi)容是否對(duì)您有幫助：
← CSS 列表
更多建議：