List and Table(有序列表&無序列表&表格) | HTML

使用 HTML 中列表和表格！列表結構的內容，或用表格以邏輯方式條列資訊。

HTML 的 <ul> 、 <ol> 和 <table> 標籤，在前端開發會高頻率的使用到。學會如何創建有序和無序列表以及表格是非常用重要的。無論你是網頁開發初心者還是需要快速複習，掌握這些 HTML 基礎知識能幫助你的網站資料以更清晰明瞭的方式呈現給你的使用者。

See the Pen List and Table(有序列表&無序列表&表格)-HTML by lenrich (@lenrich) on CodePen.

範例

<!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>
    <style>
      table {
        width: 600px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <!-- 無序列表 -->
		<!-- <ul style="list-style-type: disc"> -->
    <!-- <ul style="list-style-type: circle"> -->
    <!-- <ul style="list-style-type: square"> -->
    <ul> <!-- unorder list -->
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>

    <!-- 有序列表 -->
    <!-- <ol type="1"> -->
    <!-- <ol type="a"> -->
    <!-- <ol type="I"> -->
    <!-- <ol type="i"> -->
    <ol> <!-- order list -->
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ol>

    <!-- 嵌套列表 -->
    <!-- Item速寫出兩個 li*2 -->
    <ul>
      <li>Item 1</li>
      <li>
        Item 2
        <ul>
          <li>嵌套Item 1</li>
          <li>嵌套Item 2</li>
        </ul>
      </li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>

    <!-- 表格 -->
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年齡</th>
          <th>email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Summer</td>
          <td>19</td>
          <td>summer@test.com</td>
        </tr>
        <tr>
          <td>Lucy</td>
          <td>20</td>
          <td>lucy@test.com</td>
        </tr>
        <tr>
          <td>Allen</td>
          <td>31</td>
          <td>allen@test.com</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>