前端开发学习笔记–HTML 表格元素

发布于 2018-03-26  336 次阅读


表格常见元素汇总:

元素名称 解析
table 声明表格
tr 声明一行单元格
td 声明单元格
th 声明标题行单元格
thead 声明标题行
tbody 声明表格主体
tfoot 声明表脚
col 声明一列
caption 声明表格标题
colgroup colgroup

例:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title>基本结构</title>
</head>
<body>
	<a href="https://www.itwordsweb.com/">小白鼠</a>
	<p style="font-size: 20px"></p>
	<table border="1"  cellspacing="0" style="width:100px;">
		<caption>调查表</caption>
		<thead>
		<tr>
			<th>姓名</th>
			<th>性别</th>
			<th>文化水平</th>
		</tr>
		</thead>
		<tbody>
		<tr>
			<td rowspan="2">基本信息</td>
		</tr>
		<tr>	
			<td>张三</td>
			<td>女</td>
			<td>高中</td>
		</tr>
		<tr>	
			<td>李四</td>
			<td>男</td>
			<td>本科</td>
		</tr>
		</tbody>
		<tfoot>
		<tr>
			<td colspan="4">共计:两名</td>
		</tr>
		</tfoot>
	</table>
</body>
</html>

解析:

①:<table>,<tr>,<td>构建基础表格,默认情况下表格是没有边框,所以加多 border 属性,设置 1 显示边框

<table border="1">
		<tr>	
			<td>张三</td>
			<td>女</td>
			<td>高中</td>
		</tr>
		<tr>	
			<td>李四</td>
			<td>男</td>
			<td>本科</td>
		</tr>
</table>

②:<th>为表格添加标题单元格,实际作用是将内部文字居中并加粗,使用通用属性 style 设置表格边框大小

<table border="1" style="width:200px;">
		<tr>
			<th>姓名</th>
			<th>性别</th>
			<th>文化水平</th>
		</tr>
		<tr>
			<td rowspan="3">基本信息</td>
		</tr>
		<tr>	
			<td>张三</td>
			<td>女</td>
			<td>高中</td>
		</tr>
		<tr>	
			<td>李四</td>
			<td>男</td>
			<td>本科</td>
		</tr>
</table>

③:<thead>元素限制和规范表格的表头部分,为动态表格生成表头,使用此元素限定在开头的位置

<thead>
<tr>
	<th>姓名</th>
	<th>性别</th>
	<th>文化水平</th>
</tr>
</thead>

④:<tfoot>元素生成表格的表脚,限制在表格的底部

<tfoot>
	<tr>
		<td colspan="4">共计:两名</td>
	</tr>
</tfoot>

⑤:<tbody>元素包括非表头,表脚部分,使表格更加清晰,有助于 css 和 JavaScript 的调用

<tbody>
	<tr>
		<td rowspan="3">基本信息</td>
			
	</tr>
	<tr>	
		<td>张三</td>
		<td>女</td>
		<td>高中</td>
	</tr>
	<tr>	
		<td>李四</td>
		<td>男</td>
		<td>本科</td>
	</tr>
</tbody>

⑥:<caption>元素为表格添加标题

<caption>调查表</caption>