Need A Padded Cell Yet?

The easiest - and the hardest - thing to learn about HTML is creating tables. Getting it right the first time is almost impossible and tables have been known to put even the best of HTML coders into a rubber room.

They are simple enough, really. Tables, I mean. They have three main parts to them - the table outline <table></table>, rows <tr></tr>, and the individual cells <td></td>. There is a fourth part to a table that we'll cover as well, the table header <th></th>, but not until later.

Tables sound complicated, but they're not, not really. The trick is to get organized right from the start. Unlike the other tutorials I've written, you'll need something outside your computer. You're going to do some of the work on this one. You'll need a sheet of quad graph paper, a pencil and a ruler.

The first thing you'll need to mark off on your graph paper is a large rectangle, 40 squares wide by 30 squares high. Along the edges of the rectangle, mark off every fifth square. Draw two horizontal lines, one 5 squares down from the top and 1 square up from the bottom. Draw a vertical line 5 squares from the left, joining the two horizontal lines and dividing the main rectangle into 4 sections that look like this.

Looks familiar, doesn't it? Tables aren't really made for laying out pages, but later on, when we use CSS to create page layouts, the same principles of creation will apply. They're just done a bit differently in CSS.

Anyway, back to our table. This layout can be used for everything from an 800px by 600px page to one with a considerably larger resolution. I'll do the math for you. Each square is worth 20 pixels or 2.5% of the page width. Mark down the widths and heights on your page as I have done on mine.

Let me explain what you're looking at. At the very top of the page is the 'header', the place where you'll put your logo or title. To the left and down, you'll put your navigation or 'menu', how people will get to see all the pages on your site. To the right of the menu is where you'll put the main 'content' of your site, your images, text or whatever. The bottom part is the 'footer'. This is important but not vital information such as copyrights and/or dates of site construction.

Now, take a good look at the page you've created, reading top to bottom, left to right, just as your browser 'reads' the page. You have a row that stretches across the entire page, a row divided into two unequal sections, and a third row that is like the first, stretching across the entire page. These two rows, the first and third, span the two center row sections or columns of the second. We'll add that information to our table outline in the appropriate place.

We'll start out by using one of the templates we created in "HTML- Tag, You're It!". We have:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
<html>
<head>
<title>My Site</title>
</head>
<body>
</body>
</html>

Our table will go between the <body> and </body> tags. First we add the table.>

<body>
<table></table>
</body>

Next, we put the cursor between the <table> and </table> tags and add the table rows. We're going to need three.

<table>
<tr></tr>
<tr></tr>
<tr></tr>
</table>

Now comes the tricky part, adding in our divisions. Remember, we'll have to have the first and third rows span the two columns of the second row.

<table>
<tr>
<td colspan="2">&nbsp;</td>
</tr>

<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>

<tr colspan="2">&nbsp;</td>
</tr>

</table>

Now, if you save this page as layout1.htm, you'll have a simple template layout for all your pages. At least, you can use this as a template page until you learn how to do your layouts properly, in CSS.

Before I go further into an explanation for tables and page layouts, you should know about a few little quirks some browsers have.

You see how I've put the </td> tag right up against the content? That's necessary for two reasons. One, it ensures that you don't forget to close the <td> tag. Unclosed tags result in pages not showing up in some browsers. The second reason is that if you put the closing tag on a different line, some browsers will take that as a 'space' and add it accordingly. Making sure that the closing tags butt right against the content or the opening tag ensures that you don't have any extra spaces in there.

But what about that bit of code I've put between the <td> and </td> tags? That's important, too. If you're going to have a table division without content, you're going to need something inside the tags to prevent the table from not showing the cell. The 'non-breaking space' code, &nbsp;, works perfectly. It adds a space that all browsers will read and keeps the table from collapsing.

Let's get back to our page.

You'll have more than just the table that doesn't change from page to page. You'll have the header information, the copyright information and possibly the menu, as well, that will be the same from page to page. You can add this information to the page before you save it as an HTML file. Just put it in between the appropriate <td></td> tags, removing the non-breaking space as needed. Refer to your graph paper if you're not sure what's going to go where.

Title: My Site
Menu: 5 pages
Copyright: 2004, MyName, MySite.com

When you're done, click here to see if your code matches mine. It doesn't have to be exact, but the information has to be in the correct cells.

There, you've created a page layout using tables. It's the fastest way to learn how to create a basic page. I know, it doesn't quite look right when you call it up in a browser. Not yet. Let me remind you of a couple of things and we'll go on to the tweaks that will put the page to rights.

You may be asking why constantly going back to insert information is a fast way to create a page. Believe it or not, it is.

The two main problems that crop up with tables, whether you use them for page layouts or not, is the disappearance of cells and the addition of extra spaces. The first is caused by forgetting to close a tag, and the second is caused by having the <td> and/or </td> tags on a different line than the content.

By closing the tags as you create them, you don't forget to close anything. Table layouts can get rather complex, tables nested within tables, rows and/or columns spanning columns or rows, and so on. By creating a basic outline and adding information row by row, there's less chance for error. By creating an entire cell before you add the contents, there's also less chance of having the browser read the carriage return/line feed (new row of HTML) as a space.

Got that figured out? Good. We'll go on to the tweaking.

On our graph paper template, we have our center left column at five squares wide. That translates to 100 pixels or 13% (5/40 or 12.5% rounded up) of the page width. For an 800 x 600 page, that leaves 700 pixels or 87% for the content in the center right column. If you know most of your visitors may have older computers or smaller monitors, design the page using pixels. If you want your page to look good in any resolution, use the percentages. I'll use the percentages in my examples.

So, how do we fix our table and cell widths so that they look like our templates? Like this:

<table width="100%">
<tr>
<td colspan="2">My Site</td>
</tr>

<tr>
<td width="13%"><p>Menu</p>
<p>Page 1<br>
Page 2<br>
Page 3<br>
Page 4<br>
Page 5</p></td>
<td width="87%">You can use either separate paragraphs, <p></p>, for each item on the menu, or you can use the <br> tags, as I have, for numerous menu items. It will depend on how many menu items you have. You can also use unordered lists (ul) for your menu.</td>
</tr>

<tr>
<td colspan="2">&copy;2004, My Name, MySite.com</td>
</tr>

</table>

That's all there is to a basic table - the outline, the row and the cell. Here's what it looks like.

Now to the tag I mentioned at the beginning, the <th> header row tag. This tag is used in place of the <td> tag. You can have only one set of header tags per row or column.

Here's a sample calendar in HTML:

<table>
<tr>
<th> colspan="7">August 2004</td>
<th>Notes:
</tr>

<tr>
<th>Sunday</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<td rowspan="6">&nbsp;</td>
</tr>

<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>

<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>

<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>

<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>

<tr>
<td>29</td>
<td>30</td>
<td>31</td>
<td colspan="4">&nbsp;</td>
</tr>

</table>

And here's what it looks like. See how the cells marked <th> are centered and bold? That's what the <th> tag does.

The other thing a <th> tag does is act like a <h#> tag for search engines. Of all the information on your page, the header tags, both for plain text and tables, are more easily 'seen' by search engines. They're more easily indexed.

And that, pretty much, is all there is to creating tables. Remember to close all your tags in reverse order to their opening and remember to keep your </td> tags at the end of your content, not on another line. Some browsers will read the 'next line' as a space and it can really mess up your pages.

On a final note, table borders and padding are covered in "CSS - History on Line" and "Look, Ma! No Tables!"