HTML表格（HTML 表格的使用，收藏这一篇就够了）

- 日理万妓 2022-12-15 06:03 233阅读 0赞

# HTML 表格 #

### 文章目录 ###

*  HTML 表格
 *   *  1. 表格的定义
     *  2. 表格的标签
     *  3. 单元格边框(border)
     *  4. 合并单元格
     *   *  4.1 合并行单元格(colspan)
         *  4.2 合并列单元格(rowspan)
     *  5. 表格格式设置
     *   *  5.1 单元格的对齐（align）（居中，左对齐，右对齐）
         *  5.2. 背景色&图片（bgcolor & background）
         *   *  5.2.1 单元格背景色&图片
             *  5.2.2 表格背景色&图片
         *  5.3 单元格的边距（cellpadding）
         *  5.4 单元格间的距离(cellspacing)
         *  5.5 显示部分边框（frame & rules）

## 1. 表格的定义 ##

`<table>` 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 `<tr>`、`<th>` 或 `<td>` 元素组成表格结构；其中： `<tr>` 元素定义表格行，`<th>` 元素定义表头，`<td>` 元素定义表格单元。  
为了让表格更美观，我们会用到：border，colspan，rowspan，align，bgcolor 等来美化表格，具体在本文都有讲解；

## 2. 表格的标签 ##

在HTML定义表格的时候，有以下标签供我们使用

<table> 
 <thead> 
  <tr> 
   <th>NO</th> 
   <th>表格标签</th> 
   <th>用处</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1</td> 
   <td><code>&lt;table&gt;</code></td> 
   <td>定义表格，生成的表格在一对<code>&lt;table&gt;&lt;/table&gt;</code>中；</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td><code>&lt;caption&gt;</code></td> 
   <td>定义表格标题，当表格需要标题时，使用<code>&lt;caption&gt;表格标题&lt;/caption&gt;</code></td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td><code>&lt;thead&gt;</code></td> 
   <td>定义表格的页眉</td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td><code>&lt;tbody&gt;</code></td> 
   <td>定义表格的主体</td> 
  </tr> 
  <tr> 
   <td>5</td> 
   <td><code>&lt;tfoot&gt;</code></td> 
   <td>定义表格的页脚</td> 
  </tr> 
  <tr> 
   <td>6</td> 
   <td><code>&lt;th&gt;</code></td> 
   <td>定义表格的表头，一般是表头中的内容会被加黑；</td> 
  </tr> 
  <tr> 
   <td>7</td> 
   <td><code>&lt;tr&gt;</code></td> 
   <td>定义表格的行</td> 
  </tr> 
  <tr> 
   <td>8</td> 
   <td><code>&lt;td&gt;</code></td> 
   <td>定义表格单元格</td> 
  </tr> 
  <tr> 
   <td>9</td> 
   <td><code>&lt;col&gt;</code></td> 
   <td>定义用于表格列的属性</td> 
  </tr> 
  <tr> 
   <td>10</td> 
   <td><code>&lt;colgroup&gt;</code></td> 
   <td>定义表格列的组</td> 
  </tr> 
 </tbody> 
</table>

## 3. 单元格边框(border) ##

表格边框：在使用`<table border="1"></table>` 的方式来定义，其中：数字表示边框的宽度，单位为像素；以下举三个边框的例子；

<table>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>1</td>
            <td>马里奥</td>
            <td>男</td>
        </tr>
        <tr>
            <td>2</td>
            <td>桃花公主</td>
            <td>女</td>
        </tr>
    
    </table>
    
    <br>
    
    <table border="2">
        <tr>
            <th> 编号 </th>
            <th>姓名</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>1</td>
            <td>马里奥</td>
            <td>男</td>
        </tr>
        <tr>
            <td>2</td>
            <td>桃花公主</td>
            <td>女</td>
        </tr>
    
    </table>
    <br>
    
    
    <table border="10">
        <tr>
            <th> 编号 </th>
            <th>姓名</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>1</td>
            <td>马里奥</td>
            <td>男</td>
        </tr>
        <tr>
            <td>2</td>
            <td>桃花公主</td>
            <td>女</td>
        </tr>
    
    </table>

上述代码效果：  
![在这里插入图片描述][20201015170351498.png_pic_left]

## 4. 合并单元格 ##

合并单元格时，合并行使用：colspan=“2”； 合并列使用：rowspan=“2” （这里的 ‘2’ 表明合并两个单元格），举例如下：

### 4.1 合并行单元格(colspan) ###

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML表格合并单元格--张凯</title>
    </head>
    <body>
    
    <h4>合并行单元格：</h4>
    <table border="1">
    <caption>通讯录</caption>
    <tr>
      <th>姓名</th>
      <th colspan="2">邮箱</th>
    </tr>
    <tr>
      <td>zhang kai</td>
      <td>123456@qq.com</td>
      <td>123456@163.com</td>
    </tr>
    </table>
    
    </body>
    </html>

上述代码效果：  
![在这里插入图片描述][20201015164644796.png_pic_left]

### 4.2 合并列单元格(rowspan) ###

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML表格合并单元格--张凯</title>
    </head>
    <body>
    
    <h4>合并列单元格：</h4>
    <table border="1">
    <tr>
      <th>姓名</th>
      <td>Bill Gates</td>
    </tr>
    <tr>
      <th rowspan="3">邮箱</th>
      <td>123456@qq.com</td>
    </tr>
    <tr>
      <td>123456@163.com</td>
    </tr>
    <tr>
      <td>123456@sina.com</td>
    </tr>
    </table>
    
    </body>
    </html>

