| |
Misc. |
|
|
Assignment One due now.
HTML Quiz review.
Assignment Two gets started.
|
| |
Site Design |
|
|
Site Path Layout
Site Hierarchy Structure
Site Hierarchy/Path File Syntax
Site Hierarchy/Image Path File Syntax
|
| |
Basic Tables |
|
the Stuff Of Nightmares
|
<table>
<tr>
<td>Row 1 Col 1</td>
<td>Row 1 Col 2</td>
</tr>
<tr>
<td>Row 2 Col 1</td>
<td>Row 2 Col 2</td>
</tr>
</table>
|
| |
Demo
Get all the source for the demo
tables here |
|
|
Plain table
|
|
The Tags
|
<table> |
The main table tag
|
<tr> |
Table Row
|
<td> |
Table Data. Another
leftover from academic papers.
Really, it's a Table Cell
|
More obscure tags:
<caption> |
Puts a title outside the table, even though the tag
is within the table tag
|
<th> |
Table Head. Same function
as a <td> tag, but makes content the equivalent
of <strong>.
|
|
| |
<table> Attributes |
|
Border, Cell Spacing & Cell Padding
|
<table border="3" cellspacing="4"
cellpadding="5">
border="n" |
GOTHCA!
It's really three borders:
The outer table edge
The inner cell edge
The space between the two
|
cellspacing="n" |
The space between the outer table edge and the cells,
and between cells.
|
cellpadding="n" |
The space between the cell edge and the edge of the
block element
|
|
| |
Another View |
|
|
|
| |
Demo |
|
|
Table with
border, padding and spacing
|
| |
<table> & <tr> Attributes That Affect
Size |
|
Width & Height
|
KEY CONCEPT!
New Term: Chunk
The smallest horizontal unit the browser will divide a block
element into.
The GOTCHA! Rule:
Part I: A cell will not get any narrower than the widest chunk.
Part II: A table will not get any narrower than the total width
of each table column's largest chunks and/or preset width in
any row.
In <table>
| no width specified |
The widest the table can be without breaks and without
hitting the edge of the browser window.
|
|
width="100%"
|
The % width of the browser window unless The
GOTCHA! Rule pushes it past the designated
width.
|
|
width="100px"
|
The minimum total width of the table cells in any row,
not including borders, cellspacing or cellpadding
unless The GOTCHA! Rule
pushes it past the designated width. |
In <td>
| no width specified |
Difficult to predict. Browser automatically decides
for you, but never disobeys The
GOTCHA! Rule.
|
|
width="50%"
|
Cell width inside the table as a percentage of the
table's entire width unless The
GOTCHA! Rule pushes it past the designated
width.
The widest cell will be the narrowest width for that
cell's column.
|
|
width="100px"
|
The minimum width of the cells unlessThe
GOTCHA! Rule pushes it past the designated
width. |
|
height="100px"
|
Don't bother. Fugetaboutit. Not reliable
|
|
| |
Demo |
|
|
Table width
gotchas
|
| |
Alignment |
|
|
|
in <td>
align="center"
align="left"
align="right"
|
Aligns the contents of the cell
|
|
in <tr>
align="center"
align="left"
align="right"
|
Aligns the contents of the row
|
|
in <table>
align="center"
align="left"
align="right"
|
Aligns the table within the browser window, not the
tables contents
|
|
in <td>
valign="bottom"
valign="middle"
valign="top"
|
vertical align: Aligns
the cells contents vertically.
|
|
in <tr>
valign="bottom"
valign="middle"
valign="top"
|
Aligns the row contents vertically.
|
|
in <table>
|
valign is not available for <table>.
|
Demo alignments
|
|
Table Alignment with Two Tables
|
|
<table align="left">
for the first table and
<table align="right">
for the second table
|
Puts the two tables side by side. But they will overlap
if the browser widow is too narrow.
Demo
|
|
<table align="right">
for the first table and
<table align="left">
for the second table
|
Also puts the two tables side by side. But won't allow
them to overlap.
Demo
|
|
|
Inheritance
|
|
<table align="center">
|
Since it's a block tag, it affects the alignment of
the table within the browser window, but not on the
elements within it.
|
|
<tr align="center">
|
A table row tag will affect the alignment of table cells
within it.
|
|
<td align="center">
|
A table cell tag inherits the alignment of the row unless
it has its own alignment attribute.
Demo
|
|
| |
Attributes for Visual Appearance |
|
Backgrounds
|
|
<table background= "images/back.gif">
|
Places an image in the background just like the <body
background="x.gif" does, but within the boundary
of the table.
|
|
<td background= "images/back.gif">
|
Places an image in the background within the boundary
of the table cell. No equivalent for <tr>
|
|
<table bgcolor= "#ff0000">
|
Colors the background of the table
|
|
<tr bgcolor= "#ff0000">
|
Colors the background of the table row
|
|
<td bgcolor= "#ff0000">
|
Colors the background of the table cell
|
|
<table bordercolor="#ff0000">
|
Colors the border. GOTCHA!
It's solid in Internet Explorer and shaded in Netscape.
The <tr> and <td> versions aren't supported
by Netscape at all.
Demo
|
|
|
Layering backgrounds & background colors
|
Top to Bottom Hierarchy:
|
<td background="y.gif">
|
Top layer
|
|
<td bgcolor="#9966FF">
|
Under table cell background, above table row
|
|
<tr bgcolor="#66CCFF">
|
Under table cell, above table
|
|
<table background="x.gif">
|
Under table row and cell, above table bgcolor |
|
< table bgcolor=#FF9900">
|
Under everything |
Demo hierarchy
|
| |
The Empty Cell GOTCHA! |
|
|
Easy to do, especially when you get into spanning rows and columns.
Looks like this.
|
| |
Spanners |
|
Not the English word for Wrenches
|
|
<td colspan="n">
|
Spans the columns for more than 1 table cell.
|
|
<td rowspan="n">
|
Spans the rows for more than 1 table cell.
|
Demo
GOTCHA! CITY
Suggestion: Diagram on paper first!
|
| |
Tables Within Tables |
|
|
Why? To avoid complex spans.
Demo
|
| |
Dissections |
|
|
Sample 1
Sample 2
Sample 3
|
| |
Exercises
Get all the source for the demo
tables here
|
|
|
Recreate the tables in these demos:
Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Don't just cut'n paste'm. Try to build them yourself using the
Dreamweaver UI and tweaking the code by hand. Change the attributes
to see what they do.
|
| |
|
 |
|
