This page demonstrates how to set the table color within your web pages and other HTML documents.
In HTML, table color is defined using Cascading Style Sheets (CSS). You can change the color of the whole table, part of the table (eg, table cells or table borders), and the text within the table cells.
The CSS property to use will depend on which element you're changing the color of. For example, to change the background color, you need to use the
background-color
property. To change the color of the text within the table, simply use the
color
property.
Below are some examples of applying a table border in HTML.
Table Background Color
You can use the CSS
background-color
property to change the background color of the whole table.
Like this:
|
Table Header | Table Header |
Table cell 1 | Table cell 2 |
Table cell 3 | Table cell 4 |
|
Table Row Color
You can change the background color of a table row:
|
Table Header | Table Header |
Table cell 1 | Table cell 2 |
Table cell 3 | Table cell 4 |
|
Table Cell Background Color
You can change the background color of an individual table cell:
|
Table Header | Table Header |
Table cell 1 | Table cell 2 |
Table cell 3 | Table cell 4 |
|
Table Text Color
You can change the color of text within a table. To change the color of the text within the table, you need to use the
color
property. By the way, you don't need to apply this element against each piece of text - you can apply it to the whole table.
In this example, I change the color of the text to black, but I also change the table header text to white:
|
Table Header | Table Header |
Table cell 1 | Table cell 2 |
Table cell 3 | Table cell 4 |
|
Table Border Color
You can set a table border and change its color too. To do this, you can use the
border
property. You also need to specify how wide the border is and what style.
Example:
|
Table Header | Table Header |
Table cell 1 | Table cell 2 |
Table cell 3 | Table cell 4 |
|
You'll notice that adding the
border
property against the
table
element only puts a border around the table - not the individual table cells. To have a border around each cell, you need to apply the
border
element against each cell. There's a quick and easy way to do this - CSS classes.
In the following example, we use CSS classes to set the border color and other properties against the table and its cells.
Table Color with CSS Classes
You should use CSS classes where ever possible when setting styles for your HTML documents. You can define these classes in an embedded style sheet or external style sheet.
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.
|
Table Header | Table Header |
Table cell 1 | Table cell 2 |
Table cell 3 | Table cell 4 |
|
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.
0 comments:
Post a Comment