HTML Table text color

 The text color of HTML Table can be modified through the color attribute of the font tag of HTML itself , or it can be modified using the color attribute of css , but using the font tag is more troublesome, because the text color of each column must be preset with the web page The text color is different. For example, the default text color of the web page is black, and the text color in the table should be blue. The text in each field must be marked with a font tag, and the grammar of the blue text must be marked individually. The color attribute of css can be used directly in the table tag at the beginning of the table, and the text color is marked as blue with color , so that once written, the default color of all text in the table will become blue. Another case, in which a few text color in the table or else the same, this time with HTML 's font color label or to deal with css color attributes are the same, but usually will choose treatment with css, because greater flexibility , And it will be easier to manage in the future, and it can be integrated with other css styles in the web page itself. In order to let readers see the grammatical difference between HTML font color property and css color property in modifying the color of table text, here are several examples for reference. Example 1: Use the HTML default font tag color to modify the text color of the table

<table border="1">
<tr>
　<td>Original text</td>
　<td><font color="blue">Blue text</font></td>
　<td><font color ="green">Green text</font></td>
</tr>
</table>

Present results

Original text

Blue text

Green text

The first example uses the traditional basic grammar of HTML . The advantage is that it is very simple and the support of each browser is very high. The disadvantage is that each field needs to be marked with the font color slowly , using the text in the three fields in the example table The colors are all different. The writing method is to label the blue and green text. This effect can be easily achieved in the CSS design world. It can be achieved through the span label and the color attribute of the css style. Example 2 There will be a clear explanation, but before looking at the second example, we must first lay the basic HTML foundation. Here are two basic instructions about HTML tables and text colors. Those who are not familiar with it are recommended to read them first.

• HTML table
• HTML font color text color

The above two documents have detailed HTML table design syntax and font color attribute usage. If there is no problem, you can continue to Example 2 and see how to add color attribute to the text of the table field through the span area element of css The colors are individually modified.

Example 2: Use css color to modify the text color of different fields in the table

<table border="1">
<tr>
　<td>Original text</td>
　<td><span style="color:blue;">Blue text</span></td>
　<td> <span style="color:green;">green text</span></td>
</tr>
</table>

Present results

Original text

Blue text

Green text

The presentation result of example two is the same as that of example one. The difference is that the span area element is used to mark the text in the table field, and then the color attribute in the span tag is used to successfully make each field text The effect of different colors. In fact, it is not necessary to modify the text color of the entire field at one time. It is also possible to simply label a few of the words, and design according to the needs of the web page. Here are two explanations about the use of span and color attributes. Welcome to refer to.

• CSS color text color
• Introduction to CSS span tag usage

Examples 1 and 2 are both text color modification techniques for individual fields. However, if the text color of the entire table must be the same and different from the default text color of the web page, for example, the default text of the web page is black. We hope that the text color of all the fields in the table are orange, so we can use css to manage it at one time, continue to see how to write in example three?

Example 3: Use the css color property to modify the text color of the entire table

<table border="1" style="color:orange;" >
<tr>
　<td>Table text</td>
　<td>Table text</td>
　<td>Table text</td>
< /tr>
</table>

Present results

The text of the table

The text of the table

The text of the table

From the rendering results, we can see that all the table texts are orange, and the code part is very concise. There is no need to mark each field text like the HTML font tag, just use it in the table tag at the beginning "Style="color:orange;"" can be done with a simple grammar, which is the advantage of css grammar.