HTML Tables-Table Background Color - 书目录

HTML Tables-Table Background Color

Table Background Color

本页面演示如何在网页和其他HTML文档中设置表格背景颜色。您可以使用此处显示的相同颜色,或者使用您喜欢的任何背景颜色,只要颜色以HTML可识别的方式指定即可。

在HTML中,表格背景颜色是使用层叠样式表(CSS)定义的。具体而言,您使用该background-color属性来定义背景颜色。您可以将此属性应用于整个表格,一行或单个单元格。

以下是将HTML背景颜色应用于表格的一些示例。

整个表格的背景颜色

<table style="background-color:#FFFFE0;">
<tr>
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>

表格行的背景颜色

在这里,我们为第一行添加了不同的背景颜色,这恰好是表格标题行。因此,我们有一个表格背景颜色,另一个表格标题行背景颜色不同。请注意,我们也更改了表格标题的文字颜色 – 这使得它更易于阅读。

<table style="background-color:#FFFFE0;">
<tr style="background-color:#BDB76B;color:#ffffff;">
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>

表格单元格的背景颜色

您还可以更改单个表格单元格的背景颜色。为此,只需将样式应用于所<td>讨论的表格单元格的标签。

<table style="background-color:#FFFFE0;">
<tr style="background-color:#BDB76B;color:#ffffff;">
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td style="background-color:#ff0000;">Table cell 4</td>
</tr>
</table>

使用CSS类

设置样式时,最好将CSS与表格分开。例如,您可以在HTML文档的顶部或甚至单独的CSS文件中定义所有样式。当你这样做时,你可以创建一个“类”来保存你的表格(或任何其他元素)的所有样式。然后,要使用这些样式,只需添加class=”{class name}”{class name}是您班级的名称。

这里有一个使用嵌入式样式表来定义HTML表格背景颜色的例子。请注意,样式是在<style></style>标签之间设置的。

<!-- Start Styles. Move the 'style' tags and everything between them to between the 'head' tags -->
<style type="text/css">
.myTable { background-color:#eee;border-collapse:collapse; }
.myTable th { background-color:#000;color:white;width:50%; }
.myTable td, .myTable th { padding:5px;border:1px solid #000; }
</style>
<!-- End Styles -->
<table class="myTable">
<tr>
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>

这里有另外一个例子,但是这个使用了一组不同的样式,包括表格和表头的不同背景颜色。

您会注意到我们还修改了每个表格单元格的底部边框,并更改了每个表格单元格内的字体系列(但不是表格标题)。

<!-- Start Styles. Move the 'style' tags and everything between them to between the 'head' tags -->
<style type="text/css">
.myOtherTable { background-color:#FFFFE0;border-collapse:collapse;color:#000;font-size:18px; }
.myOtherTable th { background-color:#BDB76B;color:white;width:50%; }
.myOtherTable td, .myOtherTable th { padding:5px;border:0; }
.myOtherTable td { font-family:Georgia, Garamond, serif; border-bottom:1px dotted #BDB76B; }
</style>
<!-- End Styles -->
<table class="myOtherTable">
<tr>
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>
133791

 

英语原文:http://www.html.am/html-codes/tables/table-background-color.cfm 由工具自动翻译,由书目录整理