PBDS 660: Introduction to Hypermedia

Many people had trouble with Quiz 2, so I am giving it out again and will average your two scores on this quiz. (I hope you all saw my post on the blog earlier this week about the low scores and boned up!)

In the bad old days of web design, people used tables to get some control over layout. I was among the sinners. But everything's different now. So, let's use the right tool for the right job, ok?

A table is simply the right tool if the information you need to convey is enhanced by putting its pieces into an explicit grid so that the bits of information line up neatly along both vertical and horizontal axes. So things you need to put into spreadsheets would go into a table.

Tables are defined by their three basic units: rows, columns, and cells.

As we'll see when we get into the nitty gritty, HTML tables have explicit elements to define rows and cells, but columns are defined only implicitly, by the number of cells per row.

Tables have THREE absolutely essential elements and several other optional ones. Here are the essential ones:

1. <table>: this is the parent element and indicates where the table begins and ends
2. <tr>: this element defines each table ROW
3. <td>: this element defines each table CELL (aka table DATA) within each row

Note that there is no explicit definition of a table column, as there is in a spreadsheet application, for example. Instead, the number of table CELLS (<td>) in a table row determines the number of colums. A key, primary, unbreakable rule is that each row of the table must contain precisely the same number of table cells.

Here is the code for a simple 3 X 3 table:

	<table border="1">
		<tr>
			<td>row 1, column 1</td>
			<td>row 1, column 2</td>
			<td>row 1, column 3</td>
		</tr>
		<tr>
			<td>row 2, column 1</td>
			<td>row 2, column 2</td>
			<td>row 2, column 3</td>
		</tr>
		<tr>
			<td>row 3, column 1</td>
			<td>row 3, column 2</td>
			<td>row 3, column 3</td>
		</tr>
	</table>

And here's what it looks like in a browser:

row 1, column 1	row 1, column 2	row 1, column 3
row 2, column 1	row 2, column 2	row 2, column 3
row 3, column 1	row 3, column 2	row 3, column 3

There are several useful attributes for the <table> element:

• border: when set to a number above 0, specifies the thickness of the border around each cell
• cellpadding: when set to a number above zero, specifies the amount of negative space (in pixels) surrounding the text inside the cell's border
• cellspacing: when set to a number above zero, specifies the distance (in pixels) between the border of one cell and the border of another

Understanding the difference between cellpadding and cellspacing takes a little doing. Here is the same table as above with each attribute applied.

First, cellpadding set to "15."

row 1, column 1	row 1, column 2	row 1, column 3
row 2, column 1	row 2, column 2	row 2, column 3
row 3, column 1	row 3, column 2	row 3, column 3

Next, cellspacing set to "15."

row 1, column 1	row 1, column 2	row 1, column 3
row 2, column 1	row 2, column 2	row 2, column 3
row 3, column 1	row 3, column 2	row 3, column 3

And finally, border set to "15" with no cellspacing or cellpadding.

row 1, column 1	row 1, column 2	row 1, column 3
row 2, column 1	row 2, column 2	row 2, column 3
row 3, column 1	row 3, column 2	row 3, column 3

CSS will allow you to make much more specific and finely-grained decisions about the appearance of tables, but for now just use the tools at hand.

Captions

Tables can include other elements besides standard ROWS and CELLS. For example, you can add a CAPTION element (see Cederholm, p. 32) and a SUMMARY attribute (see Cederholm, p. 33).

The CAPTION element will display a caption or title for the table; the SUMMARY attribute (placed inside the open tag for the TABLE element) merely provides information that is helpful for those with screen readers (it does not display anywhere).

My First Table

row 1, column 1	row 1, column 2	row 1, column 3
row 2, column 1	row 2, column 2	row 2, column 3
row 3, column 1	row 3, column 2	row 3, column 3

The code for the table above looks like this:

	<table border="1" summary="an example of a table with a caption">
		<caption>My First Table</caption>
		<tr>
			<td>row 1, column 1</td>
			<td>row 1, column 2</td>
			<td>row 1, column 3</td>
		</tr>
		<tr>
			<td>row 2, column 1</td>
			<td>row 2, column 2</td>
			<td>row 2, column 3</td>
		</tr>
		<tr>
			<td>row 3, column 1</td>
			<td>row 3, column 2</td>
			<td>row 3, column 3</td>
		</tr>
	</table>

