HTML + CSS -2.表格

一、表格标签

1. 表格的主要作用

表格主要用于显示、展示数据，特别是后台展示数据
表格不是用来布局页面的,而是用来展示数据的

2. 表格的基本语法

<table>
	<tr>
		<td>单元格内的文字</td>
		...
	</tr>
	...
</table>

1. table 标签 是用于定义表格的标签。
2. tr 标签用于定义表格中的行，必须嵌套在 table 标签中。
3. td 标签用于定义表格中的单元格，必须嵌套在tr 标签中。
4. 字母 td 指表格数据（table data），即数据单元格的内容。

3. 表头单元格标签

一般表头单元格位于表格的第一行或第一列，突出重要性,表头单元格里面的文本内容加粗居中显示

<th> 标签表示 HTML 表格的表头部分(table head 的缩写)

<table>
	<tr>
		<th>表头</th>
		...
	</tr>
	...
</table>

4. 表格属性

4.1 边框合并变粗问题

表格设置了border属性，又设置了 cellspacing=‘0’ 的属性会导致边框合并变粗, 解决办法：在table样式中添加border-collapse: collapse;

table {
	/* 避免边框合并变粗 */
	border-collapse: collapse;
}

5. 表格结构标签

thead 标签 表格的头部区域、tbody 标签 表格的主体区域

1. <thead></thead>：用于定义表格的头部。<thead> 内部必须拥有 <tr> 标签。 一般是位于第一行。
2. <tbody></tbody>：用于定义表格的主体，主要用于放数据本体 。
3. 以上标签都是放在 <table></table> 标签中。

<table width="500" height="300" border="1" cellspacing="0" cellpadding="0">
	<thead>
		<tr>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
		</tr>
	</thead>
	<tbody align="center">
		<tr>
			<td>王多多</td>
			<td>男</td>
			<td>18</td>
		</tr>
		<tr>
			<td>小丸子</td>
			<td>女</td>
			<td>16</td>
		</tr>
	</tbody>
</table>

6. 合并单元格

合并单元格方式：

• 跨行合并：rowspan=“合并单元格的个数”
• 跨列合并：colspan=“合并单元格的个数”

目标单元格：(写合并代码)

• 跨行：最上侧单元格为目标单元格, 写合并代码
• 跨列：最左侧单元格为目标单元格, 写合并代码

合并单元格三步曲：

1. 先确定是跨行还是跨列合并。
2. 找到目标单元格. 写上合并方式 = 合并的单元格数量。比如：<td colspan=“2”></td>
3. 删除多余的单元格。

<table border="1" width="500px" height="400px" cellpadding="0" cellspacing="0">
	<tr>
		<td></td>
		<td></td>
		<td colspan="2"></td>
		<!-- colspan 合并的单元格 -->
		<!-- <td></td> -->
	</tr>
	<tr>
		<td></td>
		<td rowspan="2"></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<!-- rowspan 合并的单元格 -->
		<!-- <td></td> -->
		<td></td>
		<td></td>
	</tr>
</table>

效果图：