CSS - 表格

歡迎，有抱負的網頁開發者們！今天，我們將深入CSS表格的世界。作為你們親切的鄰居計算機科學老師，我很興奮能夠引導你們走過這段旅程。表格可能看起來有些過時，但相信我，它們在現代網頁設計中仍然非常有用。所以，讓我們捋起袖子開始吧！

CSS 表格 -邊框合併

想像一下你正在你的院子周圍建造圍欄。你希望圍欄柱相互接觸，對吧？這正是border-collapse對表格邊框所做的。它決定了單元格邊框應該分開還是合併為單一邊框。

table {
border-collapse: collapse;
}

這段代碼將使你的表格邊框相互接觸，創造出一個乾淨、統一的樣子。這就像給你的表格理了一個整潔的髮型！

CSS 表格 - 邊框間距

現在，如果你想在你的表格單元格之間留一些空間，那麼border-spacing就派上用場了。這就像是你的表格單元格的社交距離！

table {
border-spacing: 5px;
}

這將在您的單元格之間添加一個5像素的間隙。你甚至可以設置不同的水平間距和垂直間距：

table {
border-spacing: 5px 10px;
}

在這裡，我們有5像素的水平間距和10像素的垂直間距。這就像是給你的表格單元格一點個人空間！

CSS 表格 - 标题位置

表格可以有标题，你可以使用caption-side来控制这些标题出现在哪里。這就像决定把書的標題放在封面的頂部還是底部。

caption {
caption-side: bottom;
}

這將把你的表格标题放在底部。如果你喜歡放在上面，也可以使用top。

CSS 表格 - 空單元格

你是否好奇過你的表格中空單元格會發生什麼？empty-cells屬性讓你可以決定是否显示它们。

table {
empty-cells: hide;
}

這會使空單元格不可見。這就像和你的表格單元格玩捉迷藏！

CSS 表格 - 表格佈局

table-layout屬性決定了表格的單元格、行和列如何佈局。這就像在晚餐聚會上選擇嚴格的座位表還是自由選座的自由市場。

table {
table-layout: fixed;
}

這設置了固定的表格佈局，這可以加快大型表格的渲染速度。

CSS 表格 - 固定佈局

在固定佈局中，表格的寬度由第一行或指定的寬度決定。這就像在婚禮接待處分配座位。

table {
table-layout: fixed;
width: 100%;
}

th, td {
width: 25%;
}

這創造了一個具有四個等寬列的表格，無論內容如何。

CSS 表格 - 自動佈局

自動佈局會根據其內容調整列寬度。這就像讓客人自由選擇座位。

table {
table-layout: auto;
width: 100%;
}

在這裡，瀏覽器會根據內容調整列寬度。

CSS 表格 - 高度和寬度

你可以使用height和width屬性控制你的表格和其單元格的大小。這就像決定你的餐桌上應該有多大。

table {
width: 100%;
}

td {
height: 50px;
}

這將表格的寬度設置為其容器的100%，並將每個單元格的高度設置為50像素。

CSS 表格 - 表格對齊

在表格單元格中對齊內容對於可讀性至關重要。這就像在盤子上排列食物一樣 - 這是關於展示！

td {
text-align: center;
vertical-align: middle;
}

這將使每個單元格內容在水平和垂直方向上都居中。

CSS 表格 - 邊框

邊框可以使你的表格更具視覺吸引力並更容易閱讀。這就像在紙上畫線來組織信息。

table, th, td {
border: 1px solid black;
}

這為表格和所有其單元格添加了一個1像素的實心黑色邊框。

CSS 表格 - 背景顏色

添加背景顏色可以使你的表格更具視覺吸引力並幫助區分表格的不同部分。這就像給你房子的房間涂上不同的顏色。

table {
background-color: #f2f2f2;
}

th {
background-color: #4CAF50;
color: white;
}

這為表格設置了一個浅灰色背景，並為表頭單元格設置了一個帶有白色文字的綠色背景。

CSS 表格 - 字體樣式

設置表格中的文本樣式可以大大提高可讀性。這就像為一本書選擇正確的字體 - 這可以產生很大的差異。

table {
font-family: Arial, sans-serif;
}

th {
font-weight: bold;
}

td {
font-size: 14px;
}

這將Arial設置為整個表格的字體，將表頭文字設置為粗體，並將單元格文字大小設置為14像素。

CSS 表格 - 其他樣式

你可以應用許多其他樣式到表格中。以下是一些快速的介紹：

屬性	描述	示例
padding	單元格內部空間	td { padding: 10px; }
border-radius	圓角	table { border-radius: 5px; }
box-shadow	阴影效果	table { box-shadow: 2px 2px 5px grey; }
opacity	透明度	table { opacity: 0.8; }

CSS 表格 - 外邊距

外邊距可以給你的表格留出一些空間，讓其他頁面上的元素有點距離。這就像在牆上的畫框周圍留出一些空間。

table {
margin: 20px auto;
}

這在表格的顶部和底部添加了20像素的外邊距，並水平居中。

CSS 表格 - 表格分隔符（垂直/水平）

你可以為你的表格添加分隔符以分隔列或行。這就像在筆記本上用尺子畫直線。

td, th {
border-right: 1px solid black;
}

tr {
border-bottom: 1px solid black;
}

這在列之間添加了垂直線，並在行之間添加了水平線。

CSS 表格 - 隔行換色表

隔行換色的表格可以使數據行更容易閱讀。這就像在書中每隔一行標記以保持你的位置。

tr:nth-child(even) {
background-color: #f2f2f2;
}

這創造了交替的白色和浅灰色行。

CSS 表格 - 响應式表格

使表格響應式可以確保它在所有設備上都有良好的外觀。這就像有一個可以根據客人數量擴展或收縮的餐桌。

@media screen and (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}

thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

tr { border: 1px solid #ccc; }

td {
border: none;
position: relative;
padding-left: 50%;
}

td:before {
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
content: attr(data-label);
}
}

這段代碼將表格轉換為在小屏幕上的列表格式，使其在移動設備上更容易閱讀。

CSS 表格 - 相關屬性

以下是一些你可能在工作表時會發現有用的CSS屬性：

屬性	描述
border-collapse	誌定單元格邊框是分開還是合併
border-spacing	設置單元格邊框之間的距離
caption-side	指定表格标题的位置
empty-cells	設置是否在空單元格上显示邊框
table-layout	設置用於佈局表格單元格、行和列的算法
vertical-align	設置單元格內容的垂直對齊
text-align	設置單元格內容的水平對齊

現在，你已經準備好使用CSS創建和樣式化表格了。記住，熟能生巧，所以不要害怕嘗試這些屬性。快樂編程！

Credits: Image by storyset