常用又易忘的表格标签

文章目录

• 前言
• 一、cellpadding文字和单元格之间的距离
• 二、cellspacing单元格和单元格之间的距离
• 三、跨行合并：rowspan=“个数“
• 四、跨列合并：colspan=“个数”
• 总结

---

前言

        html的表格标签我相信大家熟的已经不能在熟了，可是里面的属性值非常的容易混淆，就比如colspan和rowspan,经常忘记哪个是行合并，哪个是列合并，今天我们就来看看常见又容易混淆的表格属性。

---

一、cellpadding

cellpadding：改变文字和单元格之间的距离（可以加px单位也可以不加）

代码如下（示例）：

<h4>没有 cellpadding：</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有 cellpadding：</h4>
<table border="1" 
cellpadding="50">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

 

 

 

二、cellspacing

 cellspacing: 改变单元格和单元格之间的距离（可以加px单位也可以不加）

代码如下（示例）：

<h4>没有 cellspacing：</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有 cellspacing：</h4>
<table border="1" 
cellspacing="20">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

 

 

 

三、跨行合并：rowspan

 跨行合并：rowspan=“个数”

跨行：最上侧单元格为目标单位格

代码如下（示例）：

<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

 

四、跨列合并：colspan

跨列合并：colspan=“个数”

跨列：最左侧单元格为目标单位格

 代码如下（示例）：

<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

                        ​​​​​​​        

---

 

 

 

        总结

                1.cellpadding:改变文字和单元格之间的距离。

                2.cellspacing: 改变单元格和单元格之间的距离。

                3.合并单元格要把被合并的td删除掉。