TABLE 10.3 Continued Used to set alignment of all cells in a column.. If border has a value, it’s the width of the shaded border around the table.. Can be used with any of the table ele
Trang 1TABLE 10.3 Continued
<col> Used to set alignment of all cells in
a column Possible values are left , center , and right
<colgroup> Used to set alignment of all cells in
a column group Possible values are left , center , and right
<table> Deprecated in HTML 4.01 Possible
values are left , center , and right align=“center” isn’t sup-ported in HTML 3.2 and older browsers Determines the alignment
of the table and indicates that text following the table will be wrapped alongside it.
<caption> Deprecated in HTML 4.01 Indicates
which side of the table the caption will be placed The possible values for most browsers are top and bot-tom HTML 4.01 browsers also sup-port left and right In Internet Explorer, the possible values are left , right , and center , and they indicate the horizontal alignment of the caption.
4.01.) Changes the background color of that table element Cell col-ors override row colcol-ors, which over-ride table colors The value can be
a hexadecimal color number or a color name.
border <table> Indicates whether the table will be
drawn with a border The default is
no border If border has a value, it’s the width of the shaded border around the table.
bordercolor <table> (Internet Explorer extension.) Can be
used with any of the table elements
to change the color of the border around that elements The value can be a hexadecimal color number
or a color name.
306 LESSON 10: Building Tables
Trang 2TABLE 10.3 Continued
bordercolorlight <table> (Internet Explorer extension.) Same
as bordercolor , except it affects only the light component of a 3D-look border.
bordercolordark <table> (Internet Explorer extension.) Same
as bordercolor , except it affects only the dark component of a 3D-look border.
cellspacing <table> Defines the amount of space
between the cells in the table.
cellpadding <table> Defines the amount of space
between the edges of the cell and its contents.
an axis to align the contents of a cell (for example, a decimal point in numeric values) Can be applied to colgroup , col , tbody , thead , tfoot , tr , td , and th elements.
applied to the first occurrence of the alignment character specified by the char attribute Applies to the same elements previously listed in char
that surrounds a table are visible.
Possible values are void , above , below , hsides , lhs , rhs , vsides , box , and border
height <th> or <td> Deprecated in HTML 4.01 Indicates
the height of the cell in pixel or per-centage values.
nowrap <th> or <td> Deprecated in HTML 4.01 Prevents
the browser from wrapping the con-tents of the cell.
10
Trang 3TABLE 10.3 Continued
span <colgroup> Defines the number of columns in a
column group Must be an integer greater than 0.
<col> Defines the number of columns that
a cell spans Must be an integer greater than 0.
width <colgroup> Defines the width of all cells in a
column group.
<col> Defines the width of all cells in one
column.
colspan <th> or <td> Indicates the number of cells to the
right of this one that this cell will span.
rowspan <th> or <td> Indicates the number of cells below
this one that this cell will span.
the cells within that row (overriding the defaults) Possible values are top , middle , and bottom
<th> or <td> Overrides both the row’s vertical
alignment and the default cell align-ment Possible values are top , mid-dle , bottom , and baseline
<thead> , <tfoot> , <tbody> Defines vertical alignment of cells in
the table head, table foot, or table body.
<colgroup> Defines the vertical alignment of all
cells in a column group.
<col> Defines the vertical alignment of all
cells in a single column.
width <th> or <td> Deprecated in HTML 4.01 Indicates
width of the cell in exact pixel val-ues or as a percentage of table width (for example, 50%).
308 LESSON 10: Building Tables
Trang 4Workshop
This lesson covered one of the more complex subjects in HTML: tables Before you
move on to the next lesson, you should work through the following questions and
exer-cises to make sure that you’ve got a good grasp of how tables work
Q&A
Q Tables are a real hassle to lay out, especially when you get into row and
col-umn spans That last example was awful.
A You’re right Tables are a tremendous pain to lay out by hand like this However, if
you’re using writing editors and tools to generate HTML code, having the table
defined like this makes more sense because you can just write out each row in turn
programmatically
Q Can you nest tables, putting a table inside a single table cell?
A Sure! As I mentioned earlier, you can put any HTML code you want inside a table
cell, and that includes other tables
Q Is there a way to specify a beveled border like the default table borders using
CSS?
A CSS actually provides three different beveled border styles: inset,outset, and
ridge You should experiment with them and use the one that looks the best to
you
Quiz
1 What are the basic parts of a table, and which tags identify them?
2 Which attribute is the most common attribute of the table tag, and what does it do?
3 What attributes define the amount of space between the edges of the cells and their
content, and the amount of space between cells?
4 Which attributes are used to create cells that span more than one column or row?
5 Which elements are used to define the head, body, and foot of a table?
10
Trang 5Quiz Answers
1 The basic parts of a table (the <table>tag) are the border (defined with the border
attribute), caption (defined with the <caption>tag), header cells (<th>), data cells
(<td>), and table rows (<tr>)
2 Theborderattribute is the most common attribute for the table tag It specifies
whether border lines are displayed around the table and how wide the borders
should be
3 cellpaddingdefines the amount of space between the edges of the cell and their
contents.cellspacingdefines the amount of space between the cells
4 Therowspanattribute creates a cell that spans multiple rows The colspanattribute
creates a cell that spans multiple columns
5 <thead>,<tbody>, and <tfoot>define the head, body, and foot of a table
Exercises
1 Here’s a brainteaser for you: Create a simple nested table (a table within a table)
that contains three rows and four columns Inside the cell that appears at the
sec-ond column in the secsec-ond row, create a secsec-ond table that contains two rows and
two columns
2 One tricky aspect of working with the HTML for tables is accounting for cells with
no data Create a table that includes empty cells and verify that when you’ve done
so, all the rows and columns line up as you originally anticipated
310 LESSON 10: Building Tables
Trang 6Designing Forms
Up to this point, you’ve learned almost everything you need to know to
create functional, attractive, and somewhat interactive web pages If you
think about it, however, the pages you’ve created thus far have a one-way
information flow This lesson is about creating HTML forms to collect
information from people visiting your website Forms enable you to gather
just about any kind of information for immediate processing by a
server-side script or for later analysis using other applications
This lesson covers the following topics, which enable you to create any
type of form possible with HTML:
n Discovering how HTML forms interact with server-side scripts to
provide interactivity
n Creating simple forms to get the hang of it
n Learning all the types of form controls you can use to create radio
buttons, check boxes, and more
n Using more advanced form controls to amaze your friends and
co-workers
n Planning forms so that your data matches any server-side scripts
you use
Trang 7▼
Understanding Form and Function
Right off the bat, you need to understand a few things about forms First, a form is part
of a web page that you create using HTML elements Each form contains a formelement
that contains special controls, such as buttons, text fields, check boxes, Submit buttons,
and menus These controls make up the user interface for the form (that is, the pieces of
the form users see on the web page) When people fill out forms, they’re interacting with
these elements In addition, you can use many other HTML elements within forms to
create labels, provide additional information, add structure, and so on These elements
aren’t part of the form itself, but they can enhance your form’s look and improve its
usability
When someone fills out an HTML form, he enters information or makes choices using
the form controls When the user submits the form, the browser collects all the data from
the form and sends it to the URL specified as the form’s action It’s up to the program
residing at that URL to process the form input and create a response for the user
It’s important that you understand the implications of this final step The data is what
you want, after all! This is the reason you’ve chosen to create a form in the first place
When a user clicks the Submit button, the process ceases to be one of pure HTML and
becomes reliant on applications that reside on the web server In other words, for your
form to work, you must already have a program on the server that will store or
manipu-late the data in some manner
In some cases, forms aren’t necessarily submitted to programs Using JavaScript, you can
take action based on form input For example, you can open a new window when a user
clicks a form button You can also submit forms via email, which is okay for testing but
isn’t reliable enough for real applications
Task: Exercise 11.1: Creating a Simple Form That Accepts a
Name and a Password
Okay, let’s get right to it and create a simple form that illustrates the concepts just
pre-sented It’s a web page that prompts the user to enter a name and a password to continue
Start by opening your favorite HTML editor and creating a web page template Enter the
standard HTML header information, include the bodyelement, and then close the body
andhtmlelements to form a template from which to work If you already have a
tem-plate similar to this, just load it into your HTML editor:
<!DOCTYPE html>=
<html>
312 LESSON 10: Designing Forms
Trang 8<head>
<title>Page Title</title>
</head>
<body>
</body>
</html>
Next, add your titleso that people will understand the purpose of the web page:
<title>Please Log In</title>
Within the bodyof the web page, add a formelement I’ve added both the opening and
closing tags, with an empty line between them, so that I don’t forget to close the form
when I’m finished:
<form action=“/form-processing-script” method=“post”>
</form>
Before continuing, you need to know more about the formelement and the attributes you
see within the opening tag Obviously, formbegins the element and indicates that you’re
creating an HTML form The actionattribute specifies the URL to the server-side script
(including the filename) that will process the form when it’s submitted It’s important
that the script with the name you’ve entered is present on your web server at the location
the URL specifies In this example, I use the full URL for the script, but you can just as
easily use a relative URL if it makes more sense
11
Before going live with forms, contact your web hosting provider and ask whether you can use the hosting provider’s scripts or add your own You must also determine the URL that points to the directory on the server that contains the scripts Some hosting providers rigidly control scripts for security purposes and won’t allow you to create or add scripts to the server If that’s the case, and you really need to implement forms on your web pages, consider searching for a new hosting provider.
CAUTION
Trang 9used in searches I chose the postmethod here because I don’t want to send the user’s
password back in plain sight as part of the URL Now add some form controls and
infor-mation to make it easy for a visitor to understand how to fill out the form Within the
formelement, begin by adding a helpful description of the data to be entered by the user,
and then add a textform control This prompts the user to enter her name in a text-entry
field Don’t worry about positioning just yet because you’ll put all the form controls into
a table later:
<form action=“/form-processing-script” method=
post>
<label for=”username”>Username</label> <input type=“text” name=“username” />
</form>
Next, add another bit of helpful text and a password control:
<form action=“/form-processing-script” method=“post”>
<label for=”username”>Username</label> <input type=“text” name=“username” />
<label for=”password”>Password</label> <input type=“password” name=“password”
/>
</form>
Notice that both these form controls are created using the inputelement The type
attribute defines which type of control will be created In this case, you have a text
con-trol and a password concon-trol Each type of concon-trol has a distinct appearance, accepts a
dif-ferent type of user input, and is suitable for difdif-ferent purposes Each control is also
assigned a name that distinguishes it and its data from the other form controls
The labels for the form fields are specified using the <label>tag Each label is attached
to the form field it is associated with through the forattribute, which should match the
nameoridattribute of the form tag with which it is associated The <label>element
doesn’t provide any formatting by default, but you can make it appear however you want
using CSS
Finally, add a Submit button so that the user can send the information she entered into
the form Here’s the form so far:
Input▼
<form action=”/form-processing-script “ method=”post”>
<div>
<label for=”username”>Username</label>
<input type=”text” name=”username” />
</div>
314 LESSON 10: Designing Forms
Trang 10<div>
<label for=”password”>Password</label>
<input type=”password” name=”password” />
</div>
<div>
<input type=”submit” class=”submit” value=”Log In” />
</div>
</form>
The Submit button is another type of inputfield The valueattribute is used as the label
for the Submit button If you leave it out, the default label will be displayed by the
browser
11
When you’re naming form controls and labeling buttons, strive for clarity and meaning If a form is frustrating or hard to figure out, visitors will leave your site for greener pastures!
Figure 11.1 contains a screenshot of the form with all the form elements in place
TIP
Output
FIGURE 11.1
The form with all
the input elements
in place.
At this point, you’ve created the form and it’s ready to rumble However, if you load it
into your web browser, you’ll see that it doesn’t look all that appealing I can vastly
improve the appearance using Cascading Style Sheets (CSS) Here’s the code for the full