iT邦幫忙

2025 iThome 鐵人賽

DAY 3
0
自我挑戰組

網頁設計自我挑戰 - 從零開始系列 第 3

資訊的整理:清單與表格

  • 分享至 

  • xImage
  •  

一個好的網頁不只是把所有東西都堆在一起,如何有效地整理資訊也很重要。今天我要學習兩種強大的工具:清單和表格,它們能讓資訊變得有條理、易於閱讀。

  • 清單標籤:

    • 無序清單 <ul>:用來列出沒有特定順序的項目。例如,興趣愛好、購物清單等。每個項目都用 <li> (list item) 標籤包起來。

    • 有序清單 <ol>:用來列出有特定順序的項目。例如,步驟教學、排名等。同樣,每個項目都用 <li> 標籤。

  • 表格標籤 <table>

    • 用來呈現結構化的數據,像課程表、產品規格等。

    • <thead>:表格標題區。

    • <tbody>:表格主體區。

    • <tr>:表格中的每一行 (row)。

    • <th>:表格標題儲存格 (header)。

    • <td>:表格數據儲存格 (data)。

我用清單和表格來呈現我的興趣和課程表。

HTML

<body>
  <h1>我的興趣</h1>
  <ul>
    <li>追劇</li>
    <li>看電影</li>
    <li>打羽球</li>
  </ul>

  <h1>我的課程表</h1>
  <table>
    <thead>
      <tr>
        <th>時間</th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>上午</td>
        <td>國文</td>
        <td>學涯規劃</td>
        <td>程式設計</td>
        <td>軟體工程</td>
        <td>離散數學</td>
      </tr>
      <tr>
        <td>下午</td>
        <td>計算機概論</td>
        <td>體育</td>
        <td>軟體工程</td>
        <td></td>
        <td>線性代數</td>
      </tr>
    </tbody>
  </table>
</body>

透過這些標籤,網頁已經能呈現更多樣化的內容。但這個網頁看起來還是很樸素,明天要讓網頁的造型師 - CSS,來讓它變得更美觀。

執行成果 :
https://ithelp.ithome.com.tw/upload/images/20250810/20171037d81YUDmkKU.png


上一篇
網頁的靈魂標籤:文字、標題與段落
下一篇
網頁的造型師:CSS
系列文
網頁設計自我挑戰 - 從零開始26
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言