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


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
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
Thanks for your registration, follow us on our social networks to keep up-to-date