表格内容宽度与对齐

因为表格是由多种表格元素组成，有别于常见的网页元素，表格会按照 table-layout 样式属性定义的方式和规则，自动分配每个字段的宽度，这篇教学除了会介绍这些定义和规则，也会介绍表格内容的水平和垂直对齐方式。

快速导览：

• table-layout 样式属性
  • auto 表格自动分配宽度
  • fixed 表格固定分配宽度
• 表格内容的对齐

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

table-layout 样式属性

table-layout 是专属显示类型为 table 或 inline-table 的样式属性，具有继承特性，这个样式属性可以控制“已定义宽度的”表格里，每个储存格在排版时“自动分配”的宽度，属性值说明如下：

表格或储存格的高度通常都是由“内容决定”，除非特殊情况，不然通常都不会特别去定义高度，这篇教学也都会以“宽度”进行介绍。

下方范例会呈现不同 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>

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>

下方范例会有两个表格，上方的表格只有三个字段，下方的表格有十个字段，可以看见当“相同的字母数量相同”时，会按照字母数量自动分配宽度，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>

如果只有某些字段有设定宽度，其他没有设定宽度的字段，就会“分配剩余的宽度”，下方范例只设定了第一格的宽度 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>

由于不同字型的字母宽度可能会不同，宽度的计算结果，仍然会使用内容的长度进行计算，下方的例子使用了字母宽度较大的默认字体，可以发现虽然都是四个字母，但因为字母宽度造成内容长度不同，自动分配的宽度就会有所不同 ( 范例中因为字段较多，除了将 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>

如果遇到过长且按照默认规则自动换行的中文字，则会按照中文字的“字数”作为自动分配宽度的比例，不过因为不少中文的标点符号在排版时具有“自动微调”的特性，所以自动分配的宽度会有一些误差，下方范例分别使用二十个、三十个和五十个中文字，基本上宽度比例会接近 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>

如果表格内容是“会自动换行”的英文或中英文夹杂，则判断换度会比较内容换行后的宽度，进行相关比例的分配，但这种自动分配宽度的方式，用户通常没有办法掌握，例如下方范例，因为不清楚何时会换行 ( 可能多个空白或多个字，换行位置就会不同 )，也就只能让浏览器自动分配宽度。

线上展示：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>

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>

如果有某些字段设定了宽度，就会按照规则自动分配剩余的宽度，下方范例的第一格设定了 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>

使用 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>

表格内容的对齐

基本上表格里的内容，都会是 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>

如果要让表格内容垂直对齐，会使用 vertical-align 样式，有别于水平对齐，表格内容的垂直对齐需要“参考标的”，下方是不同垂直对齐所参考的标的：

注意，虽然 vertical-align 还有 sub、super、text-top 和 text-bottom 等属性值，但这些属性值对于表格而言等同 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>

小结

通常在使用表格时，并不会特别去设定宽高或对齐方式，大多会直接采用默认值，但如果真的有调整的需求，也可以透过这篇教学的介绍，将表格设定成自己想要的模样，创造更符合需求的版面设计。

意见反馈