File Under: HTML

Format HTML Tables

Love tables yet? You will. This week we’re going to go over ways to spice up your table and complicate your life. Learn the basics by reading Tutorial:Create Simple HTML Tables. You down for some of the harder stuff? Cool.


Using the Align Tag

You’re already familiar with the align tag. It’s an old friend. You put it in <img> and <p> tags. But you can also use it in a table — anywhere. Let’s take a look:

<td align="right"> aligns anything you put in that cell (text, images, etc.) to the right.<tr align="right"> aligns everything you put in all the cells of that row to the right.<table align="right"> aligns the whole table to the right and flows text around it. It works just like aligning an image.

The values for aligning an entire table are:

align="right" pushes everything against the right side. align="left" pushes everything against the left side. This is the default setting, so you probably won’t ever need it. align="center" centers everything in the middle.

But wait, there’s more! We can also line stuff up vertically, pushing it toward the top, bottom, or middle of the cells. We do this with valign:

<td valign="top"> aligns anything you put in that cell (text, images, etc.) at the top.<tr valign="top"> aligns anything you put in all the cells of that row with the top.

The values for vertical alignment are:

valign="top" pushes everything to the top of the cell. valign="bottom" pushes everything to the bottom of the cell. valign="center" centers everything in the middle vertically. This is the default, so you probably won’t ever need to do it.


Just a Little Space

Now that you’ve got your table all aligned, you may want to adjust the spacing of the cells. Here are two tags that do really similar things that you’ll probably mix up a lot:cellspacing and cellpadding.

They both put a little space between the cells of your table, but they do it in different ways. cellspacing makes the border of the table fatter, increasing the distance between cells. cellpadding adds invisible space inside the border of the cells, which pushes the cell’s contents away from the border on all four sides.

cellspacing=10

1 2
3 4

cellpadding=10

1 2
3 4

Both attributes go in the <table> tag, like so:

<table cellpadding="4" cellspacing="5">

If you’re planning on leaving the table borders off, it really doesn’t matter which you use. But if you’re going to leave the borders on (or add color to your table cells) the difference between the two tags will become very important. Just remember:Spacing increases the size of the border, and padding increases the space around the border.


Tips and Tricks

Now that you’ve got tables down cold, here are some tips and tricks that might come in handy:

  • If you don’t specify cellpadding and cellspacing, they default to the number 2. So if you really want your cell contents to get close and personal, be sure to specify cellpadding=0 and cellspacing=0.
  • For more control, put nowrap in your table cell, like so:<td nowrap>. This means that no text in that cell will wrap, unless you manually break it with the <br> tag.
  • To make a table take up the entire page — no matter how big the user makes it — set the width and height at 100%, like so:<table width="100%" height="100%">.
  • As always, be creative, not excessive.