Back to Basics: Understanding and Using Tables

Welcome to our special series on getting to know HTML! Every other week, we'll debut a new article full of valuable tips and tricks that will start you on the path to being an HTML pro. We'll cover everything from the very basics, to tricks with images and headers, to advanced HTML. Miss anything? Check out the other posts in our series here.

So far in our HTML series, we've covered the basics, HTML for images, and lists and headers. Today, we're going to learn how tables work and how to use them in blog posts.

It's likely that you've used a table in a spreadsheet or other document - they're great for laying out information in an easy-to-read format. The HTML for tables can be a little tricky to grasp, though. So let's break it down into bite sized pieces.

Let's start with a very basic table, like this:

Name	Age	Location
Bob	25	California
Lisa	35	New York

First, we'll use a table and a tbody tag to get the table started:

<table>
<tbody>
....
</tbody>
</table>

All of the table elements will go within those tags.

Let's set the table to take up 100% of the width of the content area and add some padding around the table cells so the text doesn't crowd.

<table width="100%" border="1" cellspacing="3" cellpadding="3">
<tbody>
....
</tbody>
</table>

 Next, let's add a row with the tr tag:

<table width="100%" border="1" cellspacing="3" cellpadding="3">
<tbody>
<tr></tr>
</tbody>
</table>

That is one row. To break that into columns, you will use the td tag:

<table width="100%" border="1" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

So far we have one row with three column cells.

Using the text from our example above, that would look like:

<table width="100%" border="1" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<td>Name</td>
<td>Age</td>
<td>Location</td>
</tr>
</tbody>
</table>

To add another column, just add another <td></td> pair where you want to that show in order. Example:

<table width="100%" border="1" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<td>Name</td>
<td>Age</td>
<td>Location</td>
<td>New column</td>
</tr>
</tbody>
</table>

That would translate to this as embedded code:

Name

Age

Location

New column

So now we have a table with one row and three columns. Let's add a second row:

<table width="100%" border="1" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<td>Name</td>
<td>Age</td>
<td>Location</td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

Add your text to the cells:

<table width="100%" border="1" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<td>Name</td>
<td>Age</td>
<td>Location</td>
</tr>

<tr>
<td>Bob</td>
<td>25</td>
<td>California</td>
</tr>
</tbody>
</table>

Now we have:

Name	Age	Location
Bob	25	California

You can keep going until you have all your rows of information added. The full code for our example table looks like:

<table width="100%" border="1" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<td>Name</td>
<td>Age</td>
<td>Location</td>
</tr>

<tr>
<td>Bob</td>
<td>25</td>
<td>California</td>
</tr>

<tr>
<td>Lisa</td>
<td>35</td>
<td>New York</td>
</tr>
</tbody>
</table>

Once you've added in your table code via the HTML tab in Compose, you can click back over to Rich Text to format the text - change the font sizes and colors, insert links, etc.

If you want to have very specific control over the placement of a group of images, a table might do the trick. For that, we recommend adding in the table code via the HTML tab and then clicking over to Rich Text to insert an image into each table cell.

That could look something like this:

The table above has two rows and two columns. The images were inserted at their full size (100 pixels square) and centered.  We've set the table to be the same width as the content (200 pixels wide), centered it, and set the border attribute in the table tag to 0 to remove the border around each cell.

The code - without the image code because that's pretty long! - looks like:

<table width="200" border="0" cellspacing="3" cellpadding="3" align="center">
<tbody>
<tr>
<td>(image)</td>
<td>(image)</td>
</tr>
<tr>
<td>(image)</td>
<td>(image)</td>
</tr>
</tbody>
</table>

As you can probably tell, it would be easy to get carried away with tables. We recommend using it just for text and images that you want to lay out in rows and columns in your blog posts - it shouldn't be used in a blog's design in place of CSS.

For further reading, check out w3schools article on tables. Once you have the basics down, you can save yourself time with an online table generator. Just be sure to paste the code into the HTML tab in your post, not the Rich Text tab - otherwise, you'll just see the code and not the table itself.