Using lists
Lists are a quick way of ordering points within a webpage. There are two types of lists - unordered lists and ordered lists. An unordered list is simply a set of bullet points whereas an ordered list has items in sequence.

<ul> & </ul> This creates an unordered list: Item 1 Item 2 Item 3 <ol> & </ol> This creates an ordered list. Item 1 Item 2 Item 3 <li> & </li> The <li> tags define the start and finish of each list item. <ol type=""> By adding the type="" attribute to the ordered list tag, you can change the default 1, 2, 3... listing sequence. Values are "A" for A, B, C..., "a" for a, b, c..., "I" for I, II, III... or "i" for i, ii, iii....

Using tables
Tables are one of the most common, most powerful ways of formatting an HTML page, yet are very simple to understand. They are probably most powerful when you consider the size of the screen, or more importantly, the size of your screen and the fact that is not the same size as other people's screens. In fact, designing a webpage that works in a variety of different screen sizes has always been something of a headache to professional web designers.

Because the width of a table can be expressed as a percentage of the width of the screen, this greatly helps the problem. Elements of a table can be close together on a small screen or equally spaced further apart on a larger screen. Let's take a look at the table tag.

<table> & </table> These are the opening and closing table tags. width="" & height="" You can either set the width of a table to a specific size, or as mentioned, to a percentage of the screen width. The same applies to the height, though this is usually omitted. border="" Defines the width of the border both around the edge of the table and between each cell. Although this is usually kept at 0, it can be very useful to set this to 1 while you are designing the page as it makes it easier to spot mistakes and see exactly where the table's cells are residing on the page. cellspacing="" & cellpadding="" The cellspacing attribute defines the spacing between the edge of one cell and the edge of the next cell. Cellpadding defines the spacing between the edge of a cell and the contents inside the cell. align="" Defines whether the table should be left, centre, or right aligned. bgcolor="" Allows you to specify a background colour that will apply to the whole table. background="" You can enter an image filename here that will become the background image for the table.

Within the table, you have rows and columns:

<tr> & </tr> The <tr> tags create a row within the table. align="" & valign="" These attributes set the alignment and vertical alignment for all cells in the row. They can be overridden in individual cells as shown below. bgcolor="" The bgcolor attribute sets the background colour for the entire row of the table. <td> & </td> The <td> tags create a data cell within a row of the table. width="" & height="" These set the width and height for an individual cell. If you use a percentage here, the percentage is a factor of the size of the entire table, not the screen size. align="" & valign="" These attributes set the alignment and vertical alignment for individual cells in the row. colspan="" & rowspan="" The colspan attribute is used to merge cells horizontally. Similarly, rowspan merges cells vertically. bgcolor="" The bgcolor attribute sets the background colour for the current cell.

Example:

Cell 1	Cell 2	Cell 3
Cell 4		Cell 5
Cell 6	Cell 7

The HTML code:

<table width="300" border="1" cellspacing="5" cellpadding="10" align="center">
<tr bgcolor="#FF7777">
<td width="100" height="100" align="left" valign="top">Cell 1</td>
<td width="100" height="100" align="center" valign="center" bgcolor="#7777FF">Cell 2</td>
<td width="100" height="100" align="right" valign="bottom">Cell 3</td>
</tr>
<tr bgcolor="#77FF77">
<td height="100" colspan="2" align="center" valign="center">Cell 4</td>
<td width="100" rowspan="2" align="center" valign="center">Cell 5</td>
</tr>
<tr>
<td width="100" height="100" align="center" valign="center">Cell 6</td>
<td width="100" height="100" align="center" valign="center">Cell 7</td>
</tr>
</table>

If we look at the table attributes we see that the overall size is restricted to 300 pixels, it has a one pixel border, a 5 pixel space between the cells and a 10 pixel space inside the cells. Note that the spacings are around each cell, so a 5 pixel space results in a 10 pixel gap. You'll notice the "Cell X" writing starts about twice the distance inside the cells than the spacing, which tallies with the cellpadding="10" value we asked for.

Moving on to row 1, we have set the background colour to a light red (FF7777) and then Cell 2's background colour to a light blue, overriding the row colour. On row 2, we have a colspan="2" to span the first 2 cells and a rowspan="2" spanning the 2 lower right cells. As demonstrated by the colouring, we can see that when cells are spanned, they "belong" to the first cell - that is, Cell 5 belongs to row 2, not row 3, therefore there are only 2 <td> tags in row 3.

Create a page

The screen shot below is of the page we want to create, and beneath that is the HTML code required to do so. Copy this into Notepad, making any alterations you wish and try it out for yourself. To view your page save the file somewhere on your desktop as "index.htm" and then view it on your browser by double clicking on your newly created html file.

The HTML

<html> <head> <title>My Home Page</title> </head> <body background="background.gif" bgproperties="fixed"> <p align="center"><font size="5" color="#3333FF"><b><u>My Website</u></b></font></p> <hr> <p><font color="#000000" face="Arial, Helvetica, sans-serif" size="3">Hello,</p> <p>Welcome to my website. I hope you like it.</p> <table width="50%" border="0" cellspacing="0" cellpadding="5" align="center"> <tr> <td width="25%">A sentance or two for the left column. A sentance or two for the left column.</td> <td width="50%" align="center">View the image below</td> <td width="25%">A sentance or two for the right column. A sentance or two for the right column.</td> </tr> <tr> <td colspan="3" align="center"><img src="fnn_linkbanner.gif"></td> </tr> </table> <p align="right"><font color="#000000" face="Arial, Helvetica, sans-serif" size="7"><i>Rob</i></font></p> </body> </html>

You are here: Home-USEFUL INFO-Webmaster-HTML-Advanced

Previous Topic: Hyperlinks Next Topic: CGI Access