Html表格
1、表格标签汇总
| 表格 | 描述 |
|---|---|
<table> |
定义表格 |
<caption> |
定义表格标题。 |
<th> |
定义表格的表头。 |
<tr> |
定义表格的行。 |
<td> |
定义表格数据。 |
<thead> |
定义表格的页眉。 |
<tbody> |
定义表格的主体。 |
<tfoot> |
定义表格的页脚。 |
<col> |
定义用于表格列的属性。 |
<colgroup> |
定义表格列的组。 |
2、简单表格
html 表格应由标签 <table></table> 包裹。
html 表格的行由标签<tr></tr>包裹。
html单元格
- html 表格有两类单元格：
- 标准单元格
<td></td> - 表头单元格
<th></th>
- 标准单元格
- td 表示 table data 表格数据，可称为数据单元格、单元格。
- th 表示 table head 表头，称为表头单元格，其内文字默认是加粗的。通常是表格的首行。
- html表格只能按行排列。即
<td></td>和<th></th>只能在<tr></tr>内，不可交换。 - 每行中单元格横向排列。视为表格的列。表格的列数由单元格最多的行决定。
- 单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
一个简单的表格如下：
<table border="1">
<tr>
<th>1,1</th>
<th>1,2</th>
<th>1,3</th>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
</tr>
</table>
表格默认是没有边框的，
border="1"设置了一个1像素的边框
3、表格样式
3.1 表格的宽高
表格宽度：
<table width="200">固定宽度200像素<table width="80%">动态宽度为父元素宽度的80%。
列宽度：
<th width="20">固定列宽度200像素；<th width="40%">动态列宽度，为表格宽度的40%。
表格高度
<table height="200">表格高度为200像素
行高
<tr height="50">表格高度为50像素<td height="50">表格高度为50像素<th height="50">表格高度为50像素
3.2 表格的对齐方式
align: 水平方向的对齐
- right 右对齐
- center 居中
- left 左对齐
valign：垂直方向的对齐
- top 顶部
- middle 居中
- bottom 底部
- baseline 与父元素或相邻元素基线对齐
设置表格相对父元素右对齐，且表格不在单独占行，文字会围绕表格。
<table algin="right">
指定行内的单元格内容相对单元格右对齐，位于单元格顶部
<tr algin="right" valign="top">
指定某单元格内容相对单元格右对齐
<td algin="right"><th algin="right">
3.3 表格的颜色
bgcolor 可设置表格和单元格的颜色
设置方法：
- 颜色名称, 如红色：bgcolor="red"
- 十六进制, 如蓝色：bgcolor="#0000ff"
整个表格的颜色为红色
<table bgcolor="red">
某行为蓝色
<tr bgcolor="#0000ff">
某单元格为绿色
<td bgcolor="green">
3.4 背景图像
background可设置表格和单元格的背景图像，可接受本机图片路径和图片网址
使用本地图片
<table background="./fish.png">
<tr background="./fish.png">
<td background="./fish.png">
使用网络图片
<table background="https://i01piccdn.sogoucdn.com/ff9ab6ea299c4e06" >
<tr background="https://i01piccdn.sogoucdn.com/ff9ab6ea299c4e06" >
<td background="https://i01piccdn.sogoucdn.com/ff9ab6ea299c4e06" >
3.4 单元格的间距与内边距
cellspacing(间距)：指表格内单元格与单元格、单元格与表格外边框之间的距离。
cellpadding(内边距)：指单元格内容与单元格边框之间的距离。单元格内容宽度由width决定，即内边距不包含在width之内，单元格的边框距离为:内边距+width。
间距和边距都是表格的属性：
<table border="1" cellspacing="10"> 表格内所有单元格间距为10像素。
<table border="1" cellpadding="10"> 表格内所有单元格内边距为10像素。
3.5 单元格合并
colspan跨列合并，值为列数
rowspan跨行合并，值为行数
点击查看代码
<table border="1" cellpadding="10">
<tr>
<th width="80" rowspan="2">姓名</th>
<th width="40" colspan="2">基本信息</th>
</tr>
<tr>
<th width="40">性别</th>
<th width="40">年龄</th>
</tr>
<tr>
<td>张三宝</td>
<td>男</td>
<td>18</td>
</tr>
</table>
3.6 空单元格
当每行的单元格数量不相同时会出现表格空白:
点击查看代码
<table border="1">
<tr>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td>211</td>
</tr>
</table>
为避免上述情况影响表格美观，只要确保每行的单元格数量一致，即是空单元格
点击查看代码
<table border="1">
<tr>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td>211</td>
<td></td> <!-- 有时可能需要加空格才能显示 -->
</tr>
</table>
3.7 表格边框
rules 设置表格内单元格的边框线的显示和隐藏
- all(显示所有边框线)
- none(没有内边框线)
- rows(只有行边框线)
- cols(只有列边框线)
- group(只有组边框线)
frame 设置表格外边框线的显示和隐藏
- void 没有外边框
- box、border 显示所有外边框
- above 只显示上部的外侧边框
- below 只显示下部的外侧边框
- lhs 只显示左部的外侧边框
- rhs 只显示右部的外侧边框
- hsides 只显示水平的外侧边框
- vsides 只显示竖直的外侧边框
表格只显示行间边框线
<table border="1" rules="rows">
表格只显示右侧外框线
<table border="1" frame="rhs">
表格的标题
caption 设置表格标题，为table标签子元素
点击查看代码
<table border="1">
<caption>员工名单</caption>
<tr>
<th width="80" rowspan="2">姓名</th>
<th width="40" colspan="2">基本信息</th>
</tr>
<tr>
<th width="40">性别</th>
<th width="40">年龄</th>
</tr>
<tr>
<td>张三宝</td>
<td>男</td>
<td>18</td>
</tr>
</table>
4、表格列样式
<col /> 和 <colgroup></colgroup> 用于设置表格的列属性。
当col和colgroup设置同一列时以col为准，col 是仅包含属性的空元素
点击查看代码
<table border="1">
<col bgcolor="red" width="50%"/>
<col span="2" bgcolor="green" />
<tr>
<th>编码</th>
<th>书名</th>
<th>价格/元</th>
</tr>
<tr>
<td>3476896</td>
<td>狼人</td>
<td>53</td>
</tr>
<tr>
<td>2489604</td>
<td>黑夜</td>
<td>47</td>
</tr>
</table>
5、表格分组
通过使用 thead(页眉)、tbody（主体）、tfoot（页脚） 标签可以将表格分成多个组成部分。
thead、tbody、tfoot 三个标签都必须在table标签内，必须同时使用，且顺序不能变，tbody可以有多个。
点击查看代码
<table border="1">
<thead bgcolor="skyblue">
<tr>
<th rowspan="2">姓名</th>
<th colspan="2">基本信息</th>
</tr>
<tr>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody bgcolor="gray">
<tr>
<th colspan="3">历史系</th>
</tr>
<tr>
<td>李四强</td>
<td>男</td>
<td>20</td>
</tr>
</tbody>
<tbody bgcolor="pink">
<tr>
<th colspan="3">数学系</th>
</tr>
<tr>
<td>周淑玲</td>
<td>女</td>
<td>18</td>
</tr>
</tbody>
<tfoot bgcolor="#ffff7f">
<th colspan="3">
<font color="blue">清北大学学籍管理系统</font>
</th>
</tfoot>
</table>
