How to make table cell background opacity

Written by foye robinson
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to make table cell background opacity
Table cell background opacity (Abstract transparant blue/black background image by thea walstra from Fotolia.com)

You can access the background property of a table's cell by using Cascading Style Sheets (CSS). Web browsers use CSS to format the contents of a web page. A lower opacity makes the background of your cell more transparent; a higher opacity does the opposite. According to W3Schools, Firefox uses the opacity:x property for transparency, while Internet Explorer uses filter:alpha(opacity=x). You should include both in your code, so the opacity can work properly in both browsers.

Skill level:
Moderate

Other People Are Reading

Instructions

  1. 1

    Open your HTML file and add the following code within the <HEAD> tag of your page: <style type="text/css"> .opacity { background-colour: red; opacity:0.3; filter:alpha(opacity=30); } </style>

  2. 2

    Replace "red" with a background colour of your choice.

  3. 3

    Change "0.3" to a number between "0.0" to "1.0" for Firefox, and change "30" to a number between "0" to "100" for Internet Explorer.

  4. 4

    Be sure to use the same opacity levels for Firefox and Internet Explorer---example: opacity:0.6 and filter:alpha(opacity=60).

  5. 5

    Add following code inside the <BODY> tag of your HTML file (to the create your table) as follows: <table width="100%" border="1"> <tr> <td>&nbsp;</td><td class="opacity">Add your text here</td> </tr> </table>

  6. 6

    Make sure you have the correct class name (class="opacity") in the <TD> tag. To add the opacity to an existing cell, replace the <TD> tag for the existing cell (in your HTML file) with the following: <td class="opacity">Add your text here</td>

  7. 7

    Replace "Add your text here" with your content.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.