Skip to content

Latest commit

 

History

History

04_List

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 

WTF HTML极简教程: 4. 列表和表格

WTF HTML教程,帮助新人快速入门HTML。

推特@WTFAcademy_@0xAA_Science

WTF Academy社群: 官网 wtf.academy | WTF Solidity教程 | discord | 微信群申请

所有代码和教程开源在github: github.com/WTFAcademy/WTF-HTML


HTML 中的列表和表格标签是构建网页的重要工具,它们可以帮助我们组织和显示数据。以下是关于列表和表格的一些基本信息。

列表

在HTML中,有三种类型的列表:

  1. 无序列表(Unordered list):使用<ul>元素来创建,每个列表项都要用<li>元素来表示。
  2. 有序列表(Ordered list):使用<ol>元素来创建,列表项同样用<li>元素来表示,不同的是它们会自动添加序号。
  3. 定义列表(Definition list):使用<dl>元素创建,包含<dt>(定义标题)和<dd>(定义描述)元素。

下面我们详细介绍每种列表的用法和特点。

无序列表

无序列表是最常见的列表类型,它在每个列表项前添加一个小圆点(也叫做列表符号)。它使用 <ul> 作为列表的容器,而 <li> 作为描述具体的列表项。例如:

<ul>
  <li>BTC</li>
  <li>ETH</li>
  <li>SHIB</li>
</ul>

浏览器中效果:

  • BTC
  • ETH
  • SHIB

有序列表

相对于无序列表,有序列表的每个列表项会使用数字进行标记。有序列表始使用 <ol> 作为列表的容器,同样使用 <li> 描述具体的列表项。例如:

<ol>
<li>BTC</li>
<li>ETH</li>
<li>SHIB</li>
</ol>

浏览器中显示如下:

  1. BTC
  2. ETH
  3. SHIB

定义列表

定义列表由<dl>(定义列表)、<dt>(定义项)和<dd>(定义描述)元素组成。定义列表通常用来展示一组术语和它们的定义。

<dl>
  <dt>BTC</dt>
  <dd>- desc1</dd>
  <dd>- desc2</dd>
  <dt>ETH</dt>
  <dd>- desc1</dd>
  <dd>- desc2</dd>
</dl>

浏览器显示如下:

BTC
- desc1
- desc2
ETH
- desc1
- desc2

表格

基础表格

表格可以用于展示二维的数据,它使用 <table>作为表格的容器

内部使用 <tr>(table row)表示一行的数据

<tr>内部使用 <th>表示表格每列的标题,使用 <td>表示该行每列,存放具体的数据;

具体示例如下:

<table>
  <tr>
    <th>Name</th>
    <th>Code</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>比特币</td>
    <td>BTC</td>
    <td>19969</td>
  </tr>
  <tr>
    <td>以太币</td>
    <td>ETH</td>
    <td>1,354</td>
  </tr>
</table>

浏览器显示如下:

Name Code Price
比特币 BTC 19969
以太币 ETH 1,354

<thead><tbody><tfoot>

<thead><tbody><tfoot>元素结合起来使用,用来规定表格的各个部分(表头、主体、页脚)

示例如下:

<table>
  <thead>
    <tr>
      <th>Token</th>
      <th>Cost</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>180</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>BTC</td>
      <td>100</td>
    </tr>
    <tr>
      <td>ETH</td>
      <td>80</td>
    </tr>
  </tbody>
</table>

浏览器显示如下:

Token Cost
Total 180
BTC 100
ETH 80

合并表格

合并表格可以使用 <td><th>colspanrowspan属性,其中colspan用于水平合并多行,rowspan用于垂直合并多列。

示例如下:

<table>
  <tr>
    <th>Token</th>
    <th>Price</th>
    <th>Total</th>
  </tr>
  <tr>
    <td>BTC</td>
    <td>100</td>
    <td rowspan="2">300</td>
  </tr>
  <tr>
    <td>ETH</td>
    <td>200</td>
  </tr>
</table>

浏览器显示如下:

Token Price Total
BTC 100 300
ETH 200

总结

这一讲我们介绍了 HTML 中的列表和表格。通过学习这些标签,你已经能够创建结构化的列表和表格,这是构建高质量网页的重要步骤。