HTML 可以很好的組織內容，但有時候，我們需要通過 CSS 控制這些內容的顯示方式。今年（2021年）發布的 CSS Caption 模塊，幾乎滿足了每個設計師對于文本描述的需求，不需要更多的 JavaScript 或者 hack 了。通過 caption-side 屬性、caption-spacing 屬性、caption-align 屬性以及 caption 聲明，可以實現更靈活的文字描述設計與排版方式。

caption-side 屬性控制表格說明文字的放置位置，有 top（上方）、bottom（下方）、left（左側）和 right（右側）四個選項。除了 top 與 bottom 的第一行居中特殊格式外，其他的效果都是沿著某一側文字依次排列。值得注意的是，如果表格是鏡像翻轉的，在這種情況下， left 與 right 將對調，上下方向仍是相對的。

table {
caption-side: bottom; /*默認值 top */
}

caption-spacing 屬性是指標題與表格內容間的間距。它只對 caption-side 屬性值為 top 和 bottom 的表格生效。這個屬性稍有不同的是，它的值是一個長度或百分比，它可以以行為單位，并使用 em 或 px 等單位的組合，也可以是百分比來代替等寬字體；此外，還可以使用空格/逗號/斜杠的組合來同時把上下與左右之間的距離設置為不同距離。

table {
caption-side: bottom;
caption-spacing: 1em; /*default 0.5em*/
}

caption-align 屬性控制表格說明文字的對齊方式。有 center（居中）、left（向左對齊）和 right（向右對齊）三個可選項。默認值是 center 。對于不同的 caption 對象，對齊方式的處理單獨設置。 對于位置在上方的表格說明文字，對齊方式在水平方向上控制等同于 text-align ，在垂直方向上則取決于表格本身的格式，在左側時 caption 會特別居中處理。

table {
caption-side: bottom;
caption-spacing: 1em;
caption-align: center; /*center- right-left-bottom-left*/
}

caption 是一個 CSS 聲明，作為一個表頭控件，表頭內容是一段文本或者一個圖片。這個元素允許我們在每個表格上設置一回標題。

< table >< caption >caption text< thead >...< tbody >...< /table >

CSS Caption 模塊的出現，讓我們更加方便地處理表格文本描述，在樣式單控制中心，直接對表格的 caption 進行操作，而不用再腰斬設備，對 captions、表頭以及行列進行層級選擇，提高了頁面的開發效率。