Table Headers

We can also have labels for the columns in our table by specifying special cells known as TABLE HEADERS (not to be confused with the HEAD element in HTML structure or the HEADING elements used to signify the hierarchical organization of a document). The TABLE HEADERS substitute for TABLE CELLS (aka TABLE DATA) within the top ROW of the table. Like this:

My First Table

column 1	column 2	column 3
row 1, column 1	row 1, column 2	row 1, column 3
row 2, column 1	row 2, column 2	row 2, column 3
row 3, column 1	row 3, column 2	row 3, column 3

Again, here's the code:

	<table border="1">
		<caption>My First Table</caption>
		<tr>
			<th>column 1</th>
			<th>column 2</th>
			<th>column 3</th>
		</tr>
		<tr>
			<td>row 1, column 1</td>
			<td>row 1, column 2</td>
			<td>row 1, column 3</td>
		</tr>
		<tr>
			<td>row 2, column 1</td>
			<td>row 2, column 2</td>
			<td>row 2, column 3</td>
		</tr>
		<tr>
			<td>row 3, column 1</td>
			<td>row 3, column 2</td>
			<td>row 3, column 3</td>
		</tr>
	</table>

Merged Cells

Table CELLS can use two important attributes, one that merges cells belonging to the same row and one that merges cells belonging to the same column. To merge cells in the same row (that is horizontal neighbors), you use the COLSPAN attribute. To merge cells in the same column (that is vertical neighbors), you use the ROWSPAN attribute.

Here is what each one looks like in action. First the COLSPAN attribute, which looks like this: <td colspan="2">:

My First Table

column 1	column 2	column 3
row 1, column 1	row 1, column 2	row 1, column 3
row 2, column 1	row 2, column 2	row 2, column 3
row 3, column 1	row 3, columns 2 & 3

Now the ROWSPAN attribute, which looks like this: <td rowspan="2">:

My First Table

column 1	column 2	column 3
row 1, column 1	row 1, column 2	row 1, column 3
rows 2 & 3, column 1	row 2, column 2	row 2, column 3
	row 3, column 2	row 3, column 3

But remember, the number of <td> elements in each row must be equal. So wherever you have a COLSPAN attribute with a value of 2, you have to remove one <td> element from that row. If your COLSPAN has a value of 3, you'd have to remove 2 <td>.

The same priniciple applies to a ROWSPAN. If I want to merge cells in column 1 in rows 2 and 3, I put the ROWSPAN attribute in the first <td> in TABLE ROW 2 and remove the first <td> from TABLE ROW 3. The resulting code for the whole table looks like this:

	<table border="1">
		<caption>My First Table</caption>
		<tr>
			<th>column 1</th>
			<th>column 2</th>
			<th>column 3</th>
		</tr>
		<tr>
			<td>row 1, column 1</td>
			<td>row 1, column 2</td>
			<td>row 1, column 3</td>
		</tr>
		<tr>
			<td rowspan="2">rows 2 & 3, column 1</td>
			<td>row 2, column 2</td>
			<td>row 2, column 3</td>
		</tr>
		<tr>
			<td>row 3, column 2</td>
			<td>row 3, column 3</td>
		</tr>
	</table>

And finally, the coup de grace: both together: <td colspan="2" rowspan="2">:

My First Table

column 1	column 2	column 3
row 1, column 1	row 1, column 2	row 1, column 3
rows 2 & 3, columns 1 & 2		row 2, column 3
		row 3, column 3

Here's the code for the third example. Note that in the second row, there are now only 2 <td> elements are specified and in the third row, only 1 <td> element is specified. That's because the code for the first <td> element in row 2 has already specified or accounted for the first two cells of row two and the first two cells of row three.

	<table border="1">
		<caption>My First Table</caption>
		<tr>
			<th>column 1</th>
			<th>column 2</th>
			<th>column 3</th>
		</tr>
		<tr>
			<td>row 1, column 1</td>
			<td>row 1, column 2</td>
			<td>row 1, column 3</td>
		</tr>
		<tr>
			<td colspan="2" rowspan="2">rows 2 & 3, columns 1 & 2</td>
			<td>row 2, column 3</td>
		</tr>
			<td>row 3, column 3</td>
		</tr>
	</table>

