How to Change Text Color in an HTML Table

Change text color using the table style property.

HTML tables provide you with the ability to place elements in specific, uniform area of a Web page. Tables contain rows and columns that make up a grid. Horizontal rows and vertical columns intersect to create a table cell. These cells contain your HTML elements. Text is commonly placed in table cells, and you can set the text color using the table's style properties. The style property is used to change the text's color, size and font.

Instructions

1. Create your table frame. Tables are created using the opening "<table>" and closing "</table>" tags. The following code creates a table frame:

   <table id="theTable"> </table>

   The "id" property allows you to call the table in Javascript if you choose to make the table properties dynamic.

2. Create some rows and columns. In this example, the table contains two rows and two columns. The following creates a simple table layout:

   <table id="theTable">
   <tr><td>Table information in column 1.</td></tr>
   <tr><td>More information in column 2.</td></tr>
   </table>

3. Set the table's font color. The style property is used to set the color of your table's text. The following code sets the table's font color to white:

   <table id="theTable" style="color: #ffffff>
   <tr><td>Table information in column 1.</td></tr>
   <tr><td>More information in column 2.</td></tr>
   </table>

   The color is set in a hex color code. There are several color codes (see resource) you can use to set your table's font color.

References

• Robert Denton: CSS Tables

Resources

• W3 Schools: HTML Hex Color Codes