HTML--表格

表格标签

一个简单的表格

< html lang=“zh=CN”>
< head>
< meta charset=“utf-8”>
< title>< /title>
< /head>
< body>
< table>

	<tr>
		<td>姓名</td>
		<td>年龄</td>	
		<td>性别</td>
	</tr>

	<tr>
		<td>张三</td>
		<td>19</td>	
		<td>男</td>
	</tr>

	<tr>
		<td>小红</td>
		<td>22</td>	
		<td>女</td>
	</tr>

	</table>
< /body>
< /html>

从上面这个简单的实例中包含三对HTML标签，分别为table、tr、td，他们是创建表格的基本标签，缺一不可，下面对他们进行具体的解释

1. 表格的主要目的是用来显示特殊的数据的
2. 一个完整的表格有表格标签（table），行标签（tr），单元格标签（td）组成，没有列的标签
3. < tr>< /tr>中只能嵌套< td>< /td>类的单元格
4. < td>< /td>标签，他就想一个容器，可以容纳所有元素

表格属性

表格有部分属性我们不常用，这里重点记住cellspacing、cellpadding

属性名	含义	常用属性值
border	设置表格的边框（默认border="0"无边框）	像素值
cellspacing	设置单元格与单元格边框之间的空白间距	像素值（默认2像素）
cellpadding	设置单元格内容与单元格边框之间的空白间距	像素值（默认1像素）
width	设置表格的宽度	像素值
height	设置表格的高度	像素值
align	设置表格在网页中的水平对齐方式	left、center、right

有个这样的说法，是三参为0，平时开发时候这三个参数 border、cellpadding、cellspacing为0

表头单元格标签

作用：
一般表头单元格位于表格的第一行或第一列，并且文本加粗居中
语法：
只需要表头标签< th>< /th>代替相应的单元格标签< td>< /td>即可

表格标题标签caption

定义和用法
< table>
< caption>< /caption>
< /table>
注意

1. caption元素定义表格标题，通常这个标题会被居中且显示与表格之上
2. caption标签必须紧随table标签之后
3. 这个标签只存在表格里面才有意义，你是风儿我是沙

合并单元格

方式一：跨行合并 rowspan=“合并单元格个数”
方式二：跨列合并 colspan=“合并单元格个数”

合并单元格三部曲

1. 先确定是跨行还是跨列
2. 根据 先上后下 先左后右 的原则找到目标单元格，然后写上合并方式和要合并的单元格数量
   如：< td colspan= “3”>< /td>
3. 删除多余的单元格

表格总结

标签名	定义	说明
< table>< /table>	表格标签	就是一个四方盒子
< tr>< /tr>	表格行标签	行标签要在table标签内部才有意义
< th>< /th>	表头单元格标签	它还是一个单元格。但是里面的文字会居中且加粗
< td>< //td>	单元格标签	单元格标签是一个容器级元素。可以放任何东西
< caption>< /caption>	表格标题标签	表格的标题。跟着表格一起走，和表格居中对齐
clospan和rowspan	合并属性	用来合并单元格的