HOME  I  LAYOUTS  I  FANFICTIONS  I  REQUEST SHOP  

 

Background-color on Tables (August 6, 2018)

 

❊

 

In this tutorial, I will be going over how to add background colors on tables.

 

Step 1

Click on the table icon on the editor (it's beside the image and insert horizontal line icons; the 15th icon from the top source line; has a solid gray line and two rows of 3 boxes each). Set your table properties as you wish.

For this tutorial, I will set mine to 3 rows, 2 columns, 1 border size and 300 width. 

Like this:

           

Step 2

Now, find the codes to the layout by clicking 'Source' at the top. It should look something like this:

<table border="1" cellpadding="1" cellspacing="1" style="width:300px;">
    <tbody>
        <tr>
            <td> </td>
            <td> </td>
        </tr>
        <tr>
            <td> </td>
            <td> </td>
        </tr>
        <tr>
            <td> </td>
            <td> </td>
        </tr>
    </tbody>
</table>

 

Step 3

If you want to make both the top row colored black (because the border is black on default), find the code to the first row and add the code 'background-color:black'.

Note: Every row is divided by the <tr> </tr> tag while each column is marked by a <td> </td> tag.

<table border="1" cellpadding="1" cellspacing="1" style="width:300px;">
    <tbody>
        <tr style="background-color:black;">
            <td> </td>
            <td> </td>
        </tr>
        <tr>
            <td> </td>
            <td> </td>
        </tr>
        <tr>
            <td> </td>
            <td> </td>
        </tr>
    </tbody>
</table>

 

So once that's added, it should look like this:

      

 

Step 4

If you want to make the first column colored black, then use the same background-color code but instead, use it on the columns tag.

<table border="1" cellpadding="1" cellspacing="1" style="width:300px;">
    <tbody>
        <tr>
            <td style="background-color:black;"> </td>
            <td> </td>
        &