dcsimg
Login | Register   
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX

By submitting your information, you agree that devx.com may send you DevX offers via email, phone and text message, as well as email offers about other products and services that DevX believes may be of interest to you. DevX will process your information in accordance with the Quinstreet Privacy Policy.


advertisement
 

HTML Advanced: Tables : Page 10

Step-by-step guides for creating tables and some ideas for ways to use them in your pages.


advertisement

WEBINAR:

On-Demand

Application Security Testing: An Integral Part of DevOps


Table Color, Background

<table bgcolor="colorvalue" background="URL">

Netscape Navigator 4X and later and Microsoft IE3X and later offer some additional controls over table and cell size, and borders through new attributes in the table tag, width and rules. If you are reading this section and don't see the expected effects, your browser may not support them.

  • The bgcolor attribute can be added to any of the table tags except for the caption tag. It lets you specify a background color for the entire table, full row, or individual cell.
  • The background attribute can be added to any of the table tags except for the caption tag. It lets you specify a background image for the entire table, full row, or individual cell.
Adding Color



<table bgcolor="colorvalue">

You add color to a table in much the same way you add color to a background or to text: by using the bgcolor attribute. You can include a the bgcolor attribute in any of the table tags, except for the caption tag.

In the examples below, the first table sets a bgcolor for the entire table. The second sets a bgcolor for a specific row. The third sets a table cell color.

This code specifies that the table background be a dark green:

<table border=1 bgcolor="darkseagreen">
<tr>
<th>Fish</th>
<th>Invertebrates</th>
</tr>

<tr>
<td>Guppy</td>
<td>Snail</td>
</tr>

<tr>
<td>Swordtail</td>
<td>Crayfish</td>
</tr>/

</table>

This code specifies that the table row be purple. A color attribute in a table row tag overrides any color attribute in the table tag for that specific row:

<table border=1 bgcolor="darkseagreen">
<tr>
<th>Fish</th>
<th>Invertebrates</th>
</tr>

<tr bgcolor=mediumpurple">
<td>Guppy</td>
<td>Snail</td>
</tr>

<tr>
<td>Swordtail</td>
<td>Crayfish</td>
</tr>/

</table>

Inserting the attribute into a table data or a table header tag sets a background color for a single cell. This code specifies that one table cell be tan and another salmon. The cell color always overrides the row or table color for that cell.

<table border=1 bgcolor="darkseagreen">
<tr>
<th>Fish</th>
<th>Invertebrates</th>
</tr>

<tr bgcolor=mediumpurple">
<td>Guppy</td>
<td>Snail</td>
</tr>

<tr>
<td bgcolor="tan">Swordtail</td>
<td bgcolor="darksalmon">Crayfish</td>
</tr>/

</table>

Adding Background Images

<table background="URL">

You add a background image to a table in much the same way you add a background image to a page: by using background attribute. You can include a the background attribute in any of the table tags, except for the caption tag.

In the examples below, the table as a whole has one background, the row has another, and the cell has a third.

<table border=1 background="/images/devimages/sea.gif" cellpadding=10>>
<tr>
<th>Fish</th>
<th>Invertebrates</th>
</tr>

<tr background="/images/devimages/sand.gif">
<td>Guppy</td>
<td>Snail</td>
</tr>

<tr>
<td >Swordtail</td>
<td background="/images/devimages/sky.gif">Crayfish<



Note: In modern HTML development, use of the background attribute is no longer supported, and you should use the style attribute's background-image property or define a CSS class style instead to apply formatting to elements. For example:

<table style="background-image: url(http://assets.devx.com/devxads/10287.gif); height=100px" cellpadding="5px"> <tr> <td><p style="background: white"> This table uses a Linux Penguin logo as its background image.</p></td> </tr> </table>

The table looks like this:


This table uses a Linux Penguin logo as its background image.



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
×
We have made updates to our Privacy Policy to reflect the implementation of the General Data Protection Regulation.
Thanks for your registration, follow us on our social networks to keep up-to-date