html 表格的使用

深碍√TFBOYSˉ_ 2023-10-06 23:20 20阅读 0赞

#### 阅读目录 ####

*  表格的定义
 *   *  表格的标签
     *  显示部分边框（frame & rules）
     *  练习1
     *  练习2

## 表格的定义 ##

`<table>` 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 `<tr>` 、`<th>` 或 `<td>` 元素组成表格结构；

其中：`<tr>` 元素定义表格行， `<th>` 元素定义表头，`<td>` 元素定义表格单元。

为了让表格更美观，我们会用到：`border，colspan，rowspan，align，valign，bgcolor`等来美化表格。

### 表格的标签 ###

在HTML定义表格的时候，会使用以下标签：

<table> 
 <tbody> 
  <tr> 
   <td>表格标签</td> 
   <td>&nbsp;用处</td> 
  </tr> 
  <tr> 
   <td> <p>&lt;table&gt;&nbsp;&nbsp; &nbsp;</p> </td> 
   <td>定义表格，生成的表格在一对&lt;table&gt;&lt;/table&gt;中；</td> 
  </tr> 
  <tr> 
   <td>&lt;caption&gt;&nbsp;&nbsp;</td> 
   <td>&nbsp;定义表格标题，当表格需要标题时，使用&lt;caption&gt;表格标题&lt;/caption&gt;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;&lt;thead&gt;&nbsp;&nbsp; &nbsp;</td> 
   <td>定义表格的页眉</td> 
  </tr> 
  <tr> 
   <td>&lt;tbody&gt;&nbsp;&nbsp; &nbsp;</td> 
   <td>定义表格的主体</td> 
  </tr> 
  <tr> 
   <td>&lt;tfoot&gt;&nbsp;&nbsp; &nbsp;</td> 
   <td>定义表格的页脚</td> 
  </tr> 
  <tr> 
   <td>&lt;th&gt;&nbsp;&nbsp; &nbsp;</td> 
   <td>定义表格的表头，一般是表头中的内容会被加黑；(用于表格标题)</td> 
  </tr> 
  <tr> 
   <td>&lt;tr&gt;&nbsp;&nbsp; &nbsp;</td> 
   <td>定义表格的行&nbsp; &nbsp; （注意：tr可以设置高度 不能设置宽度）</td> 
  </tr> 
  <tr> 
   <td>&lt;td&gt;&nbsp;&nbsp; &nbsp;</td> 
   <td>定义表格单元格 （注意：td可以设置宽度 不能设置高度）</td> 
  </tr> 
  <tr> 
   <td>&lt;col&gt;&nbsp;&nbsp; &nbsp;</td> 
   <td>定义用于表格列的属性</td> 
  </tr> 
  <tr> 
   <td>&lt;colgroup&gt;&nbsp;&nbsp; &nbsp;</td> 
   <td>定义表格列的组</td> 
  </tr> 
 </tbody> 
</table>

--------------------

> 单元格边框 (border)

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

> 合并单元格

1 合并行单元格：colspan 是水平方向单元格的合并

2 合并列单元格：rowspan 是上下方向单元格的合并

> 单元格的对齐

1.水平对齐（align）（居中，左对齐，右对齐）

在对应的标签上增加 align 键值对，生效方式为"就近原则"

<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>

2、垂直对齐（valign）（居中，上对齐，下对齐）

> 背景色&图片（bgcolor & background）

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

> 单元格的边距（cellpadding）

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

![在这里插入图片描述][87861898e74e479ba42bfca4d942c2ad.png]  
单元格间的距离(cellspacing)

![在这里插入图片描述][d3028a3d258b4da89c13fdcb3c56a80d.png]

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

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

<table> 
 <tbody> 
  <tr> 
   <td>frame 键值&nbsp;&nbsp;</td> 
   <td>&nbsp;效果</td> 
  </tr> 
  <tr> 
   <td>void&nbsp;&nbsp; &nbsp;</td> 
   <td>不显示外侧边框</td> 
  </tr> 
  <tr> 
   <td>above&nbsp;&nbsp; &nbsp;</td> 
   <td>显示上部的外侧边框</td> 
  </tr> 
  <tr> 
   <td>below&nbsp;&nbsp; &nbsp;</td> 
   <td>显示下部的外侧边框</td> 
  </tr> 
  <tr> 
   <td>hsides&nbsp;&nbsp; &nbsp;</td> 
   <td>显示上部和下部的外侧边框</td> 
  </tr> 
  <tr> 
   <td>vsides&nbsp;&nbsp; &nbsp;</td> 
   <td>显示左边和右边的外侧边框</td> 
  </tr> 
  <tr> 
   <td>lhs&nbsp;&nbsp;</td> 
   <td>&nbsp;显示左边的外侧边框</td> 
  </tr> 
  <tr> 
   <td>rhs&nbsp;&nbsp; &nbsp;</td> 
   <td>显示右边的外侧边框</td> 
  </tr> 
  <tr> 
   <td>box&nbsp;&nbsp; &nbsp;</td> 
   <td>在所有四个边上显示外侧边框</td> 
  </tr> 
  <tr> 
   <td>border&nbsp;</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>

### 练习1 ###

![在这里插入图片描述][7893ebaa0ca140278a0550c6dc144cb4.png]