Forms provide the mechanism for visitors to your web site to give information back to you, for good purposes or ill. I'm sure you've all seen plenty of them and have used them for a range of activities.

To work, though, forms have to be connected to some kind of code allowing for interactive behavior. Sometimes that code is resident on the page itself, but most often the code is resident on a server and provides connections between web pages and databases. We won't actually go there in this course but you can follow up with two other courses in future semesters:

• IDIA 616 Hypermedia Production: includes validating forms and neat JavaScript stuff
• IDIA 618 Dynamic Web Sites: includes connecting Web sites to databases (the real power play)

Every form has three parts: the <form> ... </form> tag, the form elements (children of the form) that provide the user with opportunities to input information, and the submit (and reset) buttons that act on the information the user has created or selected.

Start with the <form> ... </form> element itself. It requires two attributes:

1. action="script.url" where script.url is the location on the server of the script or code that will run with the form is submitted.
2. method="post"

The Submit and Reset buttons are system-specific input types. They look like this:

The code for the two buttons looks like this:
<input type="submit" value="Submit" /><input type="reset" value="Start Over" />

The workhorse of the form is the <input /> element. (Note that this is one of the HTML elements that "closes itself." That is, there is only one part to the tag so it always ends with  />.) It requires at least one attribute, type and depending on which type you use, other attributes we'll get to in a minute.

There are seven primary values for the type attribute:

• submit
• reset
• text
• radio
• checkbox
• textarea
• button

In addition, there is a <select> element for drop-down lists. It requires you to use its descendent element, the <option>.

In the table below, you can see all the major types and the attributes they require or permit:

input type	attributes: = unsupported; = permitted; = required
	cols	checked	disabled	name	rows	size	tabindex	value	wrap
button
checkbox
radio
reset
submit
text
textarea

Radio buttons require the user to choose one option from among the several on offer. In contrast, checkboxes permit users to choose as many items as they like from among the set on offer. Yet the code for radio buttons is very similar to the code for checkboxes, and vice versa. Because both of these types regulate groups of choices, you need some way to indicate the members of the group.

Here's an example of some radio buttons. Choose one:

True:
False:

Here's the code (but note that there's a dummy URL for the ACTION attribute):

	<form method="post" action="script.url">
		True: <input type="radio" name="facts" value="true" /><br />
		False:  <input type="radio" name="facts" value="false" /><br />
		<input type="submit" name="submit" value="Submit" /><input type="reset" value="Clear" />
	</form>
		

And here are checkboxes. Choose as many as you like:

Hats
Coats
Scarves
Mittens

Here's the code:

	<form method="post" action="script.url">
		<input type="checkbox" name="outerwear" value="hats" /> Hats<br />
		<input type="checkbox" name="outerwear" value="coats" /> Coats<br />
		<input type="checkbox" name="outerwear" value="scarves" /> Scarves<br />
		<input type="checkbox" name="outerwear" value="mittens" /> Mittens<br />
		<input type="submit" name="submit" value="Submit" /><input type="reset" value="Clear" />
	</form>
		

The <select> element requires both an opening and a closing tag. In fact it looks and feels very much like an unordered list with <option> and </option> elements enclosed within it.

Here's what one may look like:

lions tigers bears

Here's the code for this type:

	<form method="post" action="script">
		<select name="animals">
			<option>lions</option>
			<option>tigers</option>
			<option>bears</option>
		</select>
	</form>
	

Another style of selection list allows readers to see many options at once (in this case I've specified 5) and even to select more than one item from the list:

green beans brussel sprouts cabbage carrots lettuce asparagus broccoli squash onions

And here's the code for this style:

	<form method="post" action="script">
		<select name="veggies" size="5" multiple="multiple">
			<option>green beans</option>
			<option>brussel sprouts</option>
			<option>cabbage</option>
			<option>carrots</option>
			<option>lettuce</option>
			<option>asparagus</option>
			<option>broccoli</option>
			<option>squash</option>
			<option>onions</option>
		</select>
	</form>

	

This element of the FORM creates a multline text entry area in the user's browser display. In it, the user may type a nearly unlimited number of lines of text.

Here's an example:

Write your ideas and feedback here.

The code looks like this:

	<form method="post" action="script">
		<textarea name="feedback" rows="10" cols="80" wrap="soft">
		     Write your ideas and feedback here.
		</textarea>
	</form>

Assignment 2 will be due in one short week!