HTML-表格教學

by wish | 12 月 19, 2024 | 程式 | 0 comments

除非你都寫活動網站，如果是寫跟ERP或決策支援系統有關的一定會用到表格。

這一課試著用jsfiddle來設計網頁

Table of Contents

簡單的表格

（按下RESULT可以檢視結果）

表格的rol col

橫的稱為row
直的稱為col
這個範例因為沒在css指定表格框線，所以目前沒有框線。

HTML的表格是先橫的再直的，先用<tr></tr> ，包住定義row，再tr tag內放<td>來定義列

接下來我們用CSS指定框線

如果每一列的td數量不太相同，就會出現醜醜空缺，解決方法則是補上空的

補上空的td

<th>跟<theader>標題列

表格本身可以指定標題列

表格的th

這個範例是除了第一列以外，其它列也可以使用th來告訴瀏覽器哪些是表頭，接著我有在CSS將表頭文字顏色改為藍色。

合併儲存格（跨欄rowspan/跨列colspan）

橫的合併colspan
直的合併rowspan
被合併的其實不用寫td，就當作把原本那格稱開來就好

表格合併範例：購買明細

可以算一下，橫的row總共5，col也是5，先畫出5*5的表格，標頭地方使用th

填入內容

程式碼如下

<html>
  <head>
    <style>
      table {
        border-collapse: collapse;
        border-spacing: 0px;
      }
      table,
      th,
      td {
        padding: 5px;
        border: 1px solid black;
      }
      th {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h4>表格合併欄位範例 colspan(橫向)</h4>
    <table>
      <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
      </tr>
      <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
      </tr>
      <tr>
        <th></th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th></th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </body>
</html>

再來填入內容

填入內容

<html>
  <head>
    <style>
      table {
        border-collapse: collapse;
        border-spacing: 0px;
      }
      table,
      th,
      td {
        padding: 5px;
        border: 1px solid black;
      }
      th {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h4>表格合併欄位範例 colspan(橫向)</h4>
    <table>
      <tr>
        <th>購買明細</th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
      </tr>
      <tr>
        <th>項次</th>
        <th>項目</th>
        <th>單價</th>
        <th>數量</th>
        <th>小計</th>
      </tr>
      <tr>
        <th>1</th>
        <td>iPhone Pro Max</td>
        <td>39,999</td>
        <td>1</td>
        <td>39,999</td>
      </tr>
      <tr>
        <th>2</th>
        <td>Air Pod Pro</td>
        <td>6000</td>
        <td>2</td>
        <td>12,000</td>
      </tr>
      <tr>
        <td></td>
        <td>總價</td>
        <td>41,999</td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </body>
</html>

設定colspan屬性

 <tr>
        <th>購買明細</th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
      </tr>

改為

 <tr>
   <th colspan="5">購買明細</th>
 </tr>

（稱開欄位後，要一併刪除不需要的欄位）

最終完成的程式碼：

垂直合併欄位 rowspan

這個功能比較不常用，但還是需要知道。

垂直合併範例

完成品

<html>
  <head>
    <style>
      table {
        border-collapse: collapse;
        border-spacing: 0px;
      }
      table,
      th,
      td {
        padding: 5px;
        border: 1px solid black;
      }
      th {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h4>表格合併欄位範例 rowspan(直向)</h4>
    <table>
      <tr>
        <th></th>
        <th>時間</th>
        <th>活動</th>
      </tr>

      <tr>
        <th rowspan="3">上午</th>
        <td>8:00-9:00</td>
        <td>研習課程1</td>
      </tr>
      <tr>
        <td>9:01-10:00</td>
        <td>研習課程2</td>
      </tr>
      <tr>
        <td>11:01-12:00</td>
        <td>自由活動</td>
      </tr>
      <tr>
        <th rowspan="4">下午</th>
        <td>13:00-15:00</td>
        <td>大地遊戲</td>
      </tr>
      <tr>
        <td>15:00-15:30</td>
        <td>盥洗休息</td>
      </tr>
      <tr>
        <td>15:30-16:00</td>
        <td>點心時間</td>
      </tr>
      <tr>
        <td>16:00-17:00</td>
        <td>心得分享</td>
      </tr>
    </table>
  </body>
</html>

表格合併綜合測驗

製作一個這樣的表格。

解答

問題解答

<html>
  <head>
    <style>
      table {
        border-collapse: collapse;
        border-spacing: 0px;
      }
      table,
      th,
      td {
        padding: 5px;
        border: 1px solid black;
      }
      th {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h4>表格合併欄位綜合測驗</h4>
    <!--從這邊開始寫-->
    <table style="width: 100px; height: 100px">
      <tr>
        <td colspan="2"></td>
        <td rowspan="2"></td>
      </tr>
      <tr>
        <td rowspan="2"></td>
        <td></td>
      </tr>
      <tr>
        <td colspan="2"></td>
      </tr>
    </table>
  </body>
</html>