TABLES

Okay, now you can really build web pages. Youve got text, color, images and links. But your sites probably arent organized exactly the way you want them. To design professional looking pages, youll need to organize your information in tables. Tables are basically boxes that can contain text, colors, and graphics.

Most often you cant see the tables themselves; you can only see their contents.

The below example is a simple web page built with tables:

 
Notice that you dont see the table, only the information contained within.

The below example is the same web page with the table borders visible:

Sizing HTML Tables (pixel vs. percent)

You can control the size of the table itself and the cells within it. You can instruct a table to take up an exact pixel width (remember that a pixel is a dot), or you can direct the table or cell to occupy a certain percentage of the viewable screen size or available area.

Percentage-Based Tables

If built to take 100% of the screen, a percentage-based table will resize itself to occupy 100% of the screen, no matter how large or small the screen becomes. Many designers feel that it is important to occupy all of the screen size, or "real estate", presented to them. Accordingly, they base their tables on percentage width, which is usually set at 100%. When a table is built using percentage based widths, images and text will rearrange themselves accordingly, but will not change size. Because text will seamlessly rearrange itself, a site that is heavily text based is easily manipulated using percentage based tables.

Pixel-Based Tables

Table sizes can also be exactly set. For example, if a table is set at a width of 200 pixels, that table will remain 200 pixels no matter how many pixels the viewers monitor is displaying. If the user has their monitor set to display 800 pixels across and 600 pixels down, a 200-pixel table will occupy one-fourth of the screen. The same exact table on a monitor with the viewable screen size set to 600x460 pixels would occupy one-third of the screen. Designers use pixel based tables to preserve the relationship of objects to one another. If it is very important that a column stays a certain width for design reasons, a pixel-based width will be used.

Using Pixel and Percentage-Based Widths Together

Most people agree that a website that occupies the whole screen is more visually pleasing. But most websites contain elements, like navigation columns, that should remain a fixed width to preserve their design. What is a web designer to do?

The answer is to use both pixel and percentage based measurements on different columns. For example, the following table is set to occupy 100% of the viewable screen size. However, the widths for the indvidual cells can be fixed, and in this case pixel based widths were used on the end cells. The middle cell does not have a stipulated width, and will resize if needed so that the table can meet its obligation to occupy 100% of the screen.

<-100 pixels->

<-No set width->

<-100 pixels->

Using this fancy trick, web designers can have the best of both worlds.

Some Rules to Keep in Mind:

Column Width

Knowing this rule will save you untold hours of pitiful sobbing at your computer. In HTML, columns are the same width all the way down. That means that you will not have a table that looks like this:

There are fancy ways to make a table that looks like the one above, but for right now, burn it in your mind: If  a cell has a width, in either percentage or pixels, the cell directly beneath and above MUST be the same width. You dont have to stipulate the widths for the other cells, theyll resize all on their own. If you break this rule, your tables will Well, theyll really freak out.

Cell Height

Usually youll set cell width, and let the elements or text in the cell determine the height. Remember that if a cell resizes, elements will realign but will not resize. If a cell containing text in a percentage based table resizes itself, the text will re-align and will need to take up more or less height. Setting a height can cause serious problems if text or images dont have enough room to correctly display. For this reason, dont set a cell or table height unless you really need to, for example to stretch your table past the bottom of the screen if your website is small.

Standard Screen Size

The average Internet user is viewing pages on a 15" monitor, set at 800x600 pixels. The viewable screen area on the Internet Explorer and Netscape (not including borders) is 760x420. A website that requires side scrolling is considered very un-professional. Therefore, if you are building a pixel based website its not a good idea to make it larger than 760 pixels wide.

 

Table Elements

There are basic elements to all tables that translate directly into tags.

Lets go over the main tags we will use to build tables. Dont bother trying to build a table yet, I just want you to see the necessary tags and become familiar with them.

First, you have the table itself. To let HTML know youre starting a table, you must use the table tag:

          <TABLE>

Tables also have rows. Whenever you start a new row in a table you must use the table row tag:

          <TR>

Tables contain boxes, usually called cells. HTML, harboring a secret desire to be rebellious, decided not to call these individual boxes cells, but instead "Table Data Areas":

<TD>

You must use a <TD> whenever beginning a new Table Data Area (cell)

Each of these tags has a closing tag </TABLE>, </TR>, <TD>

Notice that we didnt name columns as a table attribute. This makes sense when you realize that if a row has three <TD>s, or cells, that it also has three columns. HTML is attempting to avoid redundancy.

Lets Make a Table!

1.      Make a new HTML page. Make sure you include all the basic elements, like <HTML> <HEAD> and <BODY>

2.      Type the following code:
<TABLE>     
<TR>
<TD> First Cell </TD>
<TD> Second Cell </TD>
</TR>
</TABLE>

3.      Save your file as "table.htm" Remember to add the ".htm"

4.      View your page in the Internet Explorer (File-> Open-> Browse)
Dont be freaked out if you dont see what you thought youd see.

Remember that tables have a border. We didnt insert the border tag yet. The border tag is a modifier of the <TABLE> tag

1. Modify your code to read:
   <TABLE BORDER="1">     
   <TR>
   <TD> First Cell </TD>
   <TD> Second Cell </TD>
   </TR>
   </TABLE>
2. Check out the table!

You can see the table now, but it only takes up as much room as it needs. We need to add width modifiers. Width modifiers can apply to either the <TABLE> or the <TD> tag. In this case well want to apply a WIDTH modifier to both the <TABLE> and one of the <TD>s

3. Modify your code to read:
   <TABLE BORDER="1" WIDTH="50%">     
   <TR>
   <TD WIDTH="50%"> First Cell </TD>
   <TD> Second Cell </TD>
   </TR>
   </TABLE>
4. Check out your table with the Internet explorer. It should look like:

If your table doesnt look right go back and check your code. Did you close all of your tags?

Well learn more about tables in the next section!

| Back to Courseware | back to web design course home