前端HTML中表格元素介绍

随着前端技术的发展，HTML原有的很多写法渐渐被CSS或JavaScript替代，在这里介绍的表格元素也是如此（div）。

此篇博文仅为本人学完HTML中的table标签的学习总结，若有错误望在评论区提出，本人很菜，勿喷2333~~~

<table>定义表格
<tr>定义表格的行
<th>定义表格的表头
<td>          定义表格单元 
<caption>定义表格标题
<colgroup>定义表格列的组
<col>定义用于表格列的属性
<thead>定义表格的页眉
<tbody>定义表格的主体
<tfoot>定义表格的页脚

 th 与 td 标签嵌套在  tr  中使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>表格</title>
	</head>
	<body>
		<table style="width: 400px" border="1">	
			<caption>疯狂体系书</caption>
			<thead>
				<tr>
					<th>&nbsp;</th>
					<th>书名</th>
					<th>作者</th>
				</tr>
			</thead>
			
			<tfoot>
				<tr>
					<td colspan="3" style="text-align: right">现总计： 4本图书</td>
				</tr>
			</tfoot>
			
			<tbody>
				<tr>
					<th rowspan="2">Java体系</th>
					<td>疯狂Java</td>
					<td>李刚</td>
				</tr>
				<tr>
					<td>Java EE</td>
					<td>李刚</td>
				</tr>
			</tbody>
			
			<tbody>
				<tr>
					<th rowspan="2">IOS体系</th>
					<td>疯狂Swift讲义</td>
					<td>李刚</td>
				</tr>
				<tr>
					<td>疯狂IOS讲义</td>
					<td>李刚</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

运行结果如下： 

  1. 使用了<caption>设置表格名称 如：上述显示的 “疯狂体系书”
  2. ”Java体系，IOS体系“处使用了rowspan属性（纵向合并）
  3. “现总计：4本图书” 使用了colspan属性 （横向合并）
  4. 使用了<thead> <tbody> <tfoot> 三种标签，其中不论<thead>与<tfoot>在代码中何时出现，运行代码后，观察他们所形成的表格就会发现，它们对应的语句，分别位于表格的顶部与底部。
  5. 另外注意一下<th>与<td> 会将该表签里的内容自动居中，后者则是顶格。

差不多吧，一个示例就几乎将HTML的表格部分讲清楚了吧。

（反正现在HTML开发已经很少使用纯html的table标签了吧）

posted @ 2019-11-29 12:23  金鳞踏雨  阅读(13)  评论(0)    收藏  举报  来源