Background color in HTML table

Support
#1

Hello,

I did not manage to add background color in HTML table. Could you please explain me how to do it? Here is my code but the bg color doesn’t work:

<table>
<tr bgcolor="#FF0000">
  <th>Prix à l’heure</th>
  <th style="text-align:center;">1h / 3 pers.</th>
  <th style="text-align:center;">2h / 6 pers.</th>
  <th style="text-align:center;">3h / 9 pers.</th>
  <th style="text-align:center;">4h / 12 pers.</th>
</tr>
<tr>
  <td>Interventions ponctuelles<br>
1 fois dans l’année
</td>
  <td style="text-align:center;">50,- €</td>
  <td style="text-align:center;">95,- €</td>
  <td style="text-align:center;">135,- €</td>
  <td style="text-align:center;">170,- €</td>
</tr>
<tr>
  <td>Interventions dans <br>le cadre d’un contrat<br>long terme<span style="color:#8C0119
">*</span></td>
  <td style="text-align:center;">45,- €</td>
  <td style="text-align:center;">85,- €</td>
  <td style="text-align:center;">120,- €</td>
  <td style="text-align:center;">150,- €</td>
</tr>

Thanks,
Antoine

#2

Hello Antoine,

Thanks for writing in!

Please update your code and use this:

<table>
    <tbody><tr bgcolor="#FF0000">
      <th>Prix à l’heure</th>
      <th style="text-align:center;">1h / 3 pers.</th>
      <th style="text-align:center;">2h / 6 pers.</th>
      <th style="text-align:center;">3h / 9 pers.</th>
      <th style="text-align:center;">4h / 12 pers.</th>
    </tr>
    <tr>
      <td>Interventions ponctuelles<br>
    1 fois dans l’année
    </td>
      <td style="text-align:center;">50,- €</td>
      <td style="text-align:center;">95,- €</td>
      <td style="text-align:center;">135,- €</td>
      <td style="text-align:center;">170,- €</td>
    </tr>
    <tr>
      <td>Interventions dans <br>le cadre d’un contrat<br>long terme<span style="color:#8C0119
    ">*</span></td>
      <td style="text-align:center;">45,- €</td>
      <td style="text-align:center;">85,- €</td>
      <td style="text-align:center;">120,- €</td>
      <td style="text-align:center;">150,- €</td>
    </tr>
	</tbody>
</table>

For more details, please check this out:
https://www.w3schools.com/tags/tag_table.asp
https://www.quackit.com/html/html_table_tutorial.cfm

#3

Thanks you for your suggestion. Adding <tbody> ... </tbody> does unfortunately not make it work.
I tried to look for documentation similar to the one you sent, but it doesn’t work and this is the reason why I asked the support.

#4

Hey There,

Please provide us the url of the page where we can find the table. We need to check the entire page. There might be some conflict or tag issues which has caused the table not to display the background color.

Thank you in advance.

#5

https://unepausenergetique.fr/amma-assis-shiatsu/#bienfaits-tarifs (pwd:france)

#6

Hi E-Marketing Mix,

Please change the code to this:

<table class="bgtable">
    <tbody><tr bgcolor="#FF0000">
      <th>Prix à l’heure</th>
      <th style="text-align:center;">1h / 3 pers.</th>
      <th style="text-align:center;">2h / 6 pers.</th>
      <th style="text-align:center;">3h / 9 pers.</th>
      <th style="text-align:center;">4h / 12 pers.</th>
    </tr>
    <tr>
      <td>Interventions ponctuelles<br>
    1 fois dans l’année
    </td>
      <td style="text-align:center;">50,- €</td>
      <td style="text-align:center;">95,- €</td>
      <td style="text-align:center;">135,- €</td>
      <td style="text-align:center;">170,- €</td>
    </tr>
    <tr>
      <td>Interventions dans <br>le cadre d’un contrat<br>long terme<span style="color:#8C0119
    ">*</span></td>
      <td style="text-align:center;">45,- €</td>
      <td style="text-align:center;">85,- €</td>
      <td style="text-align:center;">120,- €</td>
      <td style="text-align:center;">150,- €</td>
    </tr>
	</tbody>
</table>

I added a class to the table.

Then please add the CSS code below to X > Theme Options > CSS:

table.bgtable th, table.bgtable td {
   background-color: transparent;
}

The reason that you could not see the background color was that the theme has each table cell have a white background. The row itself had the background color but each cell would override the color of the whole row. By adding the CSS code above you will force the table cells to have no background color thus the row background color will show.

Thank you.

#7

Thank you very much for your help!

#8

You’re most welcome!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.