表格內容寬度與對齊

因為表格是由多種表格元素組成，有別於常見的網頁元素，表格會按照 table-layout 樣式屬性定義的方式和規則，自動分配每個欄位的寬度，這篇教學除了會介紹這些定義和規則，也會介紹表格內容的水平和垂直對齊方式。

快速導覽：

table-layout 樣式屬性

auto 表格自動分配寬度

fixed 表格固定分配寬度

表格內容的對齊

CSS 教學 - 表格尺寸與排版

table-layout 樣式屬性

table-layout 是專屬顯示類型為 table 或 inline-table 的樣式屬性，具有繼承特性，這個樣式屬性可以控制「已定義寬度的」表格裡，每個儲存格在排版時「自動分配」的寬度，屬性值說明如下：

表格或儲存格的高度通常都是由「內容決定」，除非特殊情況，不然通常都不會特別去定義高度，這篇教學也都會以「寬度」進行介紹。

屬性值	說明	分配寬度定義
auto	自動分配 ( 預設值 )	內容長度比例
fixed	固定分配	未設定寬度的儲存格數量

下方範例會呈現不同 table-layout 屬性值的表格 ( 有額外設定表格邊框樣式 )，從中可以看見不同長度的內容，儲存格的大小也會有所不同，注意如果表格本身沒有定義寬度，呈現方式就會以內容長度為主。

線上展示：https://codepen.io/oxxo/pen/ExBJYbr

<!-- HTML 程式碼 -->
<table class="a">
  <tr><td>apple</td><td>melon</td><td>oxxo</td></tr>
  <tr><td>papaya</td><td>peach</td><td>watermelon</td></tr>
</table>
<table class="b">
  <tr><td>apple</td><td>banana</td><td>oxxo</td></tr>
  <tr><td>papaya</td><td>coconut</td><td>watermelon</td></tr>
</table>

