Advanced HTML

Tables

Tables make it possible to format text, data, images, or some combination in such a way as to align them in a sensible manner. An HTML table consists of several container tags: <table>, <tr>, <td>, and <th>.

<table>

This tag is the wrapper that surrounds the other tags that make up the table. The <table> tag is necessary in every table; without it or the ending </table> all the interior tags will be ignored.

<tr>

The Table Row tag, <tr>..</tr>, denotes the beginning of a row of the table. The </tr> tag must be used to end each row. The total number of <tr> tags specifies the number of rows contained within a table.

<td>

The Table Data tag, <td>..</td>, contains the actual data of the table. The <td> tag may only appear within a table row, <tr>, tag. Each data tag is called a cell and it is not necessary to have the same number of cells in each row -- the short rows will be filled with blank cells.

<th>

The Table Header tag, <th>..</th>, acts the same as the <td> tag except that, by default, all data within the cell is aligned to the center and is boldface.

An example of a simple table:

<table>
  <tr>
    <th>Name</th>
    <th>BA</th>
    <th>HR</th>
  </tr>
  <tr>
    <td>Larkin</td>
    <td>.300</td>
    <td>3</td>
  </tr>
  <tr>
    <td>Morris</td>
    <td>.290</td>
    <td>6</td>
  </tr>
</table>

becomes

Name BA HR

Larkin .300 3

Morris .290 6

Name	BA	HR
Larkin	.300	3
Morris	.290	6

As with most other tags, it is possible to change the appearance of a table through the use of attributes. Each table tag has its own attributes with some attributes having the ability to be used in more than one tag. The following is a description of each attribute and the table tags it can be used in.

The border attribute can only be used with the table tag. It controls the size of the border surrounding the table. The size is represented by a pixel value with the default being 0, no border.

<table border="2">
  <tr>
    <th>Name</th>
    <th>BA</th>
    <th>HR</th>
  </tr>
  <tr>
    <td>Larkin</td>
    <td>.300</td>
    <td>3</td>
  </tr>
  <tr>
    <td>Morris</td>
    <td>.290</td>
    <td>6</td>
  </tr>
</table>

becomes

Name BA HR

Larkin .300 3

Morris .290 6

Name	BA	HR
Larkin	.300	3
Morris	.290	6

The cellpadding and cellspacing attributes can only be used with the table tag. They control the space between table elements. The cellpadding attribute controls the amount of space between cell data and the cell wall. The cellspacing attribute controls the space between the cells of a table. The size is represented by a pixel value.

<table border="2" cellpadding="20" cellspacing="5">
  <tr>
    <th>Name</th>
    <th>BA</th>
    <th>HR</th>
  </tr>
  <tr>
    <td>Larkin</td>
    <td>.300</td>
    <td>3</td>
  </tr>
  <tr>
    <td>Morris</td>
    <td>.290</td>
    <td>6</td>
  </tr>
</table>

becomes

Name BA HR

Larkin .300 3

Morris .290 6

Name	BA	HR
Larkin	.300	3
Morris	.290	6

The align attribute can be used on all of the table tags. It controls the alignment of text to the left, center, or right inside a cell, or to align the table on the page. Valid values for this attribute are align="right", align="center", and align="left". When used in a <table> tag, the entire table is affected. If used in the <tr> tag, all cells in that specific row will be aligned accordingly. If used within either the <th> or <td> tag, only that cell will be aligned.

<table border="2">  
  <tr>
    <th>Player Name</th>
    <th>Batting Average</th>
    <th>Home Runs</th>
  </tr>
  <tr align="center">
    <td>Larkin</td>
    <td>.300</td>
    <td align="right">3</td>
  </tr>
  <tr>
    <td align="center">Morris</td>
    <td>.290</td>
    <td>6</td>
  </tr>
</table>

Player Name Batting Avg. Home Runs

Larkin .300 3

Morris .290 6

Player Name	Batting Avg.	Home Runs
Larkin	.300	3
Morris	.290	6

The valign attribute can be used on all of the tags. It controls the vertical alignment of the text within a cell. Valid values for this attribute are valign="top", valign="middle", and valign="bottom". As with align, what cells the attribute affects is based on what tag it is used in. If the attribute is used in the <table> tag, all cells in the table are aligned accordingly. If used in the <tr> tag, all cells in that specific row will be aligned accordingly. If used within either the <th> or <td> tag, only that cell will be aligned.

