Learning HTML: Tables

Last month we started this series and you started your training by learning some HTML basics. We showed you how to get text to show up in a browser, as well as adding some basic formatting such as bold, italic, and headings. And we finished up that first lesson by showing you how to creating bullet and numbered lists and how to hyperlink pages together. In this article, we'll cover some basics about creating tables. Next month we'll concentrate on inserting images and graphics. As this series goes on, we'll concentrate on various aspects of HTML and get into more involved tricks. So stay tuned.

Why Tables?
You may think of a table as somewhat of a rigid way to align information on a page. But don't think of an Excel spreadsheet table or even a Word table, think more about an invisible layout format. Since there aren't a lot of text alignment choices that are recognized in HTML, most designers rely on tables to assist them with page formatting for the web. Tables can also be nested, meaning putting one table inside of another. Images can be placed in cells to help with alignment. And these days, most browsers recognize cell colors and other special formatting that didn't work well years ago. So hopefully you can imagine how important tables can be to web layout.

Controlling Your Code
It's time to break out your HTML editor. If you don't have one, click Start/Run (or hit the Windows + R key combo) and type NOTEPAD into the input box and hit enter to start Notepad, which you can use as your editor. Table codes have both opening and closing codes. And because you need to start with a table code, then move into rows and then cells, it's an important time to remember how to indent and align code properly. Take a look at the simple table code below and see which one you can understand more easily.

<table> <tr> <td> This is cell one. < /td> <td> And this is cell two. </td> <td> And here's cell three. </td> </tr> </table>

<table> <tr> <td> This is cell one. </td> <td> And this is cell two. </td> <td> And here's cell three. </td> </tr> </table>

Sighted developers, who depend on visual aids, will most likely agree that the second code layout is easier to visualize. If the table was missing a code, it would be easier to notice which code is missing because the alignment would be off the mark. And as you've heard me say before, it may not seem like an issue to align a few simple lines of code, but once you get into more complex code, it can save your sanity. So get into the habit of laying out your code properly. One trick to making sure you enter both the opening and closing codes is to enter both codes and then move back into the code to add additional code or text.

The code display above was created with a table that has large spacing between the cells and a little color within the cells.

Creating HTML Tables
Let's create a table. In your editor, first enter the beginning and ending table codes: <table> </table>. Then you can move backwards between those codes if you want and enter the opening and closing codes for a row: <tr> </tr>, or just move along writing the code as you go. Just be sure your code has all the same code as my sample below. In addition to row codes, you'll enter cell codes: <td> </td>. Finally, enter some sample text. Your code should look like this:

<table>
  <tr>
    <td>
      This is my first table!
    </td>
  </tr>
</table>

But since there's no strict rule about how you should align code, and since HTML code is not case sensitive, some folks write code a little differently. You decide what alignment you prefer and whether you want to use lowercase or uppercase code. It doesn't matter. Just be sure to stay consistent.

<TABLE>
  <TR>
    <TD>This is my first table!</TD>
  </TR>
</TABLE>

View Your Table
Save the page in your editor and pay attention to where it's being saved. If your browser has an option to view the code in a browser, click that option now to view your page. If you're using Notepad, click File/SaveAs. In the File Name input box, be sure you add the .html extension or Notepad will automatically add .txt. Your browser won't recognize the TXT file. Then open your web browser. Click File/Open and Browse to the file on your hard drive to bring it into view.

Table Borders
Humm? Not all that interesting, eh? And we can't even notice that it's a table! That's because we didn't add a border. So go back to your code. Add another cell in the same row and this time add a border so we can see the table layout. Note a good trick when you're aligning a complex table is to add that border so you can see the layout. Later you can remove it if you don't need the border to show. Your code should look like this:

<table border=1>
  <tr>
     <td>
      This is my first table!
     </td>
     <td>
      This is cell number two.
     </td>
  </tr>
</table>

This will be the result of the code above.

Experimenting with Borders
OK, that looks a little more like a table. There are a handful of codes that you can use to adjust your table's appearance. First we'll mess with the border settings. Then we'll pay around with cellspacing and cellpadding to see how you can change the way your table looks.

