Playing with Web Design

Working with Tables

Working with Tables

If you've been looking at other people's HTML coding (and there's no better way to learn how to create web pages than to examine existing HTML code!) you have probably notice that most web designers make heavy use of the table tag. It is a fairly safe bet that 90% or more of your visitors are using a browser that can properly handle tables. There are some minor differences, but for the most part, an HTML page that uses tables will be seen properly by most of your visitors.

Twenty years ago when The Tangled Web was created, tables were used for layout far more than any other layout technique. When I wrote this tutorial back in 1998, I had no idea what CSS was, let alone how to use it properly.

Take a look at the HTML codes for a simple table:

<table>
      <tr>
          <td>This is row one, cell one.</td>
          <td>This is row one, cell two.</td>
        </tr>
      <tr>
          <td>This is row two, cell one.</td>
          <td>This is row two, cell two.</td>
      </tr>
    </table>
    

The HTML above produce this table:

Most browsers will display the table above without any border, making it look like four separate lines of text. Once you're comfortable with HTML, look at the CSS tutorial for formatting tables, to see how to add borders to your tables.

I read in someone else's table tutorial that you can treat the cells in a table as though they were HTML pages within your larger page, and that is true.

The idea is that anything you can place within the rest of your web page can be placed within a table. That includes paragraph tags, image tags and even other tables! You need to be a little bit careful with complexity though, because some web browsers will render the entire table before showing any text.

One way to speed things up is to create several smaller tables one after the other instead of a single big table. That way as each table is rendered, it will become visible and give readers something to look at while the rest of the page is rendered.