html5 列表/表格标签_h5表格-CSDN博客

本文链接：https://blog.csdn.net/weixin_49346755/article/details/127127632

HTML的列表主要有三种，一种是无序列表，一种是有序列表，还有一种是说明列表。无序列表用<ul>标签来定义，有序列表用<ol>标签来定义，说明列表用<dl>标签来定义。对于无序列表和有序列表，用<li>标签来定义列表中项目；对于说明列表，用<dt>标签来定义列表项目，用<dd>标签来定义项目的说明。

HTML中的表格用<table>标签来定义。一个 HTML 表格包括一个<table> 标签，一个或多个<tr>、<th> 以及 <td> 标签。<tr> 标签定义表格行，<th> 标签定义表头，<td> 标签定义表格单元。更复杂的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 标签。

1、列表

通过结合<ul>标签和<li>标签可以创建一个无序列表。无序列表是可以嵌套的，也就是无序列表中在放入无序列表。无序列表可以嵌套，且无序列表的图标也会有变化，但不会全部都有变化，一般也就前三层图标有变化，其他的就不变了。

<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

Coffee
Tea
Milk

<ul>
    <li>Coffee</li>
    <ul>
        <li>Tea</li>
        <li>Milk</li>
    </ul>
</ul>

Coffee
- Tea
- Milk

同理，结合<ol>标签和<li>标签可以组成有序列表。

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Coffee
Tea
Milk

使用<dl>标签、<dt>标签、<dd>标签可以创建一个说明列表。

<dl>
  <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

Coffee

Black hot drink

Milk

White cold drink

2、表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

Month	Savings
January	$100
February	$80

<caption>标签用于表示表格的标题，<thead> 标签用于组合 HTML 表格的表头内容。<thead> 标签应该与 <tbody> 和 <tfoot> 标签结合起来使用，用来规定表格的各个部分（表头、主体、页脚）。

<table>
  <caption>Monthly savings</caption>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

Monthly savings
Month	Savings
January	$100
February	$80
Sum	$180

<col> 标签规定了 <colgroup> 标签内部的每一列的列属性。通过使用 <col> 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。使用span属性规定 <col>标签应该横跨的列数。

<table>
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>