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

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:


  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

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

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