HTML的基础标签之列表和表格_html的列表标记-CSDN博客

本文链接：https://blog.csdn.net/2402_90006143/article/details/146456372

列表

列表可分为有序列表、无序列和定义列表，无序列表标签为<ul>，列表项使用<li>;有序列表标签为<ol>，列表项使用<li>。（定义列表后补）

无序列表<ul>,无序列表是一个项目的列表,，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。（可以在ul后指定符合的样式，可设定ul中所有<li>标签的前导符号，如<ul type="circle">，符号为空心圆点，还有其他样式以及可以用图片）小技巧，ul*2>li*3可快速建立2个3行列表

示例代码：

    <ul type="none">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>
    <ul type="circle">
        <li>列表4</li>
        <li>列表5</li>
        <li>列表6</li>
    </ul>

运行结果如下：

同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。有序列表也可以改变前导符号，可以加入数字或字母等进行排列，如，<ol type="a">（也可以运用ol>li*n来进行快速创建列表）

示例代码：

    <ol type="1">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ol>
    <ol type="A">
        <li>列表4</li>
        <li>列表5</li>
        <li>列表6</li>
    </ol>

运行结果如下：

列表的嵌套（多级列表）

在HTML中，多级列表是一种嵌套列表的形式，可以包含多个层级的列表项。多级列表可以使用无序列表（<ul>）、有序列表（<ol>）和定义列表（<dl>）来实现。

示例嵌套有序列表和无序列表，示例代码：

    <ul type="none">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <ol type="1">
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
        </ol>   
    </ul>
    <ol type="A">
    <li>列表4</li>
    <li>列表5</li>
    <li>列表6</li>
        <ul type="circle">
        <li>列表4</li>
        <li>列表5</li>
        <li>列表6</li>
        </ul>
    </ol>

运行结果如下：

表格

HTML 表格由 <table> 标签来定义。HTML 表格是一种用于展示结构化数据的标记语言元素。（可以运用一些属性标签进行表格外观的改变，如border边框，width宽度等）

每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（<th>）用于定义列的标题。（一次性生成3行3列表格的快捷指领：table>tr*3>td*3）

简单的 HTML 表格代码示例：

    <table border="5rpx">
          <tr>
            <th>列标题1</th>
            <th>列标题2</th>
            <th>列标题3</th>
          </tr>
          <tr>
            <td>行1，列1</td>
            <td>行1，列2</td>
            <td>行1，列3</td>
          </tr>
          <tr>
            <td>行2，列1</td>
            <td>行2，列2</td>
            <td>行2，列3</td>
          </tr>
      </table>
      <table border="5rpx">
        <tr>
          <th>列标题1</th>
          <th>列标题2</th>
          <th>列标题3</th>
        </tr>
        <tr>
          <th>行标题1</th>
          <td>行1，列2</td>
          <td>行1，列3</td>
        </tr>
        <tr>
          <th>行标题2</th>
          <td>行2，列2</td>
          <td>行2，列3</td>
        </tr>
    </table>

运行结果如下：

表格的合并

表格的单元格可以通过属性rowspan进行向下合并，colspan进行向左合并。

一些改变表格的属性与表格合并示例代码如下：

<table border="1" width="500" height="300" style="background-color:pink">
        <tr style="background-color:darkgreen">
            <th style="background-color:blue">单元格1</th>
            <th>单元格2</th>
            <th>单元格3</th>
            <th>单元格4</th>
            <th>单元格5</th>
        </tr>
        <tr align="center">
            <th>单元格6</th>
            <td colspan="4">单元格7</td><!--合并4个应空3个单元格，多一个会加一行或一列-->
            <!--<td>单元格8</td>-->
            <!--<td>单元格9</td>-->
            <td>单元格10</td>
        </tr>
        <tr>
            <th>单元格11</th>
            <td>单元格12</td>
            <td>单元格13</td>
            <td>单元格14</td>
            <td rowspan="3">单元格15</td><!--单元格15合并了单元格20，单元格25-->
        </tr>
        <tr>
            <th scope="row">单元格16</th>
            <td colspan="2" rowspan="2">单元格17</td>
            <!--<td>单元格18</td>-->
            <td>单元格19</td>
            <!--<td>单元格20</td>-->
        </tr>
        <tr align="right">
            <th>单元格21</th>
            <!--<td>单元格22</td>-->
            <!--<td>单元格23</td>-->
            <td>单元格24</td>
            <!--<td>单元格25</td>-->
        </tr>
    </table>

运行结果如下：