表格
描述
- 以网格的形式来呈现数据，并且以二维数据表(有行有列)来显示数据内容
表格元素
-
<table>元素 - 表示定义表格 -
<tr>元素 - 表示定义表格中的行 -
<th>元素 - 表示定义表格中的表头 -
<td>元素 - 表示定义表格中的单元格 -
<caption>元素 - 表示定义表格中的标题 -
<thead>元素 - 表示定义表格的页眉 -
<tbody>元素 - 表示定义表格的主体 -
<tfoot>元素 - 表示表格的页脚
表格元素元素属性
border属性
-
表示设置表格的边框
- 属性值为数字值
- 会同时设置表格和单元格
rowspan属性
-
表示设置单元格的跨行
- 属性值为数字值
colspan属性
-
表示设置单元格的跨列
- 属性值为数字值
表格元素整体示例代码
<body>
<!--
border属性 - 表示设置表格的边框
* 属性值为数字值
* 会同时设置表格和单元格
rowspan属性 - 表示设置单元格的跨行
* 属性值为数字值
colspan属性 - 表示设置单元格的跨列
* 属性值为数字值
-->
<!-- <table>元素 - 表示定义表格 -->
<table border="5">
<!-- <caption>元素 - 表示定义表格中的标题 -->
<caption>随身物品</caption>
<!-- <thead>元素 - 表示定义表格的页眉 -->
<thead>
<!-- <tr>元素 - 表示定义表格中的行 -->
<tr>
<!-- <th>元素 - 表示定义表格中的表头 -->
<th>手机</th>
<th>电脑</th>
<th>手表</th>
<th>平板</th>
</tr>
</thead>
<!-- <tbody>元素 - 表示定义表格的主体 -->
<tbody>
<tr>
<!-- <td>元素 - 表示定义表格中的单元格 -->
<td>iphone X</td>
<td>MacBook Pro 15寸</td>
<td>卡西欧</td>
<td>iPad Pro 12寸</td>
</tr>
<tr>
<td>iphone SE</td>
<td>MacBook Pro 13寸</td>
<td>尼尚</td>
<td>iPad Pro 10寸</td>
</tr>
</tbody>
<!-- <tfoot>元素 - 表示表格的页脚 -->
<tfoot>
<tr>
<td colspan="3">以上二选一</td>
</tr>
</tfoot>
</table>
</body>表格样式
caption-side属性
- 表示设置表格中的标题元素在表格中的显示位置
border属性
-
表示设置边框
- border-width - 表示设置边框的宽度
- border-style - 表示设置边框的样式
- border-color - 表示设置边框的颜色
- border属性也允许简写：顺序是 边框的宽度 边框的样式 边框的颜色
border-collapse属性
-
表示设置边框是分离还是合并
- 注意：在设置边框为合并后，border-spacing属性和empty-cells属性会失效
border-spacing属性
- 表示设置边框之间的距离
empty-cells属性
- 表示设置空白单元格的显示与隐藏
表格样式示例代码
<head>
<meta charset="UTF-8">
<title>表格的样式</title>
<style>
caption {
/*
caption-side属性 - 表示设置表格中的标题元素在表格中的显示位置
* top - 表示设置表格标题出现在表格的顶部“默认值”
* bottom - 表示设置表格标题出现在表格的底部
*/
caption-side: top;
}
table, th, td {
/*
border属性 - 表示设置边框
* border-width - 表示设置边框的宽度
* border-style - 表示设置边框的样式
* border-color - 表示设置边框的颜色
border属性也允许简写：顺序是 边框的宽度 边框的样式 边框的颜色
*/
border: 1px solid black;
/*
border-collapse属性 - 表示设置边框是分离还是合并
* separate属性值 - 表示边框的分离“默认值”
* collapse属性值 - 表示边框的合并
* 注意：在设置边框为合并后，border-spacing属性和empty-cells属性会失效
*/
border-collapse: separate;
/* border-spacing属性 - 表示设置边框之间的距离 */
border-spacing: 10px;
/*
empty-cells属性 - 表示设置空白单元格的显示与隐藏
* show属性值 - 表示显示空白单元格“默认值”
* hide属性值 - 表示隐藏空白单元格
*/
empty-cells: hide;
}
</style>
</head>
<body>
<table>
<caption>随身物品</caption>
<thead>
<tr>
<th>手机</th>
<th>电脑</th>
<th>手表</th>
<th>平板</th>
</tr>
</thead>
<tbody>
<tr>
<td>iphone X</td>
<td>MacBook Pro 15寸</td>
<td>卡西欧</td>
<td>iPad Pro 12寸</td>
</tr>
<tr>
<td>iphone SE</td>
<td>MacBook Pro 13寸</td>
<td>尼尚</td>
<td>iPad Pro 10寸</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">以上二选一</td>
</tr>
</tfoot>
</table>
</body>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。