目录
一、表格的基本结构
<table border="" cellspacing="" cellpadding="">
<tr><th>Header</th></tr>
<tr><td>Data</td></tr>
</table>
1. <table></table>
定义表格的基本框架
2. <tr></tr>
定义表格的行
3. <td></td>
定义表格中行内的单元格
4. <th></th>
定义表格中行内的单元格(标题),自动将文本加粗,居中对齐
二、 表格的属性
table里面放tr,tr里面放td或th
如果有别的元素,放到td或th里
1.cellspacing
单元格与单元格之间的距离
<table border="1" cellspacing="" >
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
以下是有无设置cellspacing的区别:
2.cellpadding
内容与单元格边框四周的距离
<table border="1" cellspacing="" cellpadding="20">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
以下是有无设置cellspacing的区别
3.border
表格边框
<table border="5" cellpadding="20">
<tr>
<td>第一格</td>
</tr>
<tr>
<td>第二格</td>
</tr>
</table>
4.align
left 默认居左
center 居中
right 居右
<table border="5" cellpadding="50" align="center">
<tr>
<td>第一格</td>
</tr>
<tr>
<td>第二格</td>
</tr>
</table>
table 设置align属性后,就会根据align的值将表格定义在浏览器的水平对齐方向,默认是left
5.bgcolor=background-color
背景颜色
<table border="5" cellpadding="50" bgcolor="pink">
<tr>
<td>第一格</td>
</tr>
</table>
6.bordercolor
边框颜色
<table border="5" cellpadding="50" bordercolor="pink">
<tr>
<td>第一格</td>
</tr>
</table>
7.rules
规定内侧边框是否可见
1. none 没有线条
2. rows 位于行之间的线条可见
3. cols 位于列之间的线条可见
4. all 行和列之间的线条都可见
值如下图所示,感兴趣的可以尝试一下
三、合并单元格
1.colspan属性
左右合并单元格
在这个图中可以看到,本来第一行是有5个单元格,但是第一行的第一个单元格与第二个单元格合并在了一起,
我们合并单元格时都是从左往右开始合并,所以第一行就剩下了4个单元格,也就是说只需要写4个<td></td>,
合并时在第一个单元格里进行合并,有几个单元格进行合并,就在colspan里写几
<tr>
<td colspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
同理,可以得出,在第三行第二个单元格与第三个单元格进行合并时,只需要4个<td></td>标签,并且在第三行的第2个单元格里合并两个单元格
2.rowspan属性
上下合并单元格
rowspan 是垂直方向的合并单元格,从上往下合并,从图中我们可以看出第二行和第三行的单元格合并了,
根据刚刚我们学习colspan的经验来看,第一行里是五个单元格,不用发生改变,第二行中第一个单元格与第三行的第一个合并了,所以需要在第二行中的<td></td>标签中写rowspan="2"
我们再看第四行,第一个单元格是不是与2-1合并了,所以这一行也只有四个单元格,3-5当然也算啦,它是与第四行单元格合并的
案例
代码如下:
<table border="" cellspacing="0" cellpadding="20">
<tr>
<td colspan="3"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr><tr>
<td></td>
<td colspan="2"></td>
<td></td>
</tr><tr>
<td colspan="4"></td>
</tr>
</table>
代码如下:
<table border="1" cellspacing="0" cellpadding="20">
<tr>
<td></td>
<td colspan="3"></td>
<td rowspan="4"></td>
</tr>
<tr>
<td></td>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>