Table Text

In HTML, table text is the text that is located within an HTML table. Often you will want your table text to appear different to the other text on the page. This page contains table text codes for applying styles to the text within your HTML tables.
To style the text within a table, you use the same CSS properties that you would in styling any text. The thing to remember is that, you need to know which HTML element to apply the style against. For example, to change the text color across the whole table, use the color property against the


tag. But to change the text color in only the table header, you should only apply that property to the tag (or the tag that contains the table headers).
Below are some examples of applying styles against table text in HTML.

Whole Table

This example applies various styles against the text in the whole table. Therefore, I apply the styles against the


tag.
Like this:

Source Code	Result
<!-- surenko.blogspot.com--> <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>	Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4

Table Row

To change the text style in a whole table row, you can apply the CSS against the tag.
Example:

Source Code	Result
<!-- suren.mgr9@gmail.com--> <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>	Table Header Table Header Table cell 1 Table cell 2 Table cell 3 Table cell 4

Table Text with CSS Classes

Using CSS classes is a more efficient way of setting your styles. You simply create a class (using a name of your choosing), then apply styles against that class. Then you can refer to that class from anywhere within your HTML document.
Here's an example of using an embedded style sheet to define the styles of your HTML tables. Note that the styles are set in between the tags.

Source Code

Result

<!-- Codes by suren--> <!-- 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>

Table Header Table Header 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. Table cell 2 Table cell 3 Table cell 4

Share on Google Plus

About Saroj Thapa Magar

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.