HTML 程式札記 : <table> 表格

在網頁開發中，HTML 表格是展示資料的一種重要方式。本文將介紹HTML表格的基本結構和合併單元格，並通過實際範例幫助你理解。

HTML 表格結構

一個基本的HTML表格包括以下元素：

• <table>：定義表格的開始和結束。
• <tr>：表格中的一行。
• <th>：表頭單元格，加粗居中顯示。
• <td>：表格中的一個單元格。
• border屬性 : 用來設定表格的邊框厚度。

<table border="1">
  <tr>
    <th>名稱</th>
    <th>價格</th>
  </tr>
  <tr>
    <td>蘋果</td>
    <td>5元</td>
  </tr>
  <tr>
    <td>香蕉</td>
    <td>3元</td>
  </tr>
</table>

這個範例創建了一個兩列三行的表格，包括表頭和兩條數據記錄。

合併單元格

合併單元格可以使用colspan（跨列）和rowspan（跨行）屬性實現。

<table border="1">
  <tr>
    <th colspan="2">產品名稱</th>
    <th>價格</th>
  </tr>
  <tr>
    <td rowspan="2">水果</td>
    <td>蘋果</td>
    <td>5元</td>
  </tr>
  <tr>
    <td>香蕉</td>
    <td>3元</td>
  </tr>
  <tr>
    <td rowspan="2">蔬菜</td>
    <td>胡蘿蔔</td>
    <td>2元</td>
  </tr>
  <tr>
    <td>菠菜</td>
    <td>1元</td>
  </tr>
</table>

在這個範例中，展示了如何使用 rowspan 和 colspan 來合併多個單元格，以達到預期的表格佈局。

😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊

❤️按個愛心｜💬留言互動｜🔗分享此文｜📌追蹤阿梧｜☕請喝咖啡