HTML中常用的列表标签和表格标签！

最新推荐文章于 2025-03-01 08:30:00 发布

CH040708

最新推荐文章于 2025-03-01 08:30:00 发布

阅读量1.4k

点赞数 25

文章标签： html 前端 java

本文链接：https://blog.youkuaiyun.com/CH040708/article/details/142306289

版权

# 本文详细介绍HTML中列表标签中无序列表和有序列表两种类型<ul> </ul>、<ol> </ol>的和表格标签<table></table>、<tr></tr>、<th></th>的使用#

一、常用的列表标签和表格标签

1. 列表标签

①前言

在HTML中，列表、表格和表单是用于展示和交互数据的重要元素。在HTML中列表标签通常指的是它使用 <ul> </ul>、<ol> </ol>标签来定义，它们分别用于不同的数据组织需求。

②有序标签<ul>和无序列表<ol>

无序列表<ul>：

顾名思义，是一组没有特定顺序的项目列表。它使用 <ul> 标签来定义，其中每个列表项使用 <li> 标签定义。

无序列表中type属性：

<ul type="disc">	符号为实心圆点 ●
<ul type=“circle”>	符号为空心圆点 ○
<ul type=“aquare”>	符号为方块 ■
<ul type=“mygraph. gif”>	符号为指定的名为“mygraph. gif”的图片文件

<body>
<h1>（无序标签）商场支付向导</h1>
    <ul type="circle">
        <li>支付方式</li>
        <ul type="disc"> 
          <li>货到付款</li>
          <li>财付通</li>
          <li>支付宝</li>
          <li>网银在线</li>
        </ul>
    </ul>
</body>

运行代码后如下：

有序列表<ol>：

则是一组有特定顺序的项目列表，其顺序可以通过数字、字母或罗马数字来表示。有序列表使用 <ol> 标签来定义，而每个列表项同样使用 <li> 标签定义。

有序列表中type属性：

<ul type=“1”>	序号为数字
<ul type=“A”>	序号为大写英文字母
<ul type=“a”>	序号为小写英文字母
<ul type=“I”>	序号为大写罗马字母
<ul type=“i”>	序号为小写罗马字母

<body>
 <h1>（有序标签）商场支付向导</h1>
    <ol type="A">
        <li>选择您要使用的网上银行</li>
        <li>显示您的应付总价。点击“确认无误，付款”</li>
        <li>确认您在银行的预留信息，点击确定</li>
        <li>输入您的网银账号、登录密码、验证码；</li>
        <li>支付成功，提示“已完成付款”</li>
    </ol>
</body>

运行代码后如下：

③定义列表<dl>

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以<dl>标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始

 <body>  
    <dl>
        <dt>北京 </dt>
        <dd>中国的首都</dd>
        <dt>广东</dt>
        <dd>经济发达地区</dd>
    </dl>
</body>

运行代码后如下：

和无序列表

、、

、

、

2. 表格标签<table>

①前言

表格标签是HTML中用来创建和组织表格的标记语言元素。
开发者可以在网页中添加各种类型的表格，如数据表、排名表和排版表等，使网页内容更加丰富和多样化。

②表格的基本语法：<table>、<tr>、<td>、<th>

<table> : 表格的标签

<tr> : 行的标签

<td> : 表项的标签

<th> : 标签文字按粗体显示

③表格的属性标签

border	像素	设置表格边框的宽度
width	像素和百分比	设置表格的宽度
height	像素和百分比	设置表格的高度
align	left、center、right	设置表格相对周围元素的对齐方式

<body>
<table border="1" width="350px" height="100">
     <tr align="center">
          <th></th>
          <th>教师人数</th>
          <th>学生人数</th>
          <th>总人数</th>        
     </tr>
     <tr align="center">
          <th>2021年</th>
          <td>40</td>
          <td>400</td>
          <td>440</td>         
     </tr>
     <tr align="center">
          <th>2024年</th>
          <td>250</td>
          <td>4000</td>
          <td>4200</td>        
     </tr>
</table>
</body>

运行代码后如下：

④表格数据的分组<thead>、<tbody>、<tfoot>

<caption> : 设置表格的标题

<thody> ：定义表格主体

<tfoot> : 定义表格的脚部

<body>
 <table  border="1" width="350px" height="100">
        <caption>这是一个标题</caption>
       <thead bgcolor="#F0E68C" align="center">
        <tr>
            <th></th>
            <th>数学</th>
            <th>英语</th>
        </tr>   </thead>    
       <tbody>
        <tr>
            <td>王三</td>
            <td>85</td>
            <td>90</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>96</td>
            <td>86</td>
        </tr>   </tbody>
       <tfoot  bgcolor="#8FBC8D" align="center">
        <tr>
            <th>平均分</th>
            <th>90.5</th>
            <th>88</th>
        </tr>  </tfoot>  
    </table>
</body>

运行代码后如下：

⑤表格中单元格合并

<colspan> : 垂直合并 colspan=“所跨列数” eg：2，则表示跨两行 ( 保留上面的单元格，删除下面的单元格)

<rowspan> : 水平合并 rowspan="所跨行数" eg ：2 ，则表示跨两列

<body>
  <table border="1" width="350px" height="100">
      <tr align="center">
          <th></th>
          <th>教师人数</th>
          <th>学生人数</th>
          <th>总人数</th>
         
      </tr>
      <tr align="center">
          <th>2021年</th>
          <td colspan="2">40</td>
          <td rowspan="2">440</td>
         
      </tr>
      <tr align="center">
          <th>2022年</th>
          <td >50</td>
          <td>550</td>
        
      </tr>
      <tr align="center">
          <th>2023年</th>
          <td rowspan="2" colspan="2">60</td>
          <td >660</td>       
      </tr>
      <tr align="center">
          <th>2024年</th>
          <td >70</td>
      </tr>
  </table>
</body>

运行代码后如下：