re:从0开始的HTML学习之路 12. 表格

1. 表格

以格式化形式展示数据的一种手段，由行和列组成。

1. 使用 table 标签创建表格
2. tr 用于创建表格的行
3. td 用于创建表格的列
4. th 用于创建表头列，默认加粗且居中

2. 表格的属性

border：设置表格的边框
align：设置表格相对于周围元素的对齐方式
width、height：设置表格的宽度和高度
cellpadding：设置表格边缘与内容之间的空白，默认1px
cellspacing：设置单元格之间的空白，默认2px
最后两个属性其实并没有太多作用，因为HTML关心的并不是表现形式
一个最原始的3*3的表格：

<table>
	<tr>
		<td>A1td> 
		<td>A2td> 
		<td>A3td> 
	tr>
	<tr>
		<td>B1td>
		<td>B2td>
		<td>B3td>
	tr>
	<tr>
		<td>C1td>
		<td>C2td>
		<td>C3td>
	tr>
table>

在table标签中加入border=1px后

3. 合并单元格

rowspan：合并行（从上往下吞并）
colspan：合并列（从左往右吞并）

啥叫吞并？比如合并B3和C3就是B3吞并C3单元格

<tr>
	<td>A1td> 
	<td>A2td> 
	<td>A3td> 
tr>
<tr>
	<td>B1td>
	<td>B2td>
	<td rowspan="2">B3td>
tr>
<tr>
	<td>C1td>
	<td>C2td>
tr>

再比如C1和C2合并

<tr>
	<td colspan="2">C1td>
tr>

4. 表格结构标签

thead 表格的头部
tbody表格的主体
tfoot 表格的底部
比如现在有一个这样的表格：

<table border="1px" align="center">
	<tr>
		<td>姓名td>
		<td>性别td>
		<td>年龄td>
	tr>

	<tr>
		<td>A1td> 
		<td>A2td> 
		<td>A3td> 
	tr>
	
	<tr>
		<td>B1td>
		<td>B2td>
		<td rowspan="2">B3td>
	tr>
	
	<tr>
		<td colspan="2">C1td>
	tr>

	<tr>
		<td>td>
		<td>合计td>
		<td>1999td>
	tr>
table>

他长这个样子：

通过F12检查网页就可以发现浏览器加了一对tbody

tbody里面才是我们写的表格

注意：
table 的子标签并不是 tr，默认是tbody，不写的话浏览器会自己修正（不要靠浏览器修正！）
thead 中的内容永远在表格最上方，tfoot中的内容永远在表格最下方，与书写顺序无关。
对打印有帮助，每一页都会有thead和tfoot的内容。

补充演示：
按照thead tbody tfoot的顺序写（注意这里用了thead里用了th创建标题栏）：

	<table border="1px" align="center">
		<thead>
			<tr>
				<th>姓名th>
				<th>性别th>
				<th>年龄th>
			tr>
		thead>

		<tbody>
			<tr>
				<td>A1td> 
				<td>A2td> 
				<td>A3td> 
			tr>
			<tr>
				<td>B1td>
				<td>B2td>
				<td rowspan="2">B3td>
			tr>
			<tr>
				<td colspan="2">C1td>
			tr>
		tbody>

		<tfoot>
			<tr>
				<td>td>
				<td>合计td>
				<td>1999td>
				tr>
		tfoot>
		
	table>

得到的表格是这样的：

同样的，按照thead tfoot tbody的顺序写：

<table border="1px" align="center">
	<thead>
		<tr>
			<th>姓名th>
			<th>性别th>
			<th>年龄th>
		tr>
	thead>

	<tfoot>
		<tr>
			<td>td>
			<td>合计td>
			<td>1999td>
			tr>
	tfoot>

	<tbody>
		<tr>
			<td>A1td> 
			<td>A2td> 
			<td>A3td> 
		tr>
		<tr>
			<td>B1td>
			<td>B2td>
			<td rowspan="2">B3td>
		tr>
		<tr>
			<td colspan="2">C1td>
		tr>
	tbody>

table>

得到的表格依然是：