<table border="2">  
  <tr>
    <th>Player Name</th>
    <th>Batting Average</th>
    <th>Home Runs</th>
  </tr>
  <tr>
    <td>Barry<br>Larkin</td>
    <td valign="top">.300</td>
    <td>3</td>
  </tr>
  <tr>
    <td>Hal<br>Morris</td>
    <td valign="bottom">.290</td>
    <td valign="middle">6</td>
  </tr>
</table>

Player Name Batting Avg. Home Runs

Barry
Larkin .300 3

Hal
Morris .290 6

Player Name	Batting Avg.	Home Runs
Barry Larkin	.300	3
Hal Morris	.290	6

The bgcolor attribute can be applied to all of the table tags. This attribute controls the background color of the cells. The color can be represented by either the actual color name (i.e. "red") or its hexadecimal value (i.e. #FF0000 = red). If the attribute is used in the <table> tag, all cells in the table are colored accordingly. If used in the <tr> tag, all cells in that specific row will be colored accordingly. If used within either the <th> or <td> tag, only that cell will be colored.

<table bgcolor="white" border="2">  
  <tr bgcolor="#FF0000">
    <th>Player Name</th>
    <th>Batting Average</th>
    <th>Home Runs</th>
  </tr>
  <tr>
    <td>Barry<br>Larkin</td>
    <td>.300</td>
    <td bgcolor="#00FF00">3</td>
  </tr>
  <tr>
    <td>Hal<br>Morris</td>
    <td>.290</td>
    <td bgcolor="0000FF">6</td>
  </tr>
</table>

Player Name Batting Avg. Home Runs

Barry
Larkin .300 3

Hal
Morris .290 6

Player Name	Batting Avg.	Home Runs
Barry Larkin	.300	3
Hal Morris	.290	6

The width and height attributes can be applied to the <table>, <td>, and <th> tags. They control the size of the table elements. The sizes are represented as either pixel sizes or as a relative percentage. If the attribute is used in the <table> tag, the width and height control the size of the entire table. A percentage, in this case, is relative to the width and height of the entire web page.

<table border="2" width="35%">  
  <tr>
    <th>Name</th>
    <th>BA</th>
    <th>HR</th>
  </tr>
  <tr>
    <td>Larkin</td>
    <td width="50">.300</td>
    <td>3</td>
  </tr>
  <tr>
    <td>Morris</td>
    <td>.290</td>
    <td height="50">6</td>
  </tr>
</table>

Name BA HR

Larkin .300 3

Morris .290 6

Name	BA	HR
Larkin	.300	3
Morris	.290	6

The colspan and rowspan attributes apply only to the <td> and <th> tags. They control the number of columns and rows (respectively) that a single cell spans. The value represents the number of columns or rows the cell should span. The results are the same whether this attribute is used in either tag.

<table border="2" cellpadding="3">
  <tr>
    <td colspan="4" bgcolor="red">Cincinnati Reds Stats</td>
  </tr>
  <tr>
    <th>Name</th>
    <th>BA</th>
    <th>HR</th>
    <th>RBI</th>
  </tr>
  <tr>
    <td>Larkin</td>
    <td>.300</td>
    <td>3</td>
    <td rowspan="2">40</td>
  </tr>
  <tr>
    <td>Morris</td
    ><td>.290</td>
    <td>6</td>
  </tr>
</table>

becomes

Cincinnati Reds Stats

Name BA HR RBI

Larkin .300 3 40

Morris .290 6

Cincinnati Reds Stats
Name	BA	HR	RBI
Larkin	.300	3	40
Morris	.290	6

Frames

An HTML frame is an advanced formatting technique that allows a web page to be split up into sub-areas that each hold a separate HTML document. Each sub-area, or frame, retains the full functionality of a non-frame HTML document with the added ability to interact with the other frames. Here is an example of a framed page.

Structure of a frame

Every framed HTML page begins with a frame document, that tells the browser exactly how to load each frame and where to place it on the screen. A frame document is exactly the same as a normal web page except that the <body> tag is replaced by the <frameset> tag. Let's examine, line-by-line, the frame document of the example framed page:


<html>
<head>
  <title>Frames Example</title>
</head>
<frameset rows="50%,*" border=1>
  <frameset cols="50%,*">
    <frame src="tile1.html">
    <frame src="tile2.html">
  </frameset>
  <frameset cols="60%,*">
    <frame scrolling="yes" src="tile3.html">
    <frame src="tile4.html" name="four">
  </frameset>
</frameset>
</html>

<frameset rows="50%,*" border="1">

This tag begins by setting the size of the two rows, in this case. By specifying '50%' the first row will be half the size of the screen. The '*' means 'the rest of'; since in this case the first row takes up half the screen, the remainder of the screen is used by the second row. It is possible to specify a pixel value for the size, but since screen size may vary it is often better to give relative values.

<frameset cols="50%,*">

This tag, since it is nested within the other frameset, will split the top row into, in this case, two pieces. This tag is setting the column size to half the screen, therefore both frames will be the same size.

<frame src="tile1.html">
<frame src="tile2.html">

These two frame tags are loading the html pages that will appear in the top two columns. The first instance of the frame tag loads the first HTML file, while the remaining instances load pages into the frames in the order that they are listed.

</frameset>

This ending tag closes the first row. Therefore, at this point, there are two pages loaded in the first row and the second row is blank.

<frameset cols="60%,*">

This frameset tag will now control the second (bottom) row. This time it sets the first column of the second row to 60%; thus the second column will be 40% the size of the screen.

<frame scrolling="yes" src="tile3.html">

This frame tag loads the HTML document 'tile3' into the first column of the second row. The scrolling attribute controls the frame's ability to be scrollable (as well as whether it has a scrollbar). Since the attribute is set to 'yes' this frame is scrollable.

<frame src="tile4.html" name="four">

This tag loads the final HTML document, placing it into the second row, second column. The name attribute gives the frame a name. This is used to load documents into a frame using a link contained within a separate frame. This is accomplished through the use of the target attribute of the <a href ... > tag. For example:

<a href="doc1.html" target="frame2">

This tag will load the HTML document 'doc1' into the frame named 'frame2'. This is how the example was able to change frame #4 to frame #5. Also, in order to load a document full screen instead of inside a frame, use the target value "_top".

<a href="fullscreen.html" target="_top">

Good Web Publishing Techniques

In order to create effective web pages, it is not enough to know how to program in HTML. It is also important to understand what is included in well designed web pages. The design and lay out of a web page is as important as the information it contains. The following is a list of things to consider when designing an effective web page:

Design first - Sit down before you start coding the page and layout what you want the page to look like. The worst thing you can do is 'improvise' your web site.
Have a purpose - Make sure you have a reason for creating each page. It can be as simple as "I want people to know about me." (No, "just because" is not a good reason) Make sure the information on the page follows and complements the purpose.
Choose good backgrounds - Make sure when, or if, you decide to use a background color or image that it does not interfere with either the text or images contained within the page. Also, choose backgrounds that are easy on the eyes: neon yellow text on an orange background is sure to make any visitor to your page run screaming to the optometrist.
No Spelling or Grammatical Errors - Check and double check your page for both. No one will take any of your information seriously if it is riddled with lazy errors.
Put the most important information first - Only about 10% of all web visitors scroll through an entire page. Not many people will wade through an ocean of background or unrelated information to get to the good stuff hidden three pages down.
Don't put too much (or too little) information on a page - If one page is fifteen screens long, it is a good bet that no one will take the time to get to the bottom. Likewise, it is a waste of bandwidth to have one page contain only a couple of sentences. Break up pages by topic, trying to keep them between one and four screens long.
Don't clutter - Make sure to keep everything spaced logically. It makes viewing and understanding the page much easier when the visitor does not have to fight the layout of the page.
Make sure all links work - Make sure when including links to other pages that you have linked to a stable page. Check the links contained within your page often to make sure they still work. There is nothing worse than clicking on a link and being rewarded with a "404 - Page not found" error.
Include a link to your main page - Always include a link to your main (front) page on all your pages. This is especially helpful if your main page contains a site map, the web equivalent of a table of contents.
Avoid long download times - Always keep in mind that most people do not have fast connections to the web; therefore, make sure that all of your images and other data are as small as possible. Most people will lose patience and stop loading a page after more than a minute.
No graphics larceny - Please do not steal original pictures or images from other peoples' web pages for use on your own. Take the time to design your own graphic - it will make your page more individual.
Always use the alt attribute - Not everyone who will visit your site uses a graphical browser. By including the alt attribute within the image tag everyone who visits your site can enjoy and understand it.
Always use the "target=_top" attribute when using frames - If you use frames on any of your pages, always use the 'target=_top' attribute in <a href...> tags to link to outside pages. There is nothing worse than clicking on a link within a framed page that is supposed to go to an outside site and having the page load within that frame (in fact, some people have gotten sued for it).
Last but not least, TEST YOUR PAGE!!! - Before you finalize your page, make sure you test it on many different browsers, at several different screen resolutions, and (if possible) on several different modem speeds.