How to Insert Tables in your Blog, Part 2: Table Customization

Pin It

So in the last post, How to Insert Tables in your Blog, Part 1, we learned how to insert tables into your blog posts.  We learned how to insert the basic table, and how to add more rows and columns.  In this post, we're going to learn how to further customize your table.


Here is our basic table code:

<table border="2" bordercolor="#000000" style="background-color:#FFFFFF" width="100%" cellpadding="3" cellspacing="3">

<tr>

<th>Table Header</th>

<th>Table Header</th>

<th>Table Header</th>

</tr>

<tr>

<td>Table Cell</td>

<td>Table Cell</td>

<td>Table Cell</td>

</tr>

<tr>

<td>Table Cell</td>

<td>Table Cell</td>

<td>Table Cell</td>

</tr>

<tr">

<td>Table Cell</td>

<td>Table Cell</td>

<td>Table Cell</td>

</tr>

</table>

That table looks like this:

Table Header	Table Header	Table Header
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell

 
The first customization that we're going to learn is how to change the colors within the table.

If you look at the first bit of code from the table, you see this:

<table border="2" bordercolor="#0033FF" style="background-color:#A9BCF5" width="100%" cellpadding="3" cellspacing="3">

• Border width (red)
• Border color (blue)
• Background color (green)
• Table width (orange) Can be a percentage (fluid) or actual width in pixels

 Don't know HTML color codes?  Check this dynamic html color code website.

For this example, I changed the thickness of the border and the background color:

Table Header	Table Header	Table Header
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell

You can center the alignment of the table itself by adjusting your code to include the text in red:

<table border="2" bordercolor="#000000" style="background-color:#FFFFFF" width="100%" cellpadding="3" cellspacing="3" valign="center" align="center">
        <tr>
        <th>Table Header</th>
        <th>Table Header</th>
        <th>Table Header</th>
        </tr>
        <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        </tr>
        <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        </tr>
        <tr">
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        </tr>
        </table>

Here's the example for centering your table within the post:

Table Header	Table Header	Table Header
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell

Of course there are many more things that you can do with tables, some that I haven't even discovered yet, I'm sure.    I hope that this two part guide has been helpful!!