Interactive Media Center
University Library, University at Albany

About HTML/XHTML
Technique
Tools
Web vs. Print

Getting Started
Setting Up the Basic Code
Adding and Formatting Text
Nesting Tags
Advanced Text Formatting
Color and the Web
Headings
Lists
Links
Layout and Tables
Advanced Table Formatting
Images
Putting It All Together
Adding An Image
Adding A Simple Table
Main Body Information
Finishing Touches
If You Continue On...

Layout and Tables

The layout of a Web page is important. Placing components, such as text, images, and headings is critical to not only the appearance of a page, but also how well the visitor understands the information presented. A poor layout will look bad, and it will also make the information on the page hard to find and understand.

For information on how to lay out a Web page, visit out our Interactive Media Center Web Design online tutorial.

Web pages "want" to be displayed with all components aligned vertically on the left side of the page. Center and align right attributes can be applied to many objects. Bet even these alignments do not allow for careful and specific placement of page components.

To see a Web page with no layout formatting of any kind, click here.

Using attributes to align object left, center, or right can help establish the position of objects on a Web page. An example is here. We will be learning about position attributes and the center tag in detail later in this tutorial.

Tables are the solution to the problems that caused by the default left alignment of standard HTML and XHTML code. Originally intended to present data in "tabular" form, that is columns and rows, tables quickly became the Web page designer's "best friend" by allowing accurate placement objects on a page.

Here is an example of a Web page that uses a table to control placement of objects. The table is invisible.

To see the same page with the table visible, click here. The table's borders are easily seen and you will be able to observe how it is used to position objects on the page.

The table tag is a container tag with three main parts. Tables consist of rows and cells, and there are tags for each. Tables must have all the tags written in the proper order for them to work. The tags are:

Below is an example of a simple table.

     
     
     

This table has three rows and three columns. To begin building the table we will start with the opening and closing table tags.

<table></table>

To make it easier to add the rest of the tags we will put the opening and closing table tags on two lines.

<table>
</table>

Now we add the first table row tags.

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

The row is not complete until the three table cells are added.

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

Now the table is built like this:

     

If you are using Notepad, it is a simple "cut and paste job" to install the other two rows.

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

Now the table has this structure:

     
     
     

To see what the table looks like in a browser, click here. You may be surprised at what you see or do not see!

Where is the table? The table is really there. But we did not apply any attributes to the table, so although it exists, it is invisible. To make the table appear an the screen, we must define how it will look. The first step will be to add borders. Type in 'border="1"' into the opening table tag as shown below. This creates table borders 1 pixel thick.

<table border="1">
<tr><td></td<td></td><td></td></tr>
<tr><td></td<td></td><td></td></tr>
<tr><td></td<td></td><td></td></tr>
</table>

Now you can view the table by clicking here. As you can see, the table is now visible. But it looks very small because we have not applied any size attributes.

In addition, there is a curious feature of HTML and XHTML that will cause the table to look odd. Unless there is an object of some kind in a table cell, most browsers will not display the cell or the border around it. This can cause some peculiar effects. Some browsers will not show the cell, others will. In the table below there is an object in all cells except the center one. Depending on the browser you are using, you may or may not see the center cell correctly.

Text Object   Orangutang
   
Text Object   Parrot

NOTE: Do you see a center cell, or do you see a "pillow-like" effect? Try viewing this page with another browser. What do you see then?

Objects in cell can be text, images, or even other tables. These are called "nested tables." Objects can also be special pieces of code. The most commonly used one for this purpose is the "nonbreaking space."

The nonbreaking space is a true object that is invisible. It is used to create additional spacing in lines of text and as invisible objects in table cells so that the cells are visible in all browsers. The nonbreaking space is installed by typing a simple ASCII code into the table cell.

Note: ASCII codes are numerical representations of characters that are found on a keyboard and other characters for which there are no keys. In computers and the Web they are used to cause a character to display on the screen when either there is no key or it is not desirable to use the actual keystroke character. Sometimes ASCII codes are used to hide email addresses from Web robots that collect the addresses for spamming. Details and a list of ASCII codes can be found at www.asciitable.com.

The ASCII code for a non breaking space is  . By placing a nonbreaking space in the center table cell, it will appear correctly on the Web page as shown below.

Text Object   Orangutang
     
Text Object   Parrot

As with the previous example, this will depend on your browser. In some instances you may not see any change at all because the cell was always properly displayed. Using objects such as the nonbreaking space assures that you tables will always appear on the page as you intend.

We can add nonbreaking spaces to the table on which we have been working so that the code looks like this:

<table border="1">
<tr><td>&nbsp;</td<td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td<td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td<td>&nbsp;</td><td>&nbsp;</td></tr>
</table>

You can see the table as it appears live on the Web by clicking here. The table looks small, but at least we can see it!

To cause the table to be displayed larger we will give it a width attribute of 300 pixels. The example below shows how to do this.

<table width="300"border="1">
<tr><td>&nbsp</td<td>&nbsp</td><td>&nbsp</td></tr>
<tr><td>&nbsp</td<td>&nbsp</td><td>&nbsp</td></tr>
<tr><td>&nbsp</td<td>&nbsp</td><td>&nbsp</td></tr>
</table>

The "300" refers to the width of the table in pixels. Unless specified otherwise, the default measurements are always in pixels. Now you can see what the page should look like here.