目标：
1，table标签属性
2，table通用属性
3，tr标签属性
4，td标签属性

上一节我们说了table简单结构和复杂结构，这一节我们来看一下table的属性

1，table标签属性
1，边框border，设置table的表格，默认为0，没有表格。

例如： border = “1” 设置表格边框为1px

2，外间距cellspacing，设置边框与边框的距离；

例如：cellspacing = “20” 效果如下：

不过一般我们设置cellspacing = “0”，效果如下：

3，内间距：cellpadding，设置边框与内容之间的距离。

例如：cellpadding = “10”，效果如下：

综上效果，代码如下：

<table border="1" cellspacing="0" cellpadding="10"><caption>信息采集表</caption><tr align="center" ><td>序号</td><td>姓名</td><td>性别</td><td>籍贯</td></tr><tr align="center"><td>1</td><td>Jerry</td><td>女</td><td>河北衡水</td></tr><tr align="center"><td>2</td><td>Tom</td><td>男</td><td>运城稷山</td></tr><tr align="center"><td>3</td><td>Alex</td><td>男</td><td>天津宝坻区</td></tr></table>

2，table通用属性：【<table>,<tr>,<td>都识别的属性】
1，对齐方式align=“left/center/right” 设置对齐方式

例如：align=“center”作用如下：

1，用在table标签上，是设置table表格整体居中的
2，用在tr或者td上是设置里边的文本内容居中

2，宽度width，设置表格的宽度，取值可以为固定像素值（像素px省略不写），也可以是百分比

例如：width=“80%”或者 width = “800” 设置宽度

3，高度height，设置表格高度。取值可以为固定像素值（像素px省略不写），也可以是百分比

例如：height=“20%”或者 height = “100” 设置高度

3，tr属性
1，垂直对齐方式valign=“top/middle/bottom”

top：上
middle：中，默认值
bottom：下
例如：第一行tr设置 height=“100” valign=“top”，效果如下：

【注意valign属性td也可以使用】
4,td属性
1，垂直对齐valign
例如：第一行当中的第一列和第二列分别设置靠下和居中

<tr align="center" height="100" valign="top"><td valign="bottom">序号</td><td valign="middle">姓名</td><td>性别</td><td>籍贯</td>
</tr>

效果如下：

2，合并列colspan=“数字” 数字是几合并几列
3，跨行合并 rowspan = “数字” 数字是几跨几行合并
我们先做一个5行5列的表格，如下图所示：

代码如下：

<table border="1" cellpadding="10" cellspacing="0" width="80%" align="center"><tr><td>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td><td>1-5</td></tr><tr><td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td><td>2-5</td></tr><tr><td>3-1</td><td>3-2</td><td>3-3</td><td>3-4</td><td>3-5</td></tr><tr><td>4-1</td><td>4-2</td><td>4-3</td><td>4-4</td><td>4-5</td></tr><tr><td>5-1</td><td>5-2</td><td>5-3</td><td>5-4</td><td>5-5</td></tr></table>

我们合并1-1和1-2，合并3-1和4-1效果如下：

代码如下：

<table border="1" cellpadding="10" cellspacing="0" width="80%" align="center"><tr><td colspan="2">1-1</td> <!-- 这里1-1占了2个td的位置，所以需要删除1-2  --><td>1-3</td><td>1-4</td><td>1-5</td></tr><tr><td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td><td>2-5</td></tr><tr><td rowspan="2">3-1</td><!-- 这里3-1跨2行合并占了4-1的位置，所以需要删除4-1  --><td>3-2</td><td>3-3</td><td>3-4</td><td>3-5</td></tr><tr><td>4-2</td><td>4-3</td><td>4-4</td><td>4-5</td></tr><tr><td>5-1</td><td>5-2</td><td>5-3</td><td>5-4</td><td>5-5</td></tr></table>

我们继续合并3-3,3-4,3-5,4-3,4-4,4-5,5-3,5-4,5-5效果如下：

这里合并了3列，跨了3行，在3-3td上添加colspan=“3” rowspan = “3”；删除3-4,3-5，跨了3行，需要删除4-3,4-4,4-5,5-3,5-4,5-5.代码如下：

<table border="1" cellpadding="10" cellspacing="0" width="80%" align="center"><tr><td colspan="2">1-1</td><!-- 这里1-1占了2个td的位置，所有需要删除1-2  --><td>1-3</td><td>1-4</td><td>1-5</td></tr><tr><td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td><td>2-5</td></tr><tr><td rowspan="2">3-1</td><td>3-2</td><td rowspan="3" colspan="3">3-3</td><!-- 删除了3-4和3-5 --></tr><tr><td>4-2</td><!-- 删除了4-3,4-4,4-5 --></tr><tr><td>5-1</td><td>5-2</td><!-- 删除了5-3,5-4,5-5 --></tr></table>

【注意：】我们合并的时候，需要删除相应的td列，如果删除不正确，会出现不必要的错误。

例如：下面案例我们需要删除1-2，如果不删除则会出现错误

<table border="1" cellpadding="10" cellspacing="0" width="80%" align="center"><tr><td colspan="2">1-1</td><!-- 这里1-1占了2个td的位置，所以需要删除1-2  --><td>1-2</td><!-- 这里需要删除1-2 但是没有删除 --><td>1-3</td><td>1-4</td><td>1-5</td></tr><tr><td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td><td>2-5</td></tr></table>

效果如下：

上述例子中我们删除了1-2就好了。
代码如下：

	<table border="1" cellpadding="10" cellspacing="0" width="80%" align="center"><tr><td colspan="2">1-1</td><!-- 这里1-1占了2个td的位置，所以需要删除1-2  --><td>1-3</td><td>1-4</td><td>1-5</td></tr><tr><td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td><td>2-5</td></tr></table>

效果如下：

ok，我们今天的内容暂时到这里了，本章主要讲的是表格属性。希望和大家互相交流学习，谢谢。