Sometimes you need to add pictures and captions to your site but you don’t want to entirely reformat the whole thing or get into the CSS (cascading style sheet). Often, the perfect solution is creating a table. Tables can work nearly anywhere you can enter HTML coding. Be sure you are using the HTML editing window, not the visual. You need the HTML window because it will read the coding you’ll use for your table.

Every table starts with the word <table> in brackets, followed by the letters <tr> which stand for ‘table row’. Then comes the <td> which stands for ‘table data cell’. Your information will be after this table data tag. These are all called ‘tags’ and they all must be closed where they finish by repeating the tag with a  / inserted, like this: </td> </tr> </table>

The most basic HTML table would look like this:

<table>

<tr>

<td>
Your information here.
</td>

</tr>

</table>

ADDING IMAGES TO A TABLE

Before adding images to your table, you will need to upload them somewhere on the internet and obtain the full URL to wherever the images are located to include them in the table.

The addition of more table data cells <td> will place them next to each other horizontally on the same row, until that row is closed. We’re also going to specify a size for the table so it doesn’t extend further than the area you want it in. Monitors display in pixels or percentages, so we first need to know how many pixels wide and/or high the area is we want the table in. If you’re not sure and you don’t know how to find out, then you can simply take a screen capture (Windows – press the ‘Print Screen’ keyboard button, Mac – Cmd+Shift+4) , and open in Photoshop or any image editing program to get the size in pixels. The following table is 500 pixels wide to display nicely in this article area, and the height is at 100% since we are not limited vertically. It will have two columns of <td> cells with the left side containing an image.

Notice the HTML code for inserting an image. It is within brackets, and contains the HTML code ‘img src’ (image source) and the URL for the image. The ‘alt’ tag (means alternative text) is for the image description. Because this HTML coding will be used in a blog which uses XHTML, we need to take our HTML image tag a step further and close it with a space and a / before the closing bracket:

<img src="http://yoursite.com/images/filename.jpg" alt="description here" />

The border=”1″ in the table tag means only that you can see the edges of the cells which is helpful when building tables. When you’re happy with the table, you can change the 1 to 0, or delete the border command entirely.

<table width="500px" height="100%" border="1">

<tr>

<td>
<img src="http://yoursite.com/images/filename.jpg" alt="description here" />
</td>

<td>
This text is in the table data cell on the right.
</td>

</tr>

</table>

This table results in the following:

As you can see, the image and the text are bumped up against the left side of their respective cells. Not a big deal if the borders were hidden, but there are a couple of simple things we can do if we don’t want this. First, we can add some padding between the cell content and the edges with a command in the <table> tag called ‘cellpadding’. Since it is in the table tag, it will affect the all the cells within the table. We can also add alignment commands within each <td> tag to place things where we want them in that cell. Those commands are ‘align’ (for horizontal alignment) and ‘valign’ (for vertical alignment). Then ‘top’, ‘bottom’, ‘left’, ‘right’, or ‘center’. The following table will center the image and the text both vertically and horizontally, and it has a cellpadding of 5 pixels between the cell contents and the cell edges:

<table width="500" border="1" cellpadding="5">

<tr>

<td align="center" valign="center">

<img src="http://yoursite.com/images/filename.jpg" alt="description here" />
</td>

<td align="center" valign="center">
This text is in the table data cell on the right.
</td>

</tr>

</table>

And here is the result:

Another common need for tables in blogs is placing multiple images with captions centered below each image. The following example has 2 images with captions centered below each one. This time we’ll make use of the very useful HTML code called the <br> tag which means ‘page break’. Like the image tag, we need to modify the html version of the <br> tag to work nicely in XHTML by adding a space and / inside the brackets like this: <br />. We’ll place this tag after the image link which will put our caption directly beneath the image in that <td> cell.

<table width="500" border="1" cellpadding="5">

<tr>

<td align="center" valign="center">
<img src="http://yoursite.com/images/filename.jpg" alt="description here" />
<br />
Caption text centered under the image.
</td>

<td align="center" valign="center">
<img src="http://yoursite.com/images/filename.jpg" alt="description here" />
<br />
Caption text centered under the image.
</td>

</tr>

</table>

And the result:

Now that we’re happy with the table, let’s turn off the borders. Notice the border code in the <table> tag is now set to ‘0′.

<table width="500" border="0" cellpadding="5">

<tr>

<td align="center" valign="center">
<img src="http://yoursite.com/images/filename.jpg" alt="description here" />
<br />
Caption text centered under the image.
</td>

<td align="center" valign="center">
<img src="http://yoursite.com/images/filename.jpg" alt="description here" />
<br />
Caption text centered under the image.
</td>

</tr>

</table>

And here is the finished table:

You can have multiple tables stacked on one page or blog post. The above examples will easily accommodate one or two images for most users.

Tables are a powerful tool to use when you only want to target a small area of your blog.

       

Comments Welcome

Name (required)

Mail (will not be published) (required)

Website