学习布局知识（19）table

 表格:

• 优点： 使用table布局能够很好的兼容处理各个浏览器的兼容，布局错乱。
• 缺点:    层层嵌套导致网页的嵌套深度太深，代码量过大，从SEO角度而言，table是数据表展示，而非用于布局工具

table各类元素以及其用法：

• table 定义一个表格 col 定义表格的列
• caption: 定义表格的标题
• colgroup 定义表格的列祖
• thead: 定义表格的头部区域
• tr 定义表格的行
• tbody: 定义表格的主体区域
• td 定义表格单元格
• tfoot: 定义表格的脚部区域
• th 定义列标题

表格嵌套规则:

• table元素下 只能包含 caption thead tbody tfoot col colgroup
• thead、tbody、tfoot下可直接包含 tr,
• tr 下可包含 th 或 td

行列合并控制:

• rowspan 和 colspan rowspan 表示行合并，而colspan表示列合并

关于 thead tbody tfoot的书写顺序可以任意更换,但最终的显示顺序依然还是 thead--> tbody--> tfoot

table表格的属性:

• width: 定义表格宽
• height: 定义表格的高
• border: 定义表格边框的宽度, 0时隐藏边框线
• cellpadding: 定义单元格与边框之间的距离
• cellspacing: 定义单元格与单元格之间的距离

table表格的默认大小:

表格默认由内容撑开宽度和高度，各个单元格的总宽度加上单元格的边框、空隙的宽度即为表格的宽度，设置table的宽度之后，各个单元格会按照单元格内容大小来瓜分table,所有的宽度和高度

如何控制每列的宽度:

• 方式一: 为第一行中的每一个列的单元格都设置样式、赋予不同的样式

• 方式二: 通过col 和colgroup 进行列分组，为每一个分组设置样式

 

table {
			width: 400px;
			height: 200px;
		}

		.data td, .data th {
			border: 1px solid black;
		}

		.con_1 {
			background-color: salmon;
		}

		.con_2 {
			background-color: silver;
		}

		.con_3 {
			background-color: red;
		}

<table class="data">
	<caption>2016年12月 四年级3班期末考试成绩</caption>
	<colgroup>
		<col span="1" class="con_1">
		<col span="3" class="con_2">
		<col span="1" class="con_3">
	</colgroup>
	<thead>
	<tr>
		<th>姓名</th>
		<th>语文</th>
		<th>数学</th>
		<th>英语</th>
		<th>总分</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>song</td>
		<td>100</td>
		<td>47</td>
		<td>3</td>
		<td>150</td>
	</tr>
	<tr>
		<td>abc123</td>
		<td>120</td>
		<td>100</td>
		<td>100</td>
		<td>320</td>
	</tr>
	<tr>
		<td>zhangsan</td>
		<td>10</td>
		<td>20</td>
		<td>30</td>
		<td>60</td>
	</tr>
	</tbody>
	<tfoot>
	<tr>
		<td colspan="5">备注:2016年底期末考试 整体存在偏科</td>
	</tr>
	</tfoot>
</table>