<!-- CSS 程式碼 -->
<style>
  table {
    border: 1px solid #000;
    margin: 10px;
    width: 300px;   /* 如果移除寬度，呈現結果完全相同 */
  }
  td {border: 1px solid #000;}
  .a {table-layout: auto;}
  .b {table-layout: fixed;}
</style>

CSS 教學 - 表格尺寸與排版 - table-layout 樣式屬性

table-layout:auto 表格自動分配寬度

如果已有寬度的表格，設定 table-layout:auto ( 這是預設值 )，會按照下列的規則自動分配儲存格寬度：

只要有某個欄位設定寬度，其他列中同樣水平位置的欄位，都會是同樣的寬度。

如果不同列中，同樣水平位置的欄位都設定了寬度，則會使用「最大的寬度」作為其他欄位的寬度。

如果欄位都沒有設定寬度，則會按照「內容長度/總內容長度」的比例自動分配寬度。

內容長度僅限「連續字元」，遇到換行、空白、標點符號就會中斷。

因為會根據「內容長度」自動分配寬度，當內容過多時，就會產生些許計算延遲。

下方範例有兩個完全相同的表格，當某一個儲存格設定了寬度，其他列中同樣位置的儲存格，也都會呈現相同寬度，但如果同樣位置的其他儲存格也有寬度，就會使用「最大寬度」作為欄位寬度。

線上展示：https://codepen.io/oxxo/pen/VwJNZyY

<!-- HTML 程式碼 -->
<table>
  <tr><td class="w100">a</td><td>aaaaa</td><td>aaaa</td></tr>
  <tr><td class="w200">a</td><td>a</td><td>a</td></tr>
  <tr><td>a</td><td>a</td><td>a</td></tr>
</table>
<table>
  <tr><td>a</td><td>aaaaa</td><td>aaaa</td></tr>
  <tr><td class="w200">a</td><td>a</td><td>a</td></tr>
  <tr><td>a</td><td>a</td><td>a</td></tr>
</table>

<!-- CSS 程式碼 -->
<style>
  table {
    border: 1px solid #000;
    margin: 10px;
    width: 300px;
    padding:0;
    border-spacing: 0;
    border-collapse: collapse;
    table-layout: auto;    /* 自動分配欄寬 */
  }
  td {
    padding: 0;
    border: 1px solid #000;
  }
  .w100 {width: 100px;}
  .w200 {width: 200px;}
 </style>

CSS 教學 - 表格尺寸與排版 - table-layout:auto 自動分配寬度

下方範例會有兩個表格，上方的表格只有三個欄位，下方的表格有十個欄位，可以看見當「相同的字母數量相同」時，會按照字母數量自動分配寬度，aaaaa 五個字母的欄位寬度，等於五個只有 a 字母的欄位寬度 ( 範例中因為欄位較多，除了將 padding 設為 0，也不設定邊框，避免干擾計算 )。

線上展示：https://codepen.io/oxxo/pen/PorgYEb

<!-- HTML 程式碼 -->
<table>
  <tr><td>a</td><td>aaaaa</td><td>aaaa</td></tr>
  <tr><td>a</td><td>a</td><td>a</td></tr>
  <tr><td>a</td><td>a</td><td>a</td></tr>
</table>
<table>
  <tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
</table>

<!-- CSS 程式碼 -->
<style>
  table {
    border: 1px solid #000;
    margin: 10px;
    width: 300px;
    padding:0;
    border-spacing: 0;
    border-collapse: collapse;
    table-layout: auto;
  }
  td {padding: 0;}
 </style>

CSS 教學 - 表格尺寸與排版 - table-layout:auto 自動分配寬度的比例規則

如果只有某些欄位有設定寬度，其他沒有設定寬度的欄位，就會「分配剩餘的寬度」，下方範例只設定了第一格的寬度 120px，剩下的兩個欄位寬度就會根據字母的寬度進行比例分配。

注意，設定欄位寬度時，如果總寬度超過表格寬度，表格並不會被撐開，計算寬度後會發生不如預期的結果。

線上展示：https://codepen.io/oxxo/pen/bGPJbaR

<!-- HTML 程式碼 -->
<table>
  <tr><td class="w120">a</td><td>aaaaa</td><td>aaaa</td></tr>
  <tr><td>a</td><td>a</td><td>a</td></tr>
  <tr><td>a</td><td>a</td><td>a</td></tr>
</table>
<table>
  <tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
</table>

<!-- CSS 程式碼 -->
<style>
  table {
    border: 1px solid #000;
    margin: 10px;
    width: 300px;
    padding:0;
    border-spacing: 0;
    border-collapse: collapse;
    table-layout: auto;
  }
  td {padding: 0;}
  .w120 {width: 120px;}
 </style>

CSS 教學 - 表格尺寸與排版 - table-layout:auto 自動分配剩餘的寬度

由於不同字型的字母寬度可能會不同，寬度的計算結果，仍然會使用內容的長度進行計算，下方的例子使用了字母寬度較大的預設字體，可以發現雖然都是四個字母，但因為字母寬度造成內容長度不同，自動分配的寬度就會有所不同 ( 範例中因為欄位較多，除了將 padding 設為 0，也不設定邊框，避免干擾計算 )。

線上展示：https://codepen.io/oxxo/pen/yLdrBpj

<!-- HTML 程式碼 -->
<table>
  <tr><td>iiii</td><td>oxxo</td><td>QQQQ</td></tr>
</table>
<table>
  <tr><td>i</td><td>i</td><td>i</td><td>i</td><td>o</td><td>x</td><td>x</td><td>o</td><td>Q</td><td>Q</td><td>Q</td><td>Q</td></tr>
</table>

<!-- CSS 程式碼 -->
<style>
  table {
    border: 1px solid #000;
    margin: 10px;
    width: 360px;
    padding:0;
    border-spacing: 0;
    border-collapse: collapse;
    table-layout: auto;
    font-family: Arial;
  }
  td {padding: 0;}
 </style>

CSS 教學 - 表格尺寸與排版 - table-layout:auto 字母大小影響自動寬度

如果遇到過長且按照預設規則自動換行的中文字，則會按照中文字的「字數」作為自動分配寬度的比例，不過因為不少中文的標點符號在排版時具有「自動微調」的特性，所以自動分配的寬度會有一些誤差，下方範例分別使用二十個、三十個和五十個中文字，基本上寬度比例會接近 2:3:5。

線上展示：https://codepen.io/oxxo/pen/XWLQrVo

<!-- HTML 程式碼 -->
<table>
  <tr><td>一二三四五六七八九十一二三四五六七八九十</td><td>一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十</td><td>一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十</td></tr>
</table>
<table>
  <tr><td>一二三四五六七八九，一二三四五六七八九。</td><td>一二三四五六七八九，一二三四五六七八九，一二三四五六七八九。</td><td>一二三四五六七八九，一二三四五六七八九，一二三四五六七八九，一二三四五六七八九，一二三四五六七八九。</td></tr>
</table>
<table>
  <tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
</table>

<!-- CSS 程式碼 -->
<style>
  table {
    border: 1px solid #000;
    margin: 10px;
    width: 300px;
    padding:0;
    border-spacing: 0;
    border-collapse: collapse;
    table-layout: auto;
  }
  td {padding: 0;}
</style>

CSS 教學 - 表格尺寸與排版 - table-layout:auto 中文字自動分配寬度

如果表格內容是「會自動換行」的英文或中英文夾雜，則判斷換度會比較內容換行後的寬度，進行相關比例的分配，但這種自動分配寬度的方式，使用者通常沒有辦法掌握，例如下方範例，因為不清楚何時會換行 ( 可能多個空白或多個字，換行位置就會不同 )，也就只能讓瀏覽器自動分配寬度。

線上展示：https://codepen.io/oxxo/pen/WNqWeMX

<!-- HTML 程式碼 -->
<table>
  <tr><td>I have a pen I have an apple</td><td>STEAM 教育是 Science、Technology、Engineering、Arts 和 Mathematics</td><td>大家好，我是 oxxo</td></tr>
</table>

<!-- CSS 程式碼 -->
<style>
  table {
    border: 1px solid #000;
    margin: 10px;
    width: 300px;
    padding:0;
    border-spacing: 0;
    border-collapse: collapse;
    table-layout: auto;
  }
  td {padding: 0;}
</style>

CSS 教學 - 表格尺寸與排版 - table-layout:auto 遇到大量文字換行時，無法精準掌握寬度

table-layout:fixed 表格固定分配寬度

如果已有寬度的表格，設定 table-layout:fixed 之後，會按照下列的規則自動分配儲存格寬度：

只要有某個欄位設定寬度，其他列中同樣水平位置的欄位，都會是同樣的寬度。

如果不同列中，同樣水平位置的欄位都設定了寬度，則會使用「最大的寬度」作為其他欄位的寬度。

如果欄位都沒有設定寬度，則會按照「欄位數量」的比例自動分配寬度。

因為是根據「欄位數量」分配寬度，呈現結果比設定 table-layout:auto 來得快速。

下方範例有兩個表格，不論欄位內容是什麼，只要沒有超過自動分配的寬度，會根據欄位數量自動分配寬度。

線上展示：https://codepen.io/oxxo/pen/xxoeKYN

<!-- HTML 程式碼 -->
<table>
  <tr><td>aa</td><td>a</td><td>aaa</td><td>a</td><td>a</td></tr>
</table>
<table>
  <tr><td>aa</td><td>aaa</td></tr>
</table>
<table>
  <tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
</table>

<!-- CSS 程式碼 -->
<style>
  table {
    border: 1px solid #000;
    margin: 10px;
    width: 300px;
    padding:0;
    border-spacing: 0;
    border-collapse: collapse;
    table-layout: fixed;
  }
  td {padding: 0;}
</style>

CSS 教學 - 表格尺寸與排版 - table-layout:fixed 表格固定分配寬度

如果有某些欄位設定了寬度，就會按照規則自動分配剩餘的寬度，下方範例的第一格設定了 180px，剩下四格就會分配剩餘的 120px，每一個就是 30px。

線上展示：https://codepen.io/oxxo/pen/vYqMBRL

<!-- HTML 程式碼 -->
<table>
  <tr><td class="w180">a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
</table>
<table>
  <tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
</table>

<!-- CSS 程式碼 -->
<style>
  table {
    border: 1px solid #000;
    margin: 10px;
    width: 300px;
    padding:0;
    border-spacing: 0;
    border-collapse: collapse;
    table-layout: fixed;
  }
  td {padding: 0;}
  .w180 {width: 180px;}
</style>

CSS 教學 - 表格尺寸與排版 - table-layout:fixed 表格固定分配剩餘的寬度

使用 table-layout:fixed 之後，欄位寬度也就不會被內容長度所影響，就算內容發生換行狀況，也會按照分配規則分配欄位寬度。

線上展示：https://codepen.io/oxxo/pen/NWZmKYa

<!-- HTML 程式碼 -->
<table>
  <tr><td>大家好，我是 OXXO，是個即將邁入中年的斜槓青年。</td><td>hello world</td><td>I have a pen</td><td>I have an apple</td><td>apple</td></tr>
</table>
<table>
  <tr><td>I have a pen, I have an apple</td><td>網頁初學者、網頁設計師</td></tr>
</table>
<table>
  <tr><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td><td>a</td></tr>
</table>

<!-- CSS 程式碼 -->
<style>
  table {
    border: 1px solid #000;
    margin: 10px;
    width: 300px;
    padding:0;
    border-spacing: 0;
    border-collapse: collapse;
    table-layout: fixed;
  }
  td {
    border: 1px solid #000;
    padding: 0;
  }
</style>

CSS 教學 - 表格尺寸與排版 - table-layout:fixed 欄位寬度不會被內容長度影響

表格內容的對齊

基本上表格裡的內容，都會是 inline 或 inline-* 相關顯示屬性的元素，因此對齊的方式也都採用相關對齊行為，首先看到水平對齊，表格裡元素的水平對齊，只需使用 text-align 屬性就能控制靠左、靠右或置中對齊 ( 參考「text-align 水平對齊」)，下方範例將會將不同儲存格，進行四種不同的水平對齊方式。

線上展示：https://codepen.io/oxxo/pen/ZEdZzxM

<!-- HTML 程式碼 -->
<table>
  <tr>
    <td class="a">靠左對齊</td>
    <td class="b">置中對齊</td>
    <td class="c">靠右對齊</td>
  </tr>
  <tr><td class="a" colspan=3>< 靠左對齊 > STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</td></tr>
  <tr><td class="d" colspan=3>< 分散對齊 > STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</td></tr>
</table>

<!-- CSS 程式碼 -->
<style>
  table {
    border: 1px solid #000;
    margin: 10px;
    width: 300px;
    padding:0;
    border-spacing: 0;
    border-collapse: collapse;
  }
  td {
    padding: 10px;;
    border: 1px solid #000;
    width: 100px;
  }
  .a {text-align: left;}
  .b {text-align: center;}
  .c {text-align: right;}
  .d {text-align: justify;}
</style>

CSS 教學 - 表格尺寸與排版 - 表格內容水平對齊

如果要讓表格內容垂直對齊，會使用 vertical-align 樣式，有別於水平對齊，表格內容的垂直對齊需要「參考標的」，下方是不同垂直對齊所參考的標的：

注意，雖然 vertical-align 還有 sub、super、text-top 和 text-bottom 等屬性值，但這些屬性值對於表格而言等同 baseline。

垂直對齊屬性值	參考標的
top	靠上對齊，對齊列的上方，如果延伸多列則是第一列的上方。
bottom	靠下對齊，對齊列的下方，如果延伸多列則是最後一列的下方。
middle	置中對齊，對齊列的中央。
baseline	基準線對齊，如果延伸多列則是第一列的基準線。

下方範例呈現表個內容不同垂直置中的效果。

線上展示：https://codepen.io/oxxo/pen/JjQVPLQ

<!-- HTML 程式碼 -->
top、middle、left 的差異
<table class="t1">
  <tr>
    <td class="a" rowspan=3>oxxo</td>
    <td class="b" rowspan=3>oxxo</td>
    <td class="c" rowspan=3>oxxo</td>
    <td>apple</tr>
  <tr><td>banana</td></tr>
  <tr><td>orange</td></tr>
</table>
top 與 baseline 的差異
<table class="t2">
  <tr>
    <td class="a" rowspan=3>oxxo</td>
    <td class="d" rowspan=3>oxxo</td>
    <td>apple</tr>
  <tr><td>banana</td></tr>
  <tr><td>orange</td></tr>
</table>

<!-- CSS 程式碼 -->
<style>
  table {
    border: 1px solid #000;
    margin: 10px;
    width: 360px;
    padding:0;
    border-spacing: 0;
    border-collapse: collapse;
    table-layout: fixed;
  }
  td {
    border: 1px solid #000;
    vertical-align: baseline;
    font-size:30px;
  }
  td[class] {width: 75px;}    /* 只要有 class 的 td 都是寬 75px */
  .a {
    vertical-align: top;
    font-size:10px;
  }
  .b {vertical-align: middle;}
  .c {vertical-align: bottom;}
  .d {
    vertical-align: baseline;
    font-size:10px;
  }
</style>

CSS 教學 - 表格尺寸與排版 - 表格內容垂直對齊

小結

通常在使用表格時，並不會特別去設定寬高或對齊方式，大多會直接採用預設值，但如果真的有調整的需求，也可以透過這篇教學的介紹，將表格設定成自己想要的模樣，創造更符合需求的版面設計。

意見回饋

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

表格內容寬度與對齊

table-layout 樣式屬性

table-layout:auto 表格自動分配寬度

table-layout:fixed 表格固定分配寬度

表格內容的對齊

小結

意見回饋

CSS 教學

基本介紹

CSS 選擇器

數值與單位

變數與內容函式

顏色與濾鏡

文字樣式

元素容器

背景與陰影

清單與表格

基本排版與定位

Flexbox 彈性排版

Grid 網格排版

轉場與動畫

變形、裁切與遮罩