When you're experimenting with code, it's usually better to go nuts and make a big change so that the effects are easily visible. Then change the code to something more realistic. So let's do that to see how the border, cellspacing and cellpadding codes work. Remove one of the cells and change the border to 20, as noted in the the code below. Then save your page and see how it looks.

<table border=20>
   <tr>
     <td>
        This is my first table!
     </td>
   </tr>
</table>

WOW! A little dramatic, huh? But this shows you what can be done by just changing the border on a simple table from 1 to 20.

Cellpadding
Now we'll move the border back to a more respectable setting, but let's add two more cells and another row. Then add the cellpadding code to see how that setting changes the look of the table. Note that you can use copy/paste (Ctrl/C and Ctrl/V) to add more code. Your finished code should look like this:

<table border=6 cellpadding=10>
  <tr>
    <td>
      This is my first table!
    </td>
    <td>
      This is my first table!
    </td>
    <td>
      This is my first table!
    </td>
  </tr>
  <tr>
    <td>
      This is my first table!
    </td>
    <td>
      This is my first table!
    </td>
    <td>
      This is my first table!
    </td>
  </tr>
</table>

Notice how much space has been added inside each table cell. So now you can understand that cellpadding controls the padding or extra spacing within a cell. If you want the text within a cell to have more spacing away from the cell borders, you'd increase the cellpadding. If you want the cells to look tighter, you'd lower or not use any cellpadding.

Cellspacing
Now we'll do the same with the cellspacing code. Use the same code you used above. Just change it where the code now reads cellpadding to say cellspacing.

Again, we can see that this simple change in the code can make a fairly dramatic change to the look of the table. The borders are closer to the text now, but the borders are also wider, which increases the space between the cells.

Adding Color
As you saw in my first example in this article, I was able to bring some attention to my first two code examples by removing the border from my table and adding a little light color to highlight the information. Let's do that to our two examples above to see how different they'll look. Here are the two sets of code we'll use. We've added a bgcolor (background color) code to both. The only different is that one uses cellspacing and one uses cellpadding.

This image shows the cellspacing table.

And this image shows the cellpadding table.

Diagrams Using Tables
I've used tables to create a lot of sophisticated layouts and diagrams. But recently I create a fairly elaborate table to display our family tree on a personal site. It turned out great and a couple family members asked how I did it. It wasn't very hard, just a little time consuming typing in all the information, highlighting the cells properly and merging the cells. I created a large table and entered all the family member's information into each cell, including full names, birth and death dates, as well as birth and death locations. Then I made the bloodline cells light red to more easily show the connection from my daughter back to her great, great grandmother. The married lines were in light blue. Then I added a title heading for the columns and merged the cells to create columns. OK, yes, I cheated! I used DreamWeaver, a sophisticated web editor, like FrontPage, to make the job of drawing out all the cells, easier. But I've earned that right after years of hand coding!<smile> And the important fact was that I could read the code so when it came time to do a little tweaking, I could fairly easily figure out where to make the necessary adjustments, without having to figure out how to make the same changes in DreamWeaver, using its user interface, which I'm not all that familiar with, yet.

If you have to code a table like a family tree by hand, it would be somewhat time consuming, but it can be done. The code you'd use to merge cells down, would be rowspan. This code would allow you to merge cells down the rows in a table. You'd enter the number of rows the merge should span across, like so: <td rowspan="4"> </td>. This code would merge four cells vertically. If you wanted to merge cells across columns, you'd use the colspan code. This code creates a merged cell that spans across columns merging two cells horizontally: <td colspan="2"> </td>. However, I would suggest that if you have to create elaborate tables that you get a good code editing program.

Another important code you'll want to know how to use is the valign code, which controls the vertical alignment in a cell. The default alignment for a table cell is middle. The image below is a simple sample similar to how I created our family tree table (minus several dozen sibblings). However, when I merged the cells, the generation titles would have moved down into the middle of the merged cells. By adding the valign code to the cell definition, it ensures that the titles appear at the top of each cell. The code for the 6th Generation title cell looks like this:

<td rowspan="8" valign="top" bgcolor="#CCCCCC">