Transparent Table Background

Getting Started

We are creating a table with a background color that is translucent. You may use any color that you like but for our example, we will use black.

Creating the Table

A table is needed to contain the content as well as have the background color. Below is our starting table code.

<table>

  <tbody>

    <tr>

     <td>

      Color RGBA CSS3 Google Sites

     </td>

    </tr>

  </tbody>

</table>

Inline CSS Style

Using inline CSS we will add the style to the table. We will take our previous table and add the inline css using the style declarations.

<td style="background-color:rgba(0,0,0,0.4);">

 <span style="color:#ffffff;font-size:16pt;">

  Color RGBA CSS3 Google Sites

  </span>

 </td>

Table Positioning

For the table to be moved around margin is needed. This can be added by using inline css using the style declarations.

Demo

The table below has been constructed using the same way. Some additional inline CSS was added to the text and parent table to add a background.
Click here to view the adding a background image to a table tutorial.

Translucent Table Background

Last Revised 06/12/17