<!DOCTYPE html>
    <html lang="en">
     
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
     
    <body>
        <h3>
            <center>武隆区中小微企业贷款贴息项目申请表</center>
        </h3>
     
        <table width="600" border="1" cellspacing="0" cellpadding="0" align="center">
            <tr align="center">
                <td width="100">统一社会<br>信用代码</td>
                <td colspan="2" width="200"></td>
                <td width="100">企业所在地</td>
                <td width="200" colspan="2"></td>
     
            </tr>
            <tr align="center" height="60">
                <td width="100">法人代表</td>
                <td width="100"></td>
                <td width="100">联系方式</td>
                <td></td>
                <td width="100">上年度营业收入（万元）</td>
                <td width="100"></td>
            </tr>
            <tr height="30" align="center">
                <td colspan="2">上年度实交税金（万元）</td>
                <td></td>
                <td colspan="2">企业缴纳社保人数（人）</td>
                <td></td>
            </tr>
            <tr height="" align="center">
                <td>贷款所用<br>项目名称</td>
                <td colspan="2"></td>
                <td width="80">申请贴息<br>金额（万元）</td>
                <td colspan="2"></td>
            </tr>
            <tr align="center" height="30">
                <td rowspan="3" width="100" >贷款银行名称</td>
                <td></td>
                <td rowspan="3">贷款金额</td>
                <td></td>
                <td rowspan="3">已支付利息</td>
                <td></td>
            </tr>
            <tr align="center" height="30">
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr align="center" height="30">
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr  align="center" height="30">
                <td rowspan="2" >银行开户许可证信息</td>
                <td colspan="2" >账户名称</td>
                <td>开户行</td>
                <td colspan="2">账号</td>
                
            </tr>
            <tr align="center" height="30">
                <td colspan="2"></td>
                <td></td>
                <td colspan="2"></td>
                
            </tr>
            <tr>
                <td colspan="3">是否列入国家信用系统严重失信企业名单和重大税法违法案件信息公布名单</td>
                <td colspan="3"></td>
            </tr>
     
        </table>
    </body>
     
    </html>

### 练习2 ###

![在这里插入图片描述][6aff684e746049eea4775f57a1d9b967.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>名单</title>
       
    </head>
    <body>
        <table align="center" style="font-size: 10px;">
            <tr class="title" height="30" align="center">
                <th width="60" bgcolor="#EB7030">姓名</th>
                <th width="180" bgcolor="#EBA330">入职企业</th>
                <th width="100" bgcolor="#FFC91C">入职时间</th>
                <th width="120" bgcolor="#6EB540">技术方向</th>
                <th width="80" bgcolor="#78A782">试用期</th>
                <th width="70" bgcolor="#9FEC30">转正</th>
            </tr>
            <tr height="30" align="center">
                <td>王月</td>
                <td>东方文化出版社</td>
                <td>2013-03-06</td>
                <td>UI设计师</td>
                <td>4200</td>
                <td>5800</td>
            </tr>
            <tr height="30" align="center" bgcolor="#E9E9E9">
                <td>刘文玉</td>
                <td>北京慧聪邓白氏研究公司</td>
                <td>2013-02-03</td>
                <td>BENET网络工程师</td>
                <td>6000</td>
                <td>8000</td>
            </tr>
            <tr height="30" align="center">
                <td>吕方</td>
                <td>北大青鸟研究院</td>
                <td>2013-05-15</td>
                <td>网络营销师</td>
                <td>4500</td>
                <td>5600</td>
            </tr>
            <tr height="30" align="center" bgcolor="#E9E9E9">
                <td>杨亚</td>
                <td>上海白林广告公司</td>
                <td>2013-06-17</td>
                <td>Java工程师</td>
                <td>3500</td>
                <td>4500</td>
            </tr>
            <tr height="30" align="center">
                <td>白杨</td>
                <td>东方文化出版社</td>
                <td>2013-03-03</td>
                <td>网页制作师</td>
                <td>3000</td>
                <td>4000</td>
            </tr>
            <tr height="30" align="center" bgcolor="#E9E9E9">
                <td>杨文</td>
                <td>惠星文化传媒公司</td>
                <td>2013-06-03</td>
                <td>营销经理</td>
                <td>6800</td>
                <td>8800</td>
            </tr>
            <tr height="30" align="center">
                <td>张智</td>
                <td>北京动力研究院</td>
                <td>2013-02-08</td>
                <td>力学研究专员</td>
                <td>12000</td>
                <td>18000</td>
            </tr>
            <tr height="30" align="center" bgcolor="#E9E9E9">
                <td>成方</td>
                <td>北大青鸟研究院</td>
                <td>2013-02-03</td>
                <td>软件工程师</td>
                <td>6000</td>
                <td>8000</td>
            </tr>
            <tr height="30" align="center">
                <td>陈苹</td>
                <td>北京动力研究院</td>
                <td>2013-02-09</td>
                <td>办公室主任</td>
                <td>12000</td>
                <td>18000</td>
            </tr>
        </table>  
    </body>
    </html>

[87861898e74e479ba42bfca4d942c2ad.png]: https://img-blog.csdnimg.cn/87861898e74e479ba42bfca4d942c2ad.png
[d3028a3d258b4da89c13fdcb3c56a80d.png]: https://img-blog.csdnimg.cn/d3028a3d258b4da89c13fdcb3c56a80d.png
[7893ebaa0ca140278a0550c6dc144cb4.png]: https://img-blog.csdnimg.cn/7893ebaa0ca140278a0550c6dc144cb4.png
[6aff684e746049eea4775f57a1d9b967.png]: https://img-blog.csdnimg.cn/6aff684e746049eea4775f57a1d9b967.png