HTML Tables-Table Color - 书目录

HTML Tables-Table Color

Table Color

本页面演示如何在网页和其他HTML文档中设置表格颜色。

在HTML中,表格颜色是使用层叠样式表(CSS)定义的。您可以更改整个表的颜色,表格的一部分(例如表格单元格或表格边框)以及表格单元格内的文本。

要使用的CSS属性取决于要更改颜色的元素。例如,要更改背景颜色,您需要使用该background-color属性。要更改表格中文本的颜色,只需使用该color属性即可。

以下是在HTML中应用表格边框的一些示例。

表背景颜色

您可以使用CSS background-color属性更改整个表格的背景颜色。

喜欢这个:

<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;">
<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;">
<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:red;">Table cell 4</td>
</tr>
</table>

表文本颜色

您可以更改表格中文本的颜色。要更改表格中文本的颜色,您需要使用该color属性。顺便说一句,您不需要将这个元素应用于每一段文本 – 您可以将它应用于整个表格。

在本例中,我将文本的颜色更改为黑色,但我也将表格标题文本更改为白色:

<table style="background-color:#FFFFE0;color:black;">
<tr style="background-color:#BDB76B;color:white;">
<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>

表边界颜色

您可以设置表格边框并更改其颜色。为此,您可以使用该border属性。您还需要指定边界的宽度和样式。

例:

<table style="background-color:#FFFFE0;color:black;border:1px solid #BDB76B;">
<tr style="background-color:#BDB76B;color:white;">
<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>

你会注意到,添加border属性的<table>元素只会在表格周围放置一个边框 – 而不是单独的表格单元格。要在每个单元格周围有边框,您需要将该border元素应用于每个单元格。有一个快速简单的方法来做到这一点 – CSS类。

在以下示例中,我们使用CSS类来针对表格及其单元设置边框颜色和其他属性。

表格颜色与CSS类

在为HTML文档设置样式时,应尽可能使用CSS类。您可以在嵌入式样式表或外部样式表中定义这些类。

以下是使用嵌入式样式表来定义HTML表格样式的示例。请注意,样式设置在开始和结束<style>标签之间。

<!-- Start Styles. Move the 'style' tags and everything between them to between the 'head' tags -->
<style type="text/css">
.myTable { background-color:#FFFFE0;border-collapse:collapse; }
.myTable th { background-color:#BDB76B;color:white;width:50%; }
.myTable td, .myTable th { padding:5px;border:1px solid #BDB76B; }
</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>
133791

 

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