HTML - 表格樣式

你好，未來的網頁開發者們！我很興奮能成為你們在HTML表格樣式世界中的導遊。作為一個教了多年計算機科學的人，我可以告訴你們，掌握表格樣式就像學習繪畫一樣 - 它從理解你的畫布和工具開始。所以，讓我們一起來讓那些表格看起來更加出色！

HTML - Table Styling

常規HTML表格

在我們為我們的表格添加樣式之前，讓我們先回顧一下基本的HTML表格長什麼樣。這裡有一個簡單的例子：

<table>
<tr>
<th>標題 1</th>
<th>標題 2</th>
</tr>
<tr>
<td>行 1, 細胞 1</td>
<td>行 1, 細胞 2</td>
</tr>
<tr>
<td>行 2, 細胞 1</td>
<td>行 2, 細胞 2</td>
</tr>
</table>

這段代碼創建了一個基本的表格，包含兩列和三行（包括表頭行）。它功能正常，但老實說，這跟看油漆乾燥一樣無聊。這就是樣式的作用！

HTML表格樣式

現在，讓我們來討論我們可以如何樣式化我們的表格。把這些當作你網頁設計工具包中的刷子和顏色：

屬性	描述
border	設置表格和單元格的邊框
border-collapse	設定單元格邊框是合並為單一邊框還是分開
width	設置表格的寬度
height	設置表格的高度
text-align	對齊單元格中的文本（左對齊、右對齊、居中）
vertical-align	在單元格中垂直對齊文本（頂部、中部、底部）
padding	設置單元格邊框與其內容之間的空間
background-color	設置表格或單元格的背景顏色
color	設置文本顏色
font-family	設置文本的字體
font-size	設置文本的大小

HTML表格樣式範例

讓我們通過一些例子將這些屬性付諸實踐。我保證，到了這個結尾，你會像專家一樣樣式化表格！

範例 1：基本表格樣式

<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>

<table>
<tr>
<th>名稱</th>
<th>年齡</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
</tr>
</table>

在這個例子中，我們添加了一些基本樣式。border-collapse: collapse屬性合並了單元格邊框，創造出一個更乾淨的外觀。我們將表格寬度設為容器的100%，為單元格添加了邊框，增加了一些內距，並給表頭一個淺灰色的背景。這就像給你的表格理了一個整潔的髮型和換了一件新襯衫！

範例 2：斑馬線

<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>

<table>
<tr>
<th>產品</th>
<th>價格</th>
</tr>
<tr>
<td>蘋果</td>
<td>$1.00</td>
</tr>
<tr>
<td>香蕉</td>
<td>$0.75</td>
</tr>
<tr>
<td>橙子</td>
<td>$0.90</td>
</tr>
</table>

在這裡，我們引入了斑馬線的概念。tr:nth-child(even)選擇器針對偶數行並為它們提供一個淺灰色的背景。這種交錯的顏色方案使用戶更容易跟隨行穿過表格。這就像給你的表格穿上一件時尚的針織襯衫！

範例 3：響應式表格

<style>
.responsive-table {
overflow-x: auto;
}
table {
border-collapse: collapse;
width: 100%;
min-width: 600px;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
}
@media screen and (max-width: 600px) {
th, td {
display: block;
}
tr {
margin-bottom: 15px;
}
th {
text-align: center;
}
}
</style>

<div class="responsive-table">
<table>
<tr>
<th>名稱</th>
<th>職位</th>
<th>辦公室</th>
<th>年齡</th>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>系統架構師</td>
<td>愛丁堡</td>
<td>61</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>會計師</td>
<td>東京</td>
<td>63</td>
</tr>
</table>
</div>

這個例子向我們介紹了表格的響應性。在大屏幕上，它像一個正常表格。但在小屏幕（小於600px寬）上，它會切換到卡片式的佈局，每個單元格都顯示為一個區塊。這就像教你的表格做瑜伽 - 它變得有彈性，能夠適應不同的屏幕尺寸！

結論

好了，各位！我們已經把我們的表格從平淡無味變成了時尚且響應式。記住，樣式化表格是為了提高可讀性和用戶體驗。這不僅僅是讓事物變得漂亮（這也很有趣）！

在你們繼續網頁開發的旅程中，請持續嘗試不同的樣式。也許可以試著為行添加滑鼠悬停效果，或者玩轉不同的顏色方案。可能性無限！

正如一頓美味的餐點離開了正確的呈現就不完整一樣，一個結構良好的HTML文件如果沒有恰當樣式的表格也不算完整。所以，勇往直前，樣式化你的表格吧！並記住，在網頁開發的世界裡，熟練來自練習。快樂編程！

Credits: Image by storyset