上述代码效果：  
![在这里插入图片描述][20201015164549886.png_pic_left]

## 5. 表格格式设置 ##

### 5.1 单元格的对齐（align）（居中，左对齐，右对齐） ###

在对应的标签上增加 align 键值对，生效方式为"就近原则"，如下例中，桃花公主单元格为left生效；

<table> 
 <thead> 
  <tr> 
   <th>align 值</th> 
   <th>left</th> 
   <th>center</th> 
   <th>right</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>效果</td> 
   <td>左对齐</td> 
   <td>居中</td> 
   <td>右对齐</td> 
  </tr> 
 </tbody> 
</table>

上述代码效果（为了看清效果，所以设置了表格宽度 width=“600” ）：  
![在这里插入图片描述][20201015171748937.png_pic_left]

### 5.2. 背景色&图片（bgcolor & background） ###

*  添加背景色使用：bgcolor
 *  添加背景图片使用：background

#### 5.2.1 单元格背景色&图片 ####

在单元格的标签上增加 bgcolor 或者 background，就可以添加背景色或者背景图片，以背景色为例；

上述代码效果：  
![在这里插入图片描述][20201015173349560.png_pic_left]

#### 5.2.2 表格背景色&图片 ####

在表格的标签上增加bgcolor 或者 background，就可以添加背景色或者背景图片，以背景图片为例；

上述代码效果（由于我挑了一张动态图，所以这里的背景是动态的！）：  
![在这里插入图片描述][20201015172948141.png_pic_left]

### 5.3 单元格的边距（cellpadding） ###

在`<table></table>`标签使用cellpadding 即可，方法与上面的图片一样，直接举例如下：

上述代码效果：  
![在这里插入图片描述][2020101517390019.png_pic_left]

### 5.4 单元格间的距离(cellspacing) ###

在`<table></table>`标签使用 cellspacing 即可，方法与上面的图片一样，直接举例如下：

上述代码效果：  
![在这里插入图片描述][20201015174039360.png_pic_left]

### 5.5 显示部分边框（frame & rules） ###

*  可以在`<table></table>`标签内，增加 frame 键值对，控制表格外边框；键值对对应关系如下：

<table> 
 <thead> 
  <tr> 
   <th>frame 键值</th> 
   <th>效果</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>void</td> 
   <td>不显示外侧边框</td> 
  </tr> 
  <tr> 
   <td>above</td> 
   <td>显示上部的外侧边框</td> 
  </tr> 
  <tr> 
   <td>below</td> 
   <td>显示下部的外侧边框</td> 
  </tr> 
  <tr> 
   <td>hsides</td> 
   <td>显示上部和下部的外侧边框</td> 
  </tr> 
  <tr> 
   <td>vsides</td> 
   <td>显示左边和右边的外侧边框</td> 
  </tr> 
  <tr> 
   <td>lhs</td> 
   <td>显示左边的外侧边框</td> 
  </tr> 
  <tr> 
   <td>rhs</td> 
   <td>显示右边的外侧边框</td> 
  </tr> 
  <tr> 
   <td>box</td> 
   <td>在所有四个边上显示外侧边框</td> 
  </tr> 
  <tr> 
   <td>border</td> 
   <td>在所有四个边上显示外侧边框</td> 
  </tr> 
 </tbody> 
</table>

*  可以在`<table></table>`标签内，增加 rules 键值对，控制表格外边框；键值对对应关系如下：

<table> 
 <thead> 
  <tr> 
   <th>frame 键值</th> 
   <th>效果</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>none</td> 
   <td>没有线条</td> 
  </tr> 
  <tr> 
   <td>groups</td> 
   <td>位于行组和列组之间的线条</td> 
  </tr> 
  <tr> 
   <td>rows</td> 
   <td>位于行之间的线条</td> 
  </tr> 
  <tr> 
   <td>cols</td> 
   <td>位于列之间的线条</td> 
  </tr> 
  <tr> 
   <td>all</td> 
   <td>位于行和列之间的线条</td> 
  </tr> 
 </tbody> 
</table>

*  frame 举例如下：

输出效果：  
![在这里插入图片描述][20201015175419642.png_pic_left]

*  rules举例如下：

输出效果：  
![在这里插入图片描述][2020101517554236.png_pic_left]

[20201015170351498.png_pic_left]: /images/20221123/430cc06b333e4edaa88abcdd54c32dc8.png
[20201015164644796.png_pic_left]: /images/20221123/cc5403ec00554b51a2871f91b8e3b5b5.png
[20201015164549886.png_pic_left]: /images/20221123/998e7b2513b5465b9f8ec9de8b451eee.png
[20201015171748937.png_pic_left]: /images/20221123/9e7ab09c458c4dca9ec66e9da7c4c4c7.png
[20201015173349560.png_pic_left]: /images/20221123/0a506ff946e14467ba3a2cb884f4789e.png
[20201015172948141.png_pic_left]: /images/20221123/513b6beca6654f5b8158189e97bcb133.png
[2020101517390019.png_pic_left]: /images/20221123/12ebcb21a2e84bbc8a7903c3df617bb2.png
[20201015174039360.png_pic_left]: /images/20221123/07dd3c2114514201bd0df5da13dca1ca.png
[20201015175419642.png_pic_left]: /images/20221123/107ae4e67d91440ab1362cf75eac60a7.png
[2020101517554236.png_pic_left]: /images/20221123/7c8d0e501cf54932ad471d36d62e4040.png