HTML Tables-Table Text - 书目录

HTML Tables-Table Text

Table Text

在HTML中,表格文本是位于HTML表格中的文本。通常情况下,您希望表格文本与页面上的其他文本显示为不同。此页面包含表格文本代码,用于将样式应用于HTML表格中的文本。

要对表格中的文本进行样式设置,可以使用您在样式化文本时使用的相同CSS属性。需要记住的是,你需要知道应用哪种HTML元素。例如,要更改整个表格的文本颜色,请使用该color属性对应<table>标签。但要仅更改表格标题中的文本颜色,您应该只将该属性应用于该<thead>元素,或者应用于每个单独的<th>标记(或<tr>包含表格标题的< 标记)。

以下是在HTML中对表格文本应用样式的一些示例。

整个表格

本示例针对整个表格中的文本应用各种样式。因此,我将这些样式应用于<table>标签。

喜欢这个:

<table border="1" style="font-family:Georgia, Garamond, Serif;color:blue;font-style:italic;">
<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>

表行

要在整个表格行中更改文本样式,可以将CSS应用于<tr>标签。

例:

<table border="1" style="font-family:Georgia, Garamond, Serif;color:blue;font-style:italic;">
<tr style="font-variant:small-caps;font-style:normal;color:black;font-size:18px;">
<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>

带CSS类的表格文本

使用CSS类是设置样式的更有效方式。您只需创建一个类(使用您选择的名称),然后对该类应用样式。然后,您可以从HTML文档中的任何位置引用该类。

以下是使用嵌入式样式表来定义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;font-family:Georgia, Garamond, Serif;color:black; }
.myTable th { width:50%;font:bold 18px/1.1em Arial, Helvetica, Sans-Serif;text-shadow: 1px 1px 4px black;letter-spacing:0.3em;background-color:#BDB76B;color:white; }
.myTable td, .myTable th { padding:5px;border:1px solid #BDB76B; }
.myTable td { line-height:2.5em; }
</style>
<!-- End Styles -->
<table class="myTable">
<tr>
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1. The text in this table has had 'line-height' applied. This results in a larger space in between each line of text.</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-text.cfm 由工具自动翻译,由书目录整理