R. Craig Collins >
Web Page Design >
Instructor Notes: Tutorial 4
R. Craig Collins >
Web Page Design >
Instructor Notes: Tutorial 4
Instructor Notes: Tutorial 4 © R. Craig Collins, 2005/6
As I have separate 'lecture' material on most of these topics, I will try to avoid duplicating information; but I still want to comment on some of the content :)
Session 1
There are several ways to organize information, such as lists. (Lists were covered
in Tutorial 1 of the book, and as a refresher, at the bottom
of this page.
<pre></pre> was covered in my Tutorial 3 notes, but they show how you could use it to organize information into rows and columns. However, the typewriter text is hard on the eyes, and you have limited format options.
When the book starts discussing tables, they seem to think you can just type out a series of <tr> and <td> tags, and then go back to put your content in. I prefer to build a 1x1 table, with something in between the <td></td> tag, then copy the <td>...</td> tags until my columns are set, then copy the <tr>...<tr> tags until my rows are set. Then I can easily replace the contents of the details. (See my Tables page.)
The book also introduces the <th></th> and so on, which I prefer to avoid, though I do cover them in lab 6, and in Advanced Tables.
Remember, the default border for a table is 0, but you can increase it; old html limited this to 6 pixels wide, but newer browsers can make huge borders, and color the borders using bordercolor=, or bordercolorlight=.
The book also discussed making partial borders, or grids, using the rule= and frame= attributes. Be careful not to confuse this attribute with the framed pages, which we will discuss in the next tutorial.
Most of the other elements discussed here are covered in Advanced Tables
Session 3
A very important concept is to set table widths using percentages, so the page
looks the same regardless of the size monitor your user has... the book refers
to this as fluid layout, but I almost never use width= with a pixel value, unless
the table is very small... the rest of the time I use width= with percentages,
as in
<table width="90%">...</table>
The next section of the book is the challenges of using tables, followed by nesting tables in side of tables... as covered at the bottom of my Tables page.