Creating Web Pages

By Bob Pajot

This installment of the HTML tutorial will involve placement of text and images on the web page.

When using a word processor, if you want to put a little extra space between two words you simply hit the spacebar a few times. You are probably aware that this can cause problems if you are using a proportional font and you want to line words up one below the other. In that case it is much easier to set tabs and tab over so your text will be lined up perfectly.

Text placement on a web page is handled much differently. HTML strips multiple spaces out of your document, so even if you add 10 spaces between two words it will appear as a single space on the web page. To make matters worse, the use of tabs are not allowed either. So, how do you place your text and pictures where you what them?

You can easily place text to the right or left of the page with the <p align="right"> text_or_picture_here </p> command. However this won't work if you want to put various things on the same line. You can add spaces between text or images by using special characters like "&#160;" or "nbsp;" (HTML translates these as a space) but that is very tedious and you never know how many to put so things will line up.

This is where TABLES come in!

Tables are one of the most useful elements in HTML. Tables can be used to control the layout of your page for purposes of formatting and layout of text and images, and is especially useful in creating aligned columns of text, images and data. For instance, you can use a table to insert an image on the left hand side of your page, and have your text beside that image on the right hand side. You can also use tables to force your page to display the same on different browsers and even on different display resolutions.

Creating a table must begin with the <TABLE> element and end with the </TABLE> element. Within the table you can define <TH> (Table Headers) on either the rows or columns. These headers will be rendered as bold text. Also defined are <TR> (Table Rows), which are rows of data in your table. Finally, <TD> (Table Data) are standard table data cells containing your text or images to appear in the table. Table Data Cells must reside in Table Rows. You may also use the element which gives the table a caption or heading which can be aligned to the top or bottom of the table. When creating Tables, your HTML document will contain something resembling the following HTML code.

<TABLE BORDER=1>
<CAPTION ALIGN=Top><b>Sample Table</b></CAPTION>
<TR>
<TH>Table Header 1</TH>
<TH>Table Header 2</TH>
<TH>Table Header 3</TH>
<TR>
<TD>Table Row 1 Table Data 1</TD>
<TD>Table Row 1 Table Data 2</TD>
<TD>Table Row 1 Table Data 3</TD>
<TR>
<TD>Table Row 2 Table Data 1</TD>
<TD>Table Row 2 Table Data 2</TD>
<TD>Table Row 2 Table Data 3</TD>
</TABLE>