简单解析表格table标签的用法

1.表格加上边框并且效果如下图所示:

cellspacing(单元格间距): 表格边框与单元格的边框之间的缝隙

cellpadding(单元格边距): 单元格内容与单元格边框之间的距离

这两个属性默认是有值的,当设置border它会显化出来

因此要使表格是单层框线(如上图所示的效果)的话,

那么它编写的代码应该如下所示:

<table cellspacing="0px" cellpadding="0px" border="1px">
    
</table>
1
2
3

2.表格如何合并列

关键属性为:colspan(合并几个colspan的值就为几)

思想:

​ 1.在合并开始位置(i)单元格设置colspan=“合并个数”

​ 2.从合并开始位置的后一个位置起,把与合并开始位置保证同一行(tr中的第i+1个位置)的那个单元格去掉.直到去掉到合并的最后一个位置

<table cellspacing="0px" cellpadding="0px" border="1px">
    <tr>
        <!-- 第一行的三个单元格合并-->
        <td colspan="3"></td>
    </tr>
     <tr>
        <!-- 第二行的前两个单元格合并-->
        <td colspan="2"></td>
        <td></td>
    </tr>
     <tr>
        <!-- 第三行的后两个单元格合并-->
        <td></td>
        <td colspan="2"></td>
    </tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

​ 显示效果如下图所示

3.表格如何合并行

关键属性为:rowspan(合并几个rowspan的值就为几)

思想:

​ 1.在合并开始位置(i)单元格设置rowspan=“合并个数”

​ 2.从合并开始位置的后一个位置起,把与合并开始位置保证同一行(tr中的第i个位置)的那个单元格去掉.直到去掉到合并的最后一个位置

<table cellspacing="0px" cellpadding="0px" border="1px">
  <tr>
     <td rowspan="2" height="200px">友爱</td>
     <td height="100px">友爱</td>
     <td rowspan="3" height="300px">友爱</td>
  </tr>
  <tr>
     <td rowspan="2" height="200px">友爱</td>
  </tr>
  <tr>
     <td height="100px">友爱</td>
  </tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13

​ 显示效果如下图所示

4.表格如何保证文件文字居中

<!-- 
   对每一行的tr设置align=center(默认为left)
      设置tr会对里面所有的td生效
   对每一行的tr设置valign=middle(默认为middle,还有top,bottom两个属性)
-->
<tr align=center>
    <td>12</td>
    <td>13</td>
    <td>14</td>
</tr>
1
2
3
4
5
6
7
8
9
10