搜尋

表格 <table><tr><td>

如果要在 HTML 裡放入表格,最基本是使用 <table><tr><td> 來製作表格,這篇教學會介紹如何在 HTML 裡放入表格並設計表格。

HTML 教學 - 表格 <table>、<tr>、<td>

認識 <table><tr><td>

<table><tr><td> 三個標籤,是 HTML 裡最基本也是必備的表格元素,三個元素需要按照表格的規範,共同組成一個表格:

表格元素 說明
<table> 表格本體。
<tr> 垂直列 ( row )。
<td> 水平欄 ( column )。
  • <table><tr><td> 屬於「容器元素」,需要有「起始標籤」以及「結束標籤」。
  • <table> 顯示類型為「table 表格元素」,預設會強制換行,內容只允許放入表格相關元素。
  • <tr> 顯示類型為「table-row 表格垂直列元素」,只能作為 <table><thead><tfoot><tbody> 的子元素。
  • <td> 顯示類型為「table-cell 表格水平欄元素」,只能作為 <tr> 的子元素。

下方的 HTML 會呈現一個表格最基本的架構 ( 額外加入邊框樣式 )。

<style>
  table{
    border:1px solid #000;
  }
  td{
    border:1px solid #000;
    padding:10px;
  }
</style>

<table>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

HTML 教學 - 表格 <table>、<tr>、<td>

<table><tr><td> 支援屬性

<table><tr><td> 支援「全域屬性」以及「可見元素的事件屬性」( 參考「HTML 元素屬性」),例如下方的 HTML,會分別將各個 <td> 加入 style 屬性,改變其背景顏色。

<style>
  table{
    border:1px solid #000;
  }
  td{
    border:1px solid #000;
    padding:20px;
  }
</style>

<table>
  <tr>
    <td style="background:#f99;">a</td>
    <td style="background:#9f9;">b</td>
    <td style="background:#99f;">c</td>
  </tr>
  <tr>
    <td style="background:#f9f;">1</td>
    <td style="background:#ff9;">2</td>
    <td style="background:#9ff;">3</td>
  </tr>
</table>

HTML 教學 - 表格 <table>、<tr>、<td>

消除儲存格的間距

表格裡每個 <td> 彼此之間都會預留「間距」,透過設定 <table> 的 border-collapse 樣式,就能進行間距的設定,設定 collapse 表示間距折疊 ( 合併 ),設定 separate 表示預留間距 ( 分開 ),以下方的 HTML 為例,各個儲存格之間就不會有間距。

<style>
  table{
    border-collapse: collapse;
  }
  td{
    padding:20px;
  }
</style>
<table border=1>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
  </tr>
</table>

HTML 教學 - 表格 <table>、<tr>、<td>

<table> border 屬性

<table> 除了共用的屬性,還存在一個 border 屬性,如果有設定 border 的內容 ( 正整數 ),就會自動替表格加上邊框,內容數值為表格最外層的寬度 ( 不論設定多少,內容 <td> 的邊框都會變成 1px )。

<style>
  td{
    padding:20px;
  }
</style>

<table border=5>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

HTML 教學 - 表格 <table>、<tr>、<td>

<td> colspan、rowspan 屬性

<td> 除了共用的屬性,還存在「合併列或欄」的 colspan 和 rowspan 屬性,colspan 是用來水平合併多欄 ( column ) 的儲存格,rowspan 則用來垂直合併多列 ( row ) 的儲存格,以下方的 HTML 為例,第一個 <td> 裡設定屬性 colspan 為 2,表示第一個 <td> 水平合併了兩個儲存格 ( 注意第一個 <tr> 裡的 <td> 只有兩個 )。

<style>
  td{
    padding:20px;
  }
</style>

<table border=1>
  <tr>
    <td colspan=2>a</td>
    <td>c</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

HTML 教學 - 表格 <table>、<tr>、<td>

下方的 HTML 裡,第一個 <td> 裡設定屬性 rowspan 為 2,表示第一個 <td> 垂直合併了兩個儲存格 ( 注意第二個 <tr> 裡的 <td> 只有兩個 )。

<style>
  td{
    padding:20px;
  }
</style>

<table border=1>
  <tr>
    <td rowspan=2>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

HTML 教學 - 表格 <table>、<tr>、<td>

如果將 rowspan 設定為 0,則會從該列直接合併到最後一列。

<style>
  td{
    padding:20px;
  }
</style>

<table border=1>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td rowspan=0>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>x</td>
    <td>y</td>
  </tr>
  <tr>
    <td>100</td>
    <td>200</td>
  </tr>
</table>

HTML 教學 - 表格 <table>、<tr>、<td>

<table><tr><td> 預設樣式

下方是 <table><tr><td> 的預設樣式:

table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}

td {
  display: table-cell;
  vertical-align: inherit;
}

tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

HTML 教學

基本介紹

認識 HTML 使用 HTML 編輯器

基礎知識

HTML 標籤與架構 HTML 格式規範 HTML 縮排與註解 HTML 元素顯示類型 HTML 元素屬性 HTML 特殊字元 HTML 色彩表示法 HTML 尺寸單位 HTML 網址與路徑 HTML 套用 CSS 樣式 HTML 套用 JavaScript 如何觀察 HTML 原始碼

網頁資訊元素

網頁標題 <title> 網頁資訊 <meta> 載入外部資源 <link> 重設根目錄 <base>

常用元素

標題 <h1>~<h6> 段落 <p> 行內容器 <span> 區塊容器 <div> 超連結 <a> 圖片 <img> 換行 <br> 水平分隔線 <hr> 內嵌頁框 <iframe>

文字樣式元素

粗體字 <strong><b> 斜體字 <em><i> 刪除線文字 <del> 插入 ( 底線 ) 文字 <ins> 小型文字 <small> 上標下標 <sup><sub> 凸顯文字 <mark> 引用 <blockquote><q> 預先格式化 <pre> 程式碼內容 <code> 收折文字內容 <details> 標示注音 <ruby><rt> 標示聯絡方式 <address> 標示鍵盤按鍵 <kbd> 標示時間日期 <time> 標示縮寫 <abbr> 標示可換行位置 <wbr>

表格&清單元素

無序清單 <ul><li> 有序清單 <ol><li> 自訂清單 <dl><dt><dd> 表格 <table><tr><td> 表格 <th><caption> 表格 <thead><tbody> 表格 <colgroup><col>

表單元素

表單 <form> 輸入 <input> 按鈕 <button> 多行文字輸入 <textarea> 下拉選單 <select> 進度條 <progress> 欄位標題 <label> 欄位資料清單 <datalist> 表單元素分組 <fieldset>

語意結構元素

頁首區塊 <header> 主要區塊 <main> 章節區塊 <section> 文章區塊 <article> 側邊欄區塊 <aside> 引用區塊 <figure> 導航連結區塊 <nav> 頁尾區塊 <footer>

影音&圖形元素

播放影片 <video> 播放聲音 <audio> 響應式圖片 <picture> 點陣畫布 <canvas> 向量圖形 <svg>

網頁嵌入應用

嵌入 YouTube 影片 嵌入 Google 地圖 嵌入 Google 日曆 嵌入 Google 表單 嵌入 Google 簡報 嵌入 Google 文件 嵌入 Google 試算表 嵌入 Google 試算表圖表 嵌入 Twitter 推文 嵌入 Facebook 粉絲團 嵌入 Facebook 影片