前端基础夯实--（HTML系列）HTML表格

最新推荐文章于 2024-08-17 16:56:44 发布

taopoppy

最新推荐文章于 2024-08-17 16:56:44 发布

阅读量327

点赞数 2

分类专栏：前端基础夯实文章标签： HTML基础 HTML表格 HTML表格布局

本文链接：https://blog.csdn.net/weixin_37968345/article/details/81837523

版权

前端基础夯实专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1、表格的标签和基础

1、<table>标签就是用来展示一个表格，<tr>表示行，<td>表示单元格，下面来看一下表格的基本语法和结构

<table>        <!---表格开始-->
	<tr>         <!--tr行标签-->
		<td>....</td> <!--td单元格-->
	</tr>
	<tr>
		<td>....</td>
	</tr>
</table>  <!--表格结束-->

2、我们写一个具体的案例来看一下：

<!DOCTYPE html>
<html>
<head>
	<title>hello</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<table border="1">        
	  <tr>         
		<td>2014年</td> 
		<td>2015年</td>
		<td>2016年</td>
	  </tr>
	  <tr>
		<td>1万</td>
		<td>1.2万</td>
		<td>1.3万</td>
	  </tr>
	</table>  
</body>
</html>

然后我们运行在浏览器上，就是下面这样的：

2、表格操作（添加、删除行与列）

1、对行的添加和删除都是对整个一个<tr>标签的添加和删除。对列的删除是对每一个<tr>标签中的相应位置的<td>都要进行添加和删除。

3、带标题、表头和结构的表格

1、<th>标签来定义表头单元格，和<td>一样都要放在<tr>标签中，只不过<th>的效果是居中加粗。而<td>的默认样式是不加粗左对齐。

2、标题需要使用<caption>标签来表示，并且居中显示。

3、表格作为一个整体在网页中是需要完全被解析出来才会显示，这样有时候需要等很长时间，在网络不好的时候用户体验很差，我们需要表格结构标签去优化我们的表格。让它加载一部分显示一部分。

4、表格划分三部分：表头，主体，脚注。

5、表格结构标签有thead（表格的头：放标题之类内容）、tbody（表格的主体：放数据的主体）、tfoot（表格的脚：放表格的脚注）。使用表格结构标签的整体结构如下所示：建议三者标签同时使用。

6、使用表格结构标签的好处：（1）优化复杂表格显示（2）确定表头，主体，脚注的先后顺序，即无论thead，tbody，tfoot标签包裹的代码书写的顺序如何，都是以thead，tbody，tfoot的顺序去展示的。

<table>
  <caption>....</caption>
  <thead>
    <tr>
       <th>表头</th>
    </tr>
  </thead>
  <tbody>
    <tr>
       <td>主体</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
       <td>脚注</td>
    </tr>
  </tfoot>
</table>

4、表格属性（table）

5、表格属性（tr，td，th）

6、表格跨行列

1、跨列属性colspan：colspan="n"，表示跨了n列。注意被跨的那一列的代码要删除掉。

2、跨行属性rowspan：rowspan="n",表示跨了n行。注意被跨的那一行中对应的那一列要删除掉。

3、综合上面我们所讲的表格属性和表格的跨行跨列我们写一个综合的例子：

<!DOCTYPE html>
<html>
<head>
		<title>hello</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<table border="6" width="500px" bgcolor="#f2f2f2" cellspacing="0" cellpadding="5" align="center">         
		<caption>前端工程师的薪资水平</caption>
		<thead>
			<tr bgcolor="#d8e4bc"> 
				<th rowspan="2">城市</td>
				<th colspan="2">2014年</th> 
				<th rowspan="2">2015年</th>
				<th rowspan="2">2016年</th>
			</tr>
			<tr bgcolor="#d8e4bc">        
				<th>上半年</th> 
				<th>下半年</th> 
			</tr>
		</thead>
		<tbody align="center" valign="middle">
			<tr >
				<td bgcolor="#b8cce4">上海</td>
				<td>1万</td>
				<td>1.1万</td>
				<td>1.2万</td>
				<td>1.3万</td>
			</tr >
			<tr >
				<td bgcolor="#b8cce4">北京</td>
				<td>1万</td>
				<td>1.1万</td>
				<td>1.2万</td>
				<td>1.3万</td>
			</tr>
		</tbody>
		<tfoot>
			<tr  height="50px" align="center" valign="middle">
				<td bgcolor="#b8cce4">合计</td>
				<td>1万</td>
				<td>1.1万</td>
				<td>1.2万</td>
				<td>1.3万</td>
			</tr>
		</tfoot>
	</table>  
</body>
</html>

然后我们把代码直接运行在浏览器当中：看看效果（最好看看代码的结构和知识点再回顾一下）

7、表格嵌套

1、嵌入表格必须是一个完整的表格，而且这个完整的表格必须放在<td>标签中。就是说嵌入表格是要放在单元格中。

2、我们也写一个简单的例子来看看浏览器的效果：

<!DOCTYPE html>
<html>
<head>
	<title>hello</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<table border="1" cellspacing="0">
	 <tr>
		<td>2014</td>
		<td>2015</td>
		<td>2016</td>	
	 </tr>
	 <tr>
		<td><!--这个单元格中插入一个两行两列的表格-->
			<table  border="1" cellspacing="0">
			 <tr>
				<td>上半年</td>
				<td>下半年</td>
			 </tr>
			 <tr>
				<td>6000</td>
				<td>7000</td>
			 </tr>
			</table>
		 </td>
		 <td>8000</td>
		 <td>9000</td>	
		</tr>
	</table>
		
</body>
</html>

效果如下：

8、表格布局

1、表格布局尽量少的使用表格嵌套

2、尽量少的使用表格的跨行跨列

3、下面使用表格布局的方法去简单的实现一个案例

<!DOCTYPE html>
<html>
<head>
	<title>表格布局</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<table width="100%" bgcolor="#f2f2f2" height="100%">
	 <tr height="80px" bgcolor="14191e"><td></td></tr><!--页头-->
	 <tr height="10px"><td></td></tr><!--上空行-->
	 <tr><td>
		<table align="center" width="1024px">
			<tr>
			  <td width="240px"  valign="top">
				<table width="100%"  bgcolor="#ffffff">
					<tr><td align="center" height="60px">关于我们</td></tr>
					<tr><td align="center" height="60px">团队介绍</td></tr>
				    <tr><td align="center" height="60px">人才招聘</td></tr>
					<tr><td align="center" height="60px">讲师招募</td></tr>
					<tr><td align="center" height="60px">联系我们</td></tr>
				    <tr><td align="center" height="60px">常见问题</td></tr>
					<tr><td align="center" height="60px">意见反馈</td></tr>
					<tr><td align="center" height="60px">友情链接</td></tr>
				</table>
		      </td>
			  <td width="20px"></td>
			  <td width="764px" bgcolor="#ffffff"></td>
			</tr>
		</table>
	 </td></tr>
	 <tr height="10px"><td></td></tr><!--下空行-->
	 <tr height="150px" bgcolor="#14191e"><td></td></tr><!--页尾-->	
	</table>	
</body>
</html>

现在我们可以拿到网页上看一下简单的效果：