HTML: Tables and Forms

Objectives
• Use tables to structure a webpage
• Use forms to collect user input
– Method:Get, Post
– Input
– Select
– Textarea
 In Class
• Keep 2 browser windows open.
• Try examples as we go along.
• Save notepad as html to desktop.
• (Double) click to see.
 Tables
• To structure the page

• To arrange the elements on a page

• Contain rows of data cells

 Defining a Table Structure
• The first step to creating a table is to
specify the table structure:
– the number of rows and columns
– the location of column headings
– the placement of a table caption
• Once the table structure is in place, you
can start entering data into the table
 <table>,
<tr>, and <td> Tags
• Graphical tables are enclosed within a
two-sided <table> tag that identifies the
start and ending of the table structure
• Each row of the table is indicated using a
two-sided <tr> (for table row)
• Within each table row, a two-sided <td>
(for table data) tag indicates the presence
of individual table cells
 Simple Table
<table>
<tr>
<td> First Cell </td>
<td> Second Cell </td>
</tr>
<tr>
<td> Third Cell </td>
<td> Fourth Cell </td>
</tr>
</table>
– This creates a table with two rows and two columns
 Simple Table
• Two rows and two columns

two rows
 Headings
• HTML provides the <th> tag for table
headings
• Text formatted with the <th> tag is
centered within the cell and displayed in a
boldface font
• The <th> tag is most often used for
column headings, but you can use it for
any cell that you want to contain centered
boldfaced text
 Table Caption
• The syntax for creating a caption is: <caption
align=“alignment”>caption
text</caption>
– alignment indicates the caption placement
– a value of “bottom” centers the caption below
the table
– a value of “top” or “center” (newer) centers the
caption above the table
– a value of “left” or “right” (newer) place the
caption above the table to the left or right
 Table
• <table>...</table> enclose a table

– <tr>...</tr> enclose a table row.

• <td>...</td> enclose a table data or cell.
• <th>...</th> enclose a table header. It’s a
cell whose default is bold and centered.
– <caption> ... </caption> enclose a caption
 Cell spacing
• The cellspacing attribute controls the
amount of space inserted between table
cells
• <table cellspacing=“value”> …
</table>
– value is the width of the interior borders in
pixels
– the default cell spacing is 2 pixels
Cell spacing
 Cell Padding
• The cellpadding attribute controls
the space within the cells
• <table cellpadding=“value”> …
</table>
– value is the distance from the table text
to the cell border, as measured in pixels
– the default cell padding value is 1 pixel
Cell Padding
 Background Color
• You may specify a background color for all
of the cells in a table, all of the cells in a
row, or for individual cells:
<table bgcolor=“color”>
<tr bgcolor=“color”>
<td bgcolor=“color”>
<th bgcolor=“color”>
– color is either a color name or hexadecimal
color value (to be discussed)
 Attributes
• width – width of table in pixels or % of the
browser window
• height – height of the table in pixels or %
of the browser window
• cellpadding –the space between the cell
border and the contents in pixels
• cellspacing – specifies the space between
cells in pixels
 Attributes
• align – left, center, right
• bgcolor – Background color of table
• border –
– The width is in pixels.
– The default is zero, or no border.
– Including the border attribute without a value
produces a 1 pixel border.
• See syllabus
 Attributes <tr>

• align
• bgcolor
 Cell Width
• To set the width of an individual cell, add
the width attribute to either the <td> or
<th> tags
• The syntax is: width=“value”
– value can be expressed either in pixels or
as a percentage of the table width
– a width value of 30% displays a cell that is
30% of the total width of the table
 Cell Height
• The height attribute can be used in the <td>
or <th> tags to set the height of individual
cells
• The height attribute is expressed either in
pixels or as a percentage of the height of the
table
• If you include more text than can be
displayed within that height value you specify,
the cell expands to display the additional text
 Spanning Rows and Columns
• To merge several cells into one, you need to
create a spanning cell
• A spanning cell is a cell that occupies more than
one row or column in a table
• Spanning cells are created by inserting the
rowspan and colspan attribute in a <td> or
<th> tag.
• The syntax for these attributes is:
<td rowspan=“value” colspan=“value”> …
</td>
– value is the number of rows or columns that the
cell spans in the table
 Spanning Rows and Columns
• When a cell spans several rows or
columns, it is important to adjust the
number of cell tags used in the table row
• When a cell spans several rows, the rows
below the spanning cell must also be
adjusted
 Spanning Rows and Columns
•
This cell
spans three
columns

This cell
spans three
rows
 Row-Spanning Cell
•
four table
cells in the
first row

only three table

cells are
required for the
second and
third rows

HTML code

resulting table
 Aligning Contents
• By default, cell text is placed in the middle
of a cell, aligned with the cell’s left edge
• You can specify a different horizontal
alignment for a <td> or <th> element
align=“position”
position is left, center or right
 Attributes <td>
• align – Horizontal alignment
• valign – Vertical alignment (top, middle,
bottom)
• width – Width of cell in pixels or
percentage of table width
• height – Height of cell in pixels or
percentage of table height
 Attributes <td>
• colspan – Makes cell take up space of one
or more cells
• rowspan – Makes cell take up space of
one or more rows
• bgcolor
 Placeholder
• Insert a no-breaking space in the empty cell.
<tr>
<td>Row1 Col1</td>
<td>Row2 Col2</td>
</tr>
<tr>
<td> &nbsp; </td>
<td>Row2 Col2</td>
</tr>
 Nested Tables
• Tables can be created within the cell of
another table.
• Carefully work on one table at a time.
 Examples and homework
• See simple_calculator.html
• See table_example.html
• See form_border.html
• Do table assignment
 HTML Forms
• http://www.ncsa.uiuc.edu/SDG/Software/M
osaic/Docs/fill-out-forms/overview.html
• Summary of HTML tags for forms and
examples of simple forms
• www.webcom.com/html/tutor/forms
• Forms tutorial
 HTML Forms
• HTML Forms were the first way for users
to interact with the Web
– controls (inputs)
– form submission
– form processing

• Forms collect user input

• <form>…</form> encloses a form
 CGI
• Common Gateway Interface
• Programs that let HTML pages (on server)
interact with the viewers (clients) via
HTTP.
• Programs can send specific information.
• Programs get information from users.
• Written in C/C++, Java, Perl, UNIX scripts.
• Executed on the server
 Forms
• E-commerce
• Feedback (surveys)
• Searching

• Faster
• More accurate
• Cheaper
• Virus free
• GET -- this is the default method and
causes the fill-out form contents to be
appended to the URL.
• POST -- this method causes the fill-out
form contents to be sent to the server in a
data body rather than as part of the URL.
• ENCTYPE specifies the encoding for the
fill-out form contents. This attribute applies
only if METHOD is set to POST
 Form Attributes
• Name
• Method
– get -- this is the default method and causes
the fill-out form contents to be appended to
the URL. Use only when submit has no effect.
e.g. pure query.
– post -- this method causes the fill-out form
contents to be sent to the server in a data
body rather than as part of the URL.
 Form Attributes
• Action :
– The URL to which the data is sent (may be
local) or
– mailto: so the data just gets sent in an email.
• Enctype: the encoding for the fill-out form
contents. This attribute applies only if the
method is post.
 Form Examples
<form name=“data” method=“post”
action=“http://www.site.com/cgi-bin/myprog”>
<form method=“get” action=“/cgi-bin/myprog”>
<form method=post enctype=“text/plain”
action=“mailto:[email protected]”>
<input type="text" name=“user" size="25"><br/>
<input type="submit" value="submit">
<input type="reset" value="reset">
</form>
 Form Contents
• A Form may contain anything except
another Form.
• Interface elements (controls):
– input tags
– select tags
– textarea tags
 Input Attributes
The attributes to INPUT are as follows:
TYPE must be one of:
"text" (text entry field; this is the default)
"password" (text entry field; entered characters are represented as asterisks)
"checkbox" (a single toggle button; on or off)
"radio" (a single toggle button; on or off; other toggles with the same NAME are grouped into "one of many" behavior)
"submit" (a pushbutton that causes the current form to be packaged up into a query URL and sent to a remote server)
"reset" (a pushbutton that causes the various input elements in the form to be reset to their default values)
NAME is the symbolic name (not a displayed name -- normal HTML within the form is used for that) for this input field.
This must be present for all types but "submit" and "reset", as it is used when putting together the query string
that gets sent to the remote server when the filled-out form is submitted.
VALUE, for a text or password entry field, can be used to specify the default contents of the field. For a checkbox or a
radio button, VALUE specifies the value of the button when it is checked (unchecked checkboxes are disregarded
when submitting queries); the default value for a checkbox or radio button is "on". For types "submit" and "reset",
VALUE can be used to specify the label for the pushbutton.
CHECKED specifies that this checkbox or radio button is checked by default; this is only appropriate for checkboxes
and radio buttons.
SIZE is the physical size of the input field in characters; this is only appropriate for text entry fields and password entry
fields. If this is not present, the default is 20. Multiline text entry fields can be specified as SIZE=width,height; e.g.
SIZE=60,12. Note: the SIZE attribute should not be used to specify multiline text entry fields now that the
TEXTAREA tag is available.
MAXLENGTH is the maximum number of characters that are accepted as input; this is only appropriate for text entry
fields and password entry fields (and only for single-line text entry fields at that). If this is not present, the default
will be unlimited. The text entry field is assumed to scroll appropriately if MAXLENGTH is greater than SIZE.
 Input: type attribute
• <input type=“submit”> (submits data)
• <input type=“reset”> (resets to defaults)
• <input type=“button”> (user defined)
• <input type=“text”>
– <input type=“password”> (asterisks)
• <input type=“checkbox”> (toggle)
• <input type=“radio”> (toggle-only one)
• <input type=“hidden”> (isn’t displayed)
 Input: type attribute
• Default is “text”
 Other Input Attributes
• name
• value
• checked
• size
• maxlength
 Submit Button
• When a user clicks on a submit button the
browser submits the contents of all other
fields to a web server using the method
and action attributes.
• <input type=submit value=“Send now">
• May have multiple submit buttons on a
page (with different values).
• Default value is “Submit Query”
 Reset Button
• When user presses the reset the entire
form is cleared.
• The displays are reset to the initial values
which have been saved.

<input type=reset value="clear form">

 Button
• “push button”
• User defined
• Discussed with JavaScript
 Text
• Creates a text box into which user types.
• When the form contains only a single text
entry field, the form can be submitted by
pressing return in the text box as well as
by pressing the Submit Query button.
• E.g. Google gives you this hint. Their
submit button has the value “Google
Search”.
 Text
<input type=“text”
name=“pizza”
size=“10”
maxlength=“20”
value=“pepperoni”>
 Text
<form method=“post” action=… enctype=…>
please enter your name:
<input type=“text” name="name"><br>

please enter your age: <input type=“text”

name="age"><br>

<input type=“submit” value="submit">

<input type=“reset” value=“clear form”>
</form>
 Use Table to Format Form
<form method=post action=… >
<table><tr>
<td>your name: </td>
<td><input type=text name=“Name"></td>
</tr><tr>
<td>your age:</td>
<td> <input type=text name=“Age"></td>
</tr><tr>
<td><input type=submit value="submit"></td>
<td><input type=reset></td>
</tr></table>
</form>
 Password
• Text appears as asterisks on screen.
• Why?
 Checkbox
<input type=“checkbox" name=“extras”
value=“radio”>Radio
<input type=“checkbox" name=“extras”
value=“ac">A/C
<input type=“checkbox" name=“extras”
value=“gps”>Global Positioning System
<input type=“checkbox" name=“extras”
value=“leather">Leather seats
 Checkbox
• “extras” is the name of the checkbox,
and links the group of checkboxes.
• “value” is the text that will be sent if the
box has been checked.
• Any number of boxes may be selected.
• They may be initially selected or
deselected.
 Radio Buttons
<input type=“radio" name=“card”
value=“J”>Jack
<input type=“radio" name=“card”
value=“Q">Queen
<input type=“radio" name=“card”
value=“K”>King
<input type=“radio" name=“card”
value=“A">Ace
 Radio Buttons
• “card” is the name of the group
and links the group of radio buttons. Every
button in the group must have the same
name.)
• “value” is the text that will be sent
to the server if that button is chosen.
• Only one button can be selected—they are
mutually exclusive.
 Select
• Menu
• Dropdown list
• Scrolling list
 Select
• SELECT has both opening and closing tags.
Inside SELECT, only a sequence of OPTION
tags -- each followed by an arbitrary amount of
plain text (no HTML markup) -- is allowed.
• SELECTED attribute specifies that this option is
selected by default. If the SELECT allows
multiple selections (via the MULTIPLE attribute),
multiple options can be specified as SELECTED.
 Select
<SELECT NAME="a-menu">
<OPTION> Pick option.
<OPTION> First option.
<OPTION> Second option.
</SELECT>
 Attributes for Select
• NAME is the symbolic name for this SELECT
element. This must be present, as it is used
when putting together the query string for the
submitted form.
• SIZE: if SIZE is 1 or if the SIZE attribute is
missing, by default the SELECT will be
represented as a Motif option menu. If SIZE is 2
or more, the SELECT will be represented as a
Motif scrolled list; the value of SIZE then
determines how many items will be visible.
 Attributes for Select
• MULTIPLE, if present, specifies that the
SELECT should allow multiple selections
(n of many behavior). The presence of
MULTIPLE forces the SELECT to be
represented as a Motif scrolled list,
regardless of the value of SIZE.
 Select
<strong>Color</strong>
<select name=“color”>
<option value=“red”>Red
<option value=“green”>Green
<option value=“yellow”>Yellow
<option value=“Blue”>Blue
</select>
 Textarea
• The textarea tag creates an area where
the user can submit multiple lines of text.
• <textarea > …</textarea> attributes:
– name
– Rows (default is 2)
– Cols (width in characters) (default is 20)
 Textarea
• Has automatic scrollbar; any amount of text can
be entered.

• May have default contents :

<textarea name=address cols=40
rows=5>
Default contents go here.
</textarea> <br>

• Newlines are respected. There will be a newline

both before and after "Default contents go here."
 Example
<form method=post action=… >

please enter your address :<br/>

<textarea name=address cols=40
rows=5>
</textarea> <br/>
<input type=submit value=submit>
</form>
 Hidden
• Nothing is displayed by the browser.
• Name and value are sent when submitted
• stores info between client/server
exchanges that would otherwise be lost
• Not really hidden. Can see it in the source.
<input type=hidden name=sh value = myst>
 Examples
• http://archive.ncsa.uiuc.edu/SDG/Software
/Mosaic/Docs/fill-out-forms/example-1.html
• Can you code these? His source is a
nightmare.
• See form group example
• See menus.html ?
Homework
 Summary
• Tables (rows of data cells) to arrange elements
on a webpage
• Forms to collect user data and send it to server.
– Attributes :Method, Action
– Input elements – we’ve seen (what are they?):
• Buttons (3)
• Texts (2)
• Toggles (2)
• Hidden (1)
– Textarea
– Select