了解如何在短短五分鐘內創建CSS表格邊框
您可能已經聽說CSS和HTML表不混合。 這是不正確的。 是的，使用HTML表格進行佈局不再是網頁設計的最佳做法，已被CSS佈局樣式取代，但表格仍然是用於將表格數據添加到網頁的正確標記。
不幸的是，因為如此多的網絡專業人士已經迴避了認為他們是毒藥的表格，許多專業人士在處理這些常見的HTML元素方面經驗不足，而且他們必須在網頁上處理這些元素。 例如，如果您在頁面上有一個表格，並且想要將內部行添加到表格單元格中。
CSS表格邊框
當您使用CSS向表格添加邊框時，它只會添加表格外部的邊框。 如果要將內部行添加到該表的單個單元格中，則需要向內部CSS元素添加邊框。 您還可以使用HR標籤在單個單元格內添加行。
為了應用本文中介紹的樣式，您顯然應該在您的網頁上有一個表格 。 然後，您應該在文檔頭部創建一個樣式表作為內部樣式表 （如果您的“網站”是單個頁面，您可能只會這樣做），或者將其作為外部樣式表附加到文檔中（這就是您如果你的網站是多個頁面的話 - 你可以從一個外部表格設計所有頁面）。 您將把樣式添加到該樣式表的內部線條。
在你開始之前
首先，您需要確定您想要的線條出現在您的表格中。 你有幾個選擇，包括：
- 圍繞所有細胞形成網格;
- 在列之間定位線條;
- 就在行之間; 要么
- 在特定的列或行之間。
您還可以將線條放在單個單元格周圍或單個單元格內。
如何在表中的所有單元格周圍添加行
要在表格中的所有單元格周圍添加線條，創建類似網格效果，請將以下內容添加到樣式表中：
td，th {
邊框：實心1px黑色;
}
如何在表格中的列之間添加行
要在列之間添加行（這將創建在表格列上從上至下運行的垂直行），請將以下內容添加到樣式表中：
td，th {
邊界左：固體1px黑色;
}
然後，如果您不希望它們出現在第一列上，則需要向這些th和td單元添加一個類。 在這個例子中，我們假設我們在這些單元格上有一個無邊界類，我們用這個更具體的CSS規則去除邊界。 所以這裡是我們要使用的HTML類：
類=“無邊界”>
然後我們可以將以下樣式添加到我們的樣式表中：
。無邊界 {
border-left：none;
}
如何在表中的行之間添加行
就像在列之間添加行一樣，只需在樣式表中添加一個簡單樣式即可。 下面的CSS會在我們表的每一行之間添加垂直線：
tr {
邊框底部：實心1px黑色;
}
為了從表格底部刪除邊框，您可以再次向該tr標籤添加一個類：
類=“無邊界”>
將以下樣式添加到您的樣式表中：
。無邊界 {
border-bottom：none;
}
如何在表中的特定列或行之間添加行
如果您只需要特定行或列之間的行，則需要在這些單元或行上使用一個類。 在列之間添加行比在行之間添加行要困難得多，因為您必須將該類添加到該列中的每個單元格。 如果您的表格是由某種類型的CMS自動生成的，那麼這可能是不可能的，但如果您手動編寫該頁面，則可以根據需要添加適當的類以實現此效果。
類=“側邊界”>
在行之間添加行比較容易，因為您可以將該類添加到想要行的行中。
類=“邊界-底部”>
然後將CSS添加到您的樣式表中：
.border-side {
邊界左：固體1px黑色;
}
.border-bottom {
邊框底部：實心1px黑色;
}
如何在表中的單個單元格周圍添加行
要在單個單元格周圍添加線條，請向要添加邊框的單元格添加一個類：
類=“BORDER”>
然後將下面的CSS添加到您的樣式表中：
。邊境 {
邊框：實心1px黑色;
}
如何在表中的單個單元格內添加行
如果要在單元格內添加行，最簡單的方法是使用水平規則標記（
）。
有用的提示
如果您發現邊框有空隙，則應確保在桌面上設置邊框折疊樣式。 將以下內容添加到您的樣式表中：
表{
邊界崩潰：崩潰;
}
您可以避免使用上述所有CSS，並在您的表格標籤中使用border屬性。 然而，意識到他的屬性儘管沒有被棄用，但它的靈活性遠遠低於CSS，因為你只能定義邊框的寬度，並且只能在表格的所有單元格周圍或沒有。