在網站建設開發中，表格幾乎每個網站都會有所使用，而使用css樣式表更改表格或者單元格背景顔色更不陌生。這篇文章講述的主題，通過一些技術探索，告訴你在網站設計時更改HTML表格背景色的新方法。多年來，更改網站上表格各部分的背景色的方法已經發生了變化，随着樣式表的引入其變得更加容易。較舊的方法使用屬性bgcolor來更改表的背景色。它還可用于更改表行或表單元格的顔色。但是bgcolor屬性已經被棄用，取而代之的是樣式表，所以它不是操縱表格背景顔色的最佳方式。更改背景顔色的更好方法，是将Style屬性背景顔色添加到表、行或單元格标記中。

網站設計時更改HTML表格背景色的新方法探索

以下示例更改整個表格的背景色：

<pre style="box-sizing:border-box;white-space:pre-wrap;color:#ffffff;background:#3f3f3f;padding:13px 20px;overflow-x:auto;font-size:16px;"><table style="background-color: #ff0000;">

要更改單行的顔色，請在<tr>标記中插入背景顔色屬性：

<pre style="box-sizing:border-box;white-space:pre-wrap;color:#ffffff;background:#3f3f3f;padding:13px 20px;overflow-x:auto;font-size:16px;"><tr style="background-color: yellow;">

可以通過将屬性添加到<；td>；标記來更改單個單元格的顔色：

<pre style="box-sizing:border-box;white-space:pre-wrap;color:#ffffff;background:#3f3f3f;padding:13px 20px;overflow-x:auto;font-size:16px;"><td style="background-color: #000;"></pre>

還可以相同的方式将背景顔色應用于表頭或<；th>；标記：

<pre style="box-sizing:border-box;white-space:pre-wrap;color:#ffffff;background:#3f3f3f;padding:13px 20px;overflow-x:auto;font-size:16px;"><th style="background-color: #000;"></pre>

使用樣式表更改背景顔色

但是，最好避免使用背景顔色屬性，而使用格式正确的樣式表。例如，可以在HTML文檔頭部的樣式表中設置樣式，也可以在外部樣式表中設置樣式。類似于Head或外部樣式表中的更改可能會顯示為表、行和單元格的以下内容：

<pre style="box-sizing:border-box;white-space:pre-wrap;color:#ffffff;background:#3f3f3f;padding:13px 20px;overflow-x:auto;font-size:16px;">table { background-color: #ff0000; }

tr { background-color: yellow; }

td { background-color: #000; }</pre>

設置列背景顔色

設置列背景顔色的最佳方法是創建一個Style類，然後将該類分配給該列中的單元格。創建類允許您使用一個屬性将該類分配給特定列中的單元格。

CSS：

<pre style="box-sizing:border-box;white-space:pre-wrap;color:#ffffff;background:#3f3f3f;padding:13px 20px;overflow-x:auto;font-size:16px;">td.ColColor { background-color: blue; }

HTML:

<pre style="box-sizing:border-box;white-space:pre-wrap;color:#ffffff;background:#3f3f3f;padding:13px 20px;overflow-x:auto;font-size:16px;"><table>

<tr><td class="ColColor">cell 1</td><td>cell 2</td></tr>

<tr><td class="ColColor">cell 1</td><td>cell 2</td></tr>

</table></pre>

通過樣式表控制背景顔色的一個顯著優點是您可以在以後更改顔色選擇。不必遍曆HTML文檔并對每個單元格進行更改，您可以對CSS中的顔色選擇進行單個更改，該更改将立即應用于class=“Col Color”語法出現的每個實例。雖然在HTML中插入CSS或調用單獨的CSS文件會增加一些管理開銷，而不僅僅是修改HTML屬性，但您會發現依賴CSS可以減少錯誤、加快開發速度并提高文檔的可移植性。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!