Skip to main content
JKelley
JKelley
Helper ⭐️
March 23, 2022
Solved

Can I change the table row header background color? (specify hex value)

  • March 23, 2022
  • 1 reply
  • 250 views

I’m embedding some tables in an Article and hoping to specify the header row or cell color to a certain hex value.  Is that something we can do either in the WYSIWIG editor or the HTML?

(Not the text / font color, that one I’ve got and not the background color of the text but the whole row or cell.)

I would like to change the “flood” color of this to a hex value
And leave this one as is

 

    Best answer by SmartlyGreg

    @JKelley if you’re the community manager posting an article you create from Control then yes.

    The reason why others cannot is that you can edit the code tied to your table from Control which is not part of the WYSIWYG editor in the front end.

     

    Example result:

     

    How to do it:

    What you will want to do is create everything as you usually do in Control and then look for this button:

    Note: This is not the code button to embed code but the switch to toggle into HTML mode.

    When pressed your table will now look like this:

    <table>
    	<thead>
    		<tr>
    			<th>This is the title</th>
    			<th style="width:153px">And the other title</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>Content A1</td>
    			<td style="width:153px">Content A2</td>
    		</tr>
    		<tr>
    			<td>Content B1</td>
    			<td style="width:153px">Content B2</td>
    		</tr>
    	</tbody>
    </table>

    And all you need to do is add the background color on the cells you need by inserting this:

    background-color:#ff0000;

    This will make it red but you can obviously choose by changing the Hex colour code.

     

    Hope this helps!

    1 reply

    SmartlyGreg
    SmartlyGregAnswer
    Helper ⭐️⭐️⭐️
    March 24, 2022

    @JKelley if you’re the community manager posting an article you create from Control then yes.

    The reason why others cannot is that you can edit the code tied to your table from Control which is not part of the WYSIWYG editor in the front end.

     

    Example result:

     

    How to do it:

    What you will want to do is create everything as you usually do in Control and then look for this button:

    Note: This is not the code button to embed code but the switch to toggle into HTML mode.

    When pressed your table will now look like this:

    <table>
    	<thead>
    		<tr>
    			<th>This is the title</th>
    			<th style="width:153px">And the other title</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>Content A1</td>
    			<td style="width:153px">Content A2</td>
    		</tr>
    		<tr>
    			<td>Content B1</td>
    			<td style="width:153px">Content B2</td>
    		</tr>
    	</tbody>
    </table>

    And all you need to do is add the background color on the cells you need by inserting this:

    background-color:#ff0000;

    This will make it red but you can obviously choose by changing the Hex colour code.

     

    Hope this helps!

    Terms & ConditionsAccessibility statement