Free HTML and CSS for a Table Within a Post or Page

I used a 3-column, 7-row table in a recent post Why I Think Text Link Ads IS Better Than Google AdSense. If you would like to grab the HTML and CSS for it and adapt it to your own purposes – come and get it.

The Table

Here is a screenshot of the table I designed. It is made my inserting HTML into the post editor and inserting CSS into the Custom.css file.

The code for making this table is at the end of this post.

The Book That Makes It All Possible

I have a great book called, funnily enough, HTML XHTML & CSS, Sixth Edition – Visual Quickstart Guide by Elizabeth Castro.

It is absolutely fantastic for newbies to code and also those novice apprentices out there that can’t always remember the code.

• It is very well indexed with lots of examples and pictures.
• You can work your way through it and follow their examples to have a ‘play’ or you can refer to it when you need to, e.g. remembering the order of padding TRBL (top, right, bottom, left).
• It has a great fold-out color code guide as well with swatches of colors and the hexadecimal values, e.g. White #FFFFFF.

Table HTML

To insert a table like the one above, insert the following HTML code into your post editor amongst your article text.

<table cellspacing="0" cellpadding="0" width="100%" border="1" frame="border" rules="rows">
<tbody>
<tr>
<td><strong>Sidebar titles</strong></td>
<td><strong>First column title</strong></td>
<td><strong>Second column title</strong></td>
</tr>
<tr>
<td><strong>Left sidebar title</strong></td>
<td>First col text</td>
<td>Second col text</td>
</tr>
<tr>
<td><strong>Left sidebar title</strong></td>
<td>First col text</td>
<td>Second col text</td>
</tr>
<tr>
<td><strong>Left sidebar title</strong></td>
<td>First col text</td>
<td>Second col text</td>
</tr>
<tr>
<td><strong>Left sidebar title</strong></td>
<td>First col text</td>
<td>Second col text</td>
</tr>
<tr>
<td><strong>Left sidebar title</strong></td>
<td>First col text</td>
<td>Second col text</td>
</tr>
<tr>
<td><strong>Left sidebar title</strong></td>
<td>First col text</td>
<td>Second col text</td>
</tr>
<tr>
<td><strong>Left sidebar title</strong></td>
<td>First col text</td>
<td>Second col text</td>
</tr>
<tr>
<td><strong>Left sidebar title</strong></td>
<td>First col text</td>
<td>Second col text</td>
</tr>
<tr>
<td><strong>Left sidebar title</strong></td>
<td>First col text</td>
<td>Second col text</td>
</tr>
</tbody></table>

Table CSS

To style your table you will need to include the following CSS code into your custom.css (custom style sheet).

• Change the colors, font, borders, widths, etc.
• If you want more or less columns or rows, just delete or copy and paste the <td>ROW</td> or <tr>COLUMN</tr> – taking note the format and order of row and column breaks.

.tableleft {vertical-align: top; width:120px; margin:0; padding:4px 4px 6px 4px; border:1px #898989; background: #ececec; font-style: bold; font-family: Arial; font-size: 12px;}
.tablecenter {vertical-align: top; width:200px; margin:0; padding:4px 4px 6px 4px; border:1px #898989; background: #ffffff; font-family: Arial; font-size: 12px;}
.tableright {vertical-align: top; width:200px; margin:0; padding:4px 4px 6px 4px; border:1px #898989; background: #ececec; font-family: Arial; font-size: 12px;}

Another Example of a Table

I adapted the above code to create a different table for the post 100 Reasons Why Blogussion is an Amazingly Successful Site (Part 1). Screenshot below…

Show Us Your Table

If you do use this code as is, or adapt it to make your own table, come back and leave a link to your post.