html表格笔记

最新推荐文章于 2022-01-11 20:08:52 发布

zerobaek

最新推荐文章于 2022-01-11 20:08:52 发布

阅读量367

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/zerobaek/article/details/78042151

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一些重要的标签：

<table> 表格

<tr> 行

<td> 单元格

<th> 表头单元格，居中加粗

<caption> 表格标题，居中显示

带结构的表格：使用表格结构标签，防止因为加载表格时间长导致用户体验不好，试用表格结构标签是表格边加载边显示。

表格划分为三部分：表头主体脚注

①thead：表格的头（放标题之类的内容）

②tbody：表格的主体（放数据主体）

③tfoot：表格的脚（放表格的脚注）

<thead><tbody><tfoot>标签不能影响布局

<table>标签属性：

cellpadding 单元边沿与其内容之间的空白

cellspacing 单元格之间的空白

frame 规定外侧边框哪个部分是可见的

rules 规定内侧边框哪个部分是可见的

<tr><td><th>标签属性：

Valign 内容的垂直对齐

跨列属性colspan

跨行属性rowspan

<!DOCTYPE html>
<html>
<head>
	<title>表格</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
	<table border="6" width="500px" bgcolor="#f2f2f2" cellspacing="0" cellpadding="5px" align="center">
		<caption>平均工资</caption>
		<thead align="center" valign="center">
		<tr bgcolor="yellow">
			<th rowspan="2">城市</th>
			<th colspan="2">2014</th>
			<th rowspan="2">2015</th>
			<th rowspan="2">2016</th>
		</tr>
		<tr bgcolor="yellow">
			<th>上半年</th>
			<th>下半年</th>
		</tr>
		</thead>
		<tbody align="center" valign="center">
		<tr>
			<td bgcolor="green">北京</td>
			<td>8000</td>
			<td>9000</td>
			<td>10000</td>
			<td>12000</td>
		</tr>
		<tr>
			<td bgcolor="green">上海</td>
			<td>6000</td>
			<td>7000</td>
			<td>8000</td>
			<td>10000</td>
		</tr>
		</tbody>
		<tfoot align="center" valign="center">
		<tr>
			<td bgcolor="green">合计</td>
			<td>7000</td>
			<td>8000</td>
			<td>9000</td>
			<td>11000</td>
		</tr>
		</tfoot>
	</table>
</body>

表格嵌套

1.完整表格结构

2.放到<td>标签内

<table border="6">
		<tr>
			<td>2014</td>
			<td>2015</td>
			<td>2016</td>
		</tr>
		<tr>
			<td>
				<table>
					<tr>
						<td>上半年</td>
						<td>下半年</td>
					</tr>
					<tr>
						<td>8000</td>
						<td>9000</td>
					</tr>
				</table>
			</td>
			<td>10000</td>
			<td>12000</td>
		</tr>
</table>

总结:

1.尽量少的使用表格嵌套

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

使用表格进行网页结构布局一般不设置border

因为会增加代码的整体维护成本