I know there are those of you on this list who are much more experienced
at web development than I am. To those of you who may be bored by seeing
this message, I apologize. Let me add, that it is recommended that the
line break tag be used after table data to make this work best for lynx
users.
Here is a piece of text I copied from the book "Teach Yourself CGI
Development With Perl In A Week" that talks about lining up forms visually
using tables. This example is from chapter 4. I did not include the HTML
source for the example, because I think the explanation is pretty good. If
you want to get the whole book, Jamal has it at the Empowerment Zone.
http://www.empowermentzone.com/
Thank you, Jamal. Your site is turning me into a perl scripter, right now,
just dangerous enough to break a lot of stuff.
If making your entry form look professional is important to you,
you will want to go through this exercise to learn how to line
up your text-entry fields even if your form does not always have
the same number of columns.
I like the Table attribute because it enables me to build a
well-aligned entry form. The browser helps me by looking at the
number of columns my table has in it and then evenly spacing
those columns across the screen. This is nice, except when I
want the columns to line up and I have a different number of
columns in each row, as shown in Figure 4.6.
I can trick the browser into lining up my columns if I always
give the last column a column span equal to the remaining number
of columns, as shown on lines 17 and 18 of Listing 4.5:
<td colspan=2>
<input type=text size=32 maxlength=40 name="last" > <tr>
and line 31:
<th ALIGN=LEFT colspan=3> Phone Number <tr>
These lines force the ending column to be equal to the remaining
maximum number of columns in a table.
Tables work by the browser making two passes through your table
definition. On the first pass, the browser counts the number of
rows and columns (among other things). On the next pass, it
fills in the rows and columns, aligning them across your screen
based on the largest number of columns in the table. In this
case, the maximum number of columns is 3. So, on the first row
of this table where there are two columns, made up of the First
Name and the Last Name entry fields, I set the column span of
the Last Name column to 2. This makes the browser line up the
second column with column 2 of the other three column rows
instead of trying to center the columns.
Use this formula:
remaining_cols = max_cols - used_cols
Therefore, if you apply the formula to the example in Listing
4.5, it works out as shown here:
max number of colums = 3, max_col
number of columns used = 1, used_cols
number of remaining columns = 2, remaining_cols = max_cols - used_cols
If you apply the formula to the Phone Number row, because no
columns are used in the Phone Number row, colspan=3.
The other field that helps alignment in this example is the
Align=LEFT field in the table header (<th>) or table data (<td>)
fields. You can align left, right, or center on your table,
depending on what looks best.
And, finally, a pure Netscapism: the <center> ... </center>
HTML+ tag that centers the entire table on the page. I'll accept
flames for this, but I like the cool extensions that Netscape
gives me. The browsers that don't support the center aspect just
see the table on the left of the Web page, which is okay.
----------
Get your Daily Dose of soul food from
http://trfn.clpgh.org/~jhomme/
|