CSS 表格属性
2021-06-22 本文已影响0人
微语博客
表格属性
CSS表格属性用于设置HTML表格的样式，HTML表格由<table></table> 标签嵌套<tbody>，<tr>，<td>等标签组成，一个HTML表格默认至少包含table，tbody，tr，td四个元素。
CSS表格属性：
- border-collapse：用于table元素，设置单元格是否合并，默认值separate，可选值collapse（合并）。
- border-spacing：设置相邻单元格的边框间的距离（仅用于"边框分离"模式）。
- caption-side：设置表格标题的位置，默认值top，可选值bottom。
- empty-cells：设置是否显示表格中的空单元格（仅用于"分离边框"模式）。
- border：设置是否显示表格边框。
表格边框
显示表格边框有时候特别重要，它能让表格结构更清晰。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
table,td{
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>HTML</td>
<td>CSS</td>
</tr>
<tr>
<td>JavaScript</td>
<td>JQuery</td>
</tr>
</tbody>
</table>
</body>
</html>
折叠边框
默认的表格有双边框，这是因为表和th/ td元素有独立的边界。border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
table{
border-collapse:collapse;/*折叠成一个单一的边框*/
}
table,td{
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>HTML</td>
<td>CSS</td>
</tr>
<tr>
<td>JavaScript</td>
<td>JQuery</td>
</tr>
</tbody>
</table>
</body>
</html>
表格的背景，宽高，文本，字体和其他元素设置一样。
