© 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook...
-
Upload
amanda-stevens -
Category
Documents
-
view
215 -
download
0
Transcript of © 2001 D & D Enterprises 1 Tables HTML Tables Cross-Browser Sophisticated Page Layout Read Textbook...
1© 2001 D & D Enterprises
HTML TablesTables
Cross-Browser Sophisticated Page LayoutRead Textbook Chapter 9Run the Chapter Examples!!
2© 2001 D & D Enterprises
About Tables The <table> tag has a huge variety of
attributes and is easily the most sophisticated HTML tag
Remember: The HTML table model is row based You create a table by defining rows, one at a
time Within each row you create table cells Each cell within a table is like a mini HTML document
and can have its own text flow, alignment, color, etc.
3© 2001 D & D Enterprises
Table Display
Normally the browser immediately displays text as it is received from the server modifying the scroll bar to make additional text available as it arrives until the whole document has been transferred
4© 2001 D & D Enterprises
Table Display As you have probably noticed, however, in-
line graphic images can cause the browser to delay displaying text until a graphic's size is known This is why you are encourage to use height and
width attributes! Similarly, when the browser encounters a
<table> tag, it will not display any part of the table until it receives the entire table from the server and can determine a best-fit layout for column and cell sizes
5© 2001 D & D Enterprises
About Tables
The browser collects all of the table cells, adjusts their sizes so they fit together and creates a row After all of the rows are assembled the
browser collects all of them together and creates the complete table
6© 2001 D & D Enterprises
About Tables Since the size of one cell or row can be
affected by other cells or rows in the table, the browser may have to go back and adjust other rows to make the table look right
Because of these dependencies, most HTML tables require two passes by the browser: One to size the individual cells and rows, and another to display the final table after making any
adjustments
7© 2001 D & D Enterprises
About Tables
You may have noticed this 2 pass behavior when loading a page with large, complex tables The page display pauses while the
browser reads and processes the table, and
then the whole table appears at once
8© 2001 D & D Enterprises
About Tables This two-pass behavior is a real pain,
making your documents display slowly and erratically To mitigate this, HTML 4.0 includes new
features that allow a one-pass table display, permitting browsers to display tables
row by row, as they are received by the browser
So, use the correct 4.0 <!Doctype> statement!!
9© 2001 D & D Enterprises
Simple Table ReviewReview An HTML table is contained in the <table>
and </table> tags These tags occur only within the <body>
section of a document A document can contain any number of
tables, and tables can be embedded (with caution) inside other tables
Within a <table> tag pair, each row of the table is delimited by paired <tr> and </tr> tags, and each cell within a row is delimited by paired <td> and </td> tags
Table Review URL: http://204.98.17.1/learnhtml/56tables.htm
10© 2001 D & D Enterprises
Simple Table ReviewReview
A tag pair for table headings<th> and </th>is essentially the same as the <td> and </td> tagsexcept that <th> formats text with emphasized and centered attributes
11© 2001 D & D Enterprises
Simple Table ReviewReview By default, tables do not have any borders
or gridlines However, in most cases where you would use a
table, it is helpful to mark off the cell divisions with borders and gridlines to help the user understand the data.
To add a default border and gridlines to a table, you include the BORDER attribute in the <table> tag that initiates the table:
<table border>
12© 2001 D & D Enterprises
Simple Table ReviewReview
You cannot independently control the table's border and gridlines Their width and appearance can be
expected to vary from one browser to another, much as the rendition of the <hr> horizontal rule tag varies among browsers
13© 2001 D & D Enterprises
Simple Table Review Open template.html in HomeSite save it as
table1.html Add the Title text: Table Review After the opening <body> tag add the
following:<table border><tr><td>this is cell #1</td><td>this is cell #2</td></tr></table>
14© 2001 D & D Enterprises
Page Layout: Tables Tables also were not designed for layout
per se They were designed for representing tabular
data, but their layout properties are less of a "side effect" than the preceding hacks
Tables are fairly flexible but do take some effort to master, and they can complicate your HTML code
15© 2001 D & D Enterprises
Page Layout: Tables
In homesite, rename template.html table_columns.html
<table cellpadding="8"> <tr> <td valign="top"> Here is one column of data -- the
way to get this is, in itself, something of a surprise. Not exactly what you would expect! </td>
<td valign="top"> So, it turns out that tables can be used
to create columnar layout as illustrated here. Note that here you need to make use of
cellpadding to keep the columns from colliding with each other. </td> </tr></table>
17© 2001 D & D Enterprises
Using Tables for Advanced Page Layout
Width is a Key Attribute
18© 2001 D & D Enterprises
Table Width Sometime you want to control the absolute
or relative width of the table within the browser window HTML Tables supports this functionality with the
WIDTH modifier, which you can apply to any of the <table>, <th>, or <td> tags
The parameter for the WIDTH modifier is a single numeric value, which can be either an absolute number of pixels or a percentage of the total window or table width
width.html
19© 2001 D & D Enterprises
Width Setting table width is an important concept
if you consider screen size… 640 x 480? 800 x 600?
If you are creating a layout that wraps and is dependent of screen width, you can fix the width of your presentation by enclosing all of your content in a table This is a very common Web page layout
technique BUT! What width to make the table?????????
21© 2001 D & D Enterprises
What Size Should I Design My Page?
So, do you develop for 640x480 or 800x600 How do you make up your mind?
http://hotwired.lycos.com/webmonkey/99/41/index3a_page3.html?tw=design
What is the "sweet spot" Non-scrolling region
22© 2001 D & D Enterprises
Table Width Tutorial
Project Coolhttp://www.projectcool.com/developer/
basics/tables/03D-lookfeel-width.html
23© 2001 D & D Enterprises
Width for Columns Here is a basic two-column layout using a
<TABLE> that has a single table row with three data cells: one each for the columns of text and an
intervening empty cell to more attractively separate the two columns
There is also a large cellspacing attribute value to create additional intervening space between the columns
columns.html
24© 2001 D & D Enterprises
Another Width: Sideheads The text-heading features available in
HTML are the <H1> through <H6> tags These tags are always embedded in the text
flow, separating adjacent paragraphs of text Through multiple columns, you can achieve an
alternative style that places headings into a separate side column, running vertically alongside the document text
Here is a fairly fancy pair of side heads:
sides.html
25© 2001 D & D Enterprises
Using Width for Your Layout
Using Tables to do Page Layout http://www.html.about.com/compute/
html/library/beginning/bl_begin011000a.htm
26© 2001 D & D Enterprises
Advanced Page Layout: Tables
Tables can be good for placing images relative to each other within the browser window Occasionally you will notice that browsers don't do
exactly what you thought you told them Realize that values in HTML attributes are usually only
treated as hints to the browser, which may have several other constraints to satisfy
Additionally, graphics-intensive tables can take a considerable time to download and render There are quite a few major sites whose download
time suggests that the designers have not tested with slower modems and computers
27© 2001 D & D Enterprises
Troubleshooting Advanced Layouts
Microsoft Developers Network http://msdn.microsoft.com/workshop/
design/layout/facts1.asp#IMAP
28© 2001 D & D Enterprises
Table AlignmentAlignment
Text AttributesTable Attributes
29© 2001 D & D Enterprises
Cell Alignment Defaults align.html
The contents of a header <th> cell are centered horizontally in the cell
The contents of a data <td> cell are aligned to the left edge of the cell If you want to change this behavior, use the ALIGN
attribute with the appropriate cell tag The align attribute accepts one of four values:
left, center, right, and justify The first three values are defined by the HTML standard
the justify value is supported only by Internet Explorer
30© 2001 D & D Enterprises
Table Alignment It is tedious to add the align attribute to each
and every cell in your table Like the bgcolor attribute, you can use the align
attribute on individual <td> and <th> tags also on <tr> tags
to control the alignment of every cell in a table row
Rewritten previous alignment example to control the alignment at the row level:
align2.html
31© 2001 D & D Enterprises
Alignment Tips Words of warning:
You cannot use the align attribute on the <table> tag to affect the alignment of every cell in the table
The <table> tag does accept the align attribute, but it uses it to control the alignment of the table with respect to the surrounding text, much the same way the <img> tag uses the align attribute
To control alignment of every cell in your table, you'll need to set the align attribute on every row or every cell in your table
32© 2001 D & D Enterprises
VALIGN By default, both Netscape's and Internet Explorer's
CENTER attribute aligns contents vertically within the cell
This vertical alignment is true for both header and data cells
You can change this behavior by using the VALIGN attribute with the <td>, <th>, and <tr> tags
Even better, the VALIGN attribute works with the <table> tag, allowing you to set the vertical alignment of every cell in your table with a single attribute
The VALIGN accepts four values: top, middle, bottom, and baseline
33© 2001 D & D Enterprises
34© 2001 D & D Enterprises
VALIGN="baseline" valign.html
The baseline of a font is the imaginary line upon which the characters rest
If adjacent cells in a row have varying size text, the changing baseline between cells can make the table unattractive and difficult to read
If you set the cell vertical alignment to baseline, the browser will find the lowest baseline of all the cells in the row and align all the text to that baseline The result is a more readable table
35© 2001 D & D Enterprises
Table Alignment Tricks Table alignment, especially horizontal
alignment, is a great way to get alternative text alignment in a document
Before the advent of HTML 4.0 and Cascading Style Sheets, it was the only way to get right-aligned text
Even now, table alignment is the most widely supported way to get certain effects
ralign.html
36© 2001 D & D Enterprises
Text in Tables text.html
Since each cell within a table can be regarded as an independent formatting domain of its own, everything you already know about HTML tags that control the appearance of text in the Web browser continues to be valid ANYTHING can go in a table cell!
37© 2001 D & D Enterprises
Table Alignment Attributes
The dynamic sizing of rows and columns by the browser raises some text-positioning issues that would be familiar to any spreadsheet user The HTML 3.0 specification addresses
these with the additional attributes
38© 2001 D & D Enterprises
Table Alignment Attributes
The NOWRAP attribute turns off automatic text reflow within a cell
but it is a good idea to avoid using it, because it severely impairs the browser's ability to display the complete table attractively within the window limits and is deprecated
http://www.w3.org/TR/REC-html40/struct/tables.html#adef-nowrap
VALIGN controls the vertical alignment of text within a cell and can accept the values "top", "middle", "bottom", or "baseline”
align3.html
39© 2001 D & D Enterprises
Table Alignment Attributes
<tr> If the NOWRAP, ALIGN, or VALIGN
modifiers are included in a <tr> tag, they will affect all the cells in that row
40© 2001 D & D Enterprises
Table Alignment Attributes
<td> A NOWRAP, ALIGN, or VALIGN modifier in a
<td> tag will apply to that cell only ALIGN or VALIGN in a <td> tag will override any
ALIGN or VALIGN modifier in the enclosing <tr> tags The VALIGN="baseline" modifier makes sense
only in a <tr> tag, because it causes the text in all the row's cells to be oriented to a single baseline
the usefulness of this particular feature isn't obvious until you get into some fairly complex tables
41© 2001 D & D Enterprises
Now that You Know VALIGN
The Popular left based layout Study popular.html Download bluebk.jpg Download seuss.gif Create a file called popquiz.html,
using a table, to create the following:
43© 2001 D & D Enterprises
Table CaptionsCaptions
<caption>a moving standard...
44© 2001 D & D Enterprises
Table Captions Many tables exist as figures within a
document and might benefit from a caption explaining the contents of the table You can add a caption to your tables using the
<caption> tag The <caption> tag can appear anywhere within
the<table> tag but should not be placed within a <tr> <td> or <th> tag
captions.html
http://www.cyberbits.com/Tables/captions.htm
45© 2001 D & D Enterprises
Table Captions By default, both Netscape and Internet Explorer
center the caption above your table, wrapping the text to fit within the width of the table The similarity between the browsers ends here..
Not everyone wants the caption centered above the table
Both Internet Explorer 4.0 and Netscape 4.0 accept an align attribute for the <caption> tag that allows you to specify the caption position as either "top" or "bottom" The caption, still centered, is moved to the
appropriate position
46© 2001 D & D Enterprises
IE Caption Alignment
If you want to control the alignment of the caption content, IE accepts the following values for the ALIGN attribute: "top" "bottom" "left" "right"
When the “left” or right” value is used, the caption remains at the top of the table, aligned to the requested edge of the table
If you want a right- or left-aligned table at the bottom of the table, IE accepts a separate attribute, VALIGN, that lets you control the vertical position of the caption
With valign, you can specify either "top" or "bottom" to move the caption to the right spot
47© 2001 D & D Enterprises
Table Captions
48© 2001 D & D Enterprises
Faking a Caption
There is nothing preventing you from creating captions without the <caption> tag You can often create better positioned
and formatted captions using conventional paragraphs before or after your table!
If you want to get really fancy, you can use nested tables to get the best effect
49© 2001 D & D Enterprises
Faking a Caption Using tables to associate a caption with a
table is a great example of the layout power of tables, especially when they are nested Since a table and its caption are nothing more
than two elements that need to be placed one above the other and kept together, a simple two-row, one-column table will do the trick nicely
Turn the borders off on the containing table and use the table content alignment tricks discussed earlier to position the caption correctly
Consider this for a component of your "wow-me" table assignment...
50© 2001 D & D Enterprises
Compelling Table LayoutsLayouts
Adding GraphicsUsing Colored BackgroundsNesting Tables
51© 2001 D & D Enterprises
Colored Tables -- Why?
Use color to: Separate information Grab attention Go gestalt with your design and blend
graphics to a different background Color a whole table or
color individual cells
52© 2001 D & D Enterprises
Color & Tables
Changing the background color of a table is easy Add the bgcolor attribute to the
<table> tag The value of the attribute can be either a
color name or a hexadecimal color value
53© 2001 D & D Enterprises
Colored Table -- try this table2.html
<table border="2" bgcolor="#ff00ff" > <tr> <td>cell #1</td> <td>cell #2</td> </tr> <tr> <td>cell #3</td> <td>cell #4</td> </tr>
</table>
Note: Clickable RBG Color Charthttp://www.printable.com/clut.html
54© 2001 D & D Enterprises
Colored Tables
<table border="1" bgcolor="#ffff00">
<tr> <th> </th> <th>oranges</th> <th>grapefruit</th></tr><tr> <th>flavor</th> <td>sweet</td> <td>tart</td></tr><tr> <th>size</th> <td>small</td> <td>large</td></tr></table>
IE vs. Netscape Netscape uses the color to paint
the background of every cell in the table
IE paints the cells, borders, and empty cells the background color
Warning: make SURE to test tables with background colors in both browsers!!
Save as: ctable.html
55© 2001 D & D Enterprises
Placing an Image Behind a Table -- Browsers VaryBrowsers Vary!
You can place an image behind a table using the BACKGROUND table attribute
The attribute value is the image URL If the image is larger than the table, it is clippedclipped
to the edges of the table If the image is smaller, it is tiledtiled to fill the table
<table border="1" background="star.gif">
timage.html
56© 2001 D & D Enterprises
Coloring Table Rows
The <TR> tag can have the bgcolor attribute
changes the background color for just one row within your table
Save as crow.html
<table border="1"><tr bgcolor="#ffff00"> <th> </th> <th>oranges</th> <th>grapefruit</th></tr><tr> <th>flavor</th> <td>sweet</td> <td>tart</td></tr><tr> <th>size</th> <td>small</td> <td>large</td></tr></table>
57© 2001 D & D Enterprises
Coloring Table Cells
Ultimate Control: Color each table cell! Use the
bgcolor attribute with any or all of the <TD> and <TH> table tag
Save as: ccell.html
<table border="1"><tr> <th> </th> <th bgcolor="#00ffff">oranges</th> <th
bgcolor="#00ffff">grapefruit</th></tr><tr> <th bgcolor="#008000">flavor</th> <td bgcolor="orange">sweet</td> <td bgcolor="pink">tart</td></tr><tr> <th bgcolor="#008000">size</th> <td bgcolor="orange">small</td> <td bgcolor="pink">large</td></tr></table>
58© 2001 D & D Enterprises
Using Color Well Use color to add to
your message, grab attention
Try not to distract or annoy….
Try this
effective.html
<table width="360” border="1"cellpadding="10” bgcolor="#ffff00">
<tr> <td align=“center”>
<b>make sure you read this notice!</b> </td>
</tr></table>
59© 2001 D & D Enterprises
Table Spans
ROWSPANCOLSPAN
60© 2001 D & D Enterprises
Spanning
As soon as you start building home pages and menus with tables in lieu of the older list and image-map constructs, you will begin to wish you could merge merge adjacent cellsadjacent cells either horizontally or vertically so that the amount of text in a single large cell will not dominate the appearance of the entire table
61© 2001 D & D Enterprises
Spanning HTML 3.0 provides this capability in the form
of COLSPAN and ROWSPAN modifiers to the <td> tag The COLSPAN attribute takes a single numeric
parameter that specifies how many columns the cell will span horizontally, proceeding toward the right
The ROWSPAN attribute for a <td> tag works in an equivalent fashion but specifies how many vertical rows the cell will span, proceeding downward
62© 2001 D & D Enterprises
Web Pub I Review Slide: COLSPAN
A cell can span and stretch across a number of columns
If you want to add a dinner plate to the table arrangement and you want it to span two columns, you'd do that by using the colspan tag
To write this in HTML, simply add another row <tr> to your table and tell the cell to span two columns by adding colspan=2 to your td cell tag
<tr><td colspan="2"></tr>
63© 2001 D & D Enterprises
Web Pub I Review Slide: ROWSPAN
Finish setting the table by adding a wine glass on the left and have it span two rows using the rowspan tag
To do this just add another cell and tell it to span two rows by writing rowspan="2"
<tr rowspan="2">
64© 2001 D & D Enterprises
Spanning
Proper coding of the COLSPAN and ROWSPAN attributes is a bit tricky, especially in the absence of sophisticated HTML editors that could let you design and set up the table visually and then generate the appropriate HTML tags to match
65© 2001 D & D Enterprises
Spanning If you inadvertently specify column-
spanning and row-spanning cells that somehow overlap and conflict, you can get unpredictable results Any additional cells in a row or column
that include a cell with a COLSPAN or ROWSPAN attribute may get pushed get pushed off the edgeoff the edge and disrupt the structure of the table***SO you have been warned***
66© 2001 D & D Enterprises
Table Spanning Commands
Create spanning cells across: rows, columns, or both (rows and columns) Spanning attributes defined for the <td> and
<th> tags COLSPAN creates a cell that spans two or more
columns ROWSPAN creates a cell that spans two or more rows
You can use these attributes together, creating a cell that spans rows and columns simultaneously
Spanning: COLSPAN
<table border="1"><tr> <th></th> <th colspan="2">Fruit</th></tr><tr> <th></th> <th>Oranges</th> <th>Grapefruit</th></tr><tr> <th>Flavor</th> <td>Sweet</td> <td>Tart</td></tr><tr> <th>Size</th> <td>Small</td> <td>Large</td></tr></table>
Notice that the first row of this table has only two cells.
The first cell is empty, lining up with the empty cell in the beginning of the second row.
The next cell has the COLSPAN attribute set to 2, causing it to span the next two cells in the next row.
You can verify this by seeing that the cell containing "Fruit" spans the two cells containing "Orange" and "Grapefruit cspan.html
Spanning: ROWSPAN
We can create a similar row-spanning cell by adding an additional column to the table:
rowspan.html
<table border="1"><tr> <th></th> <th></th> <th colspan=2>Fruit</th></tr><tr> <th></th> <th></th> <th>Oranges</th> <th>Grapefruit</th></tr><tr> <th rowspan="2">Feature</th> <th>Flavor</th> <td>Sweet</td> <td>Tart</td></tr><tr> <th>Size</th> <td>Small</td> <td>Large</td></tr></table>
69© 2001 D & D Enterprises
Rowspans span.html more complicated...
Rowspans create a new column (when we insert a row-spanning cell) and we have to add corresponding cells to every other row, except the rows corresponding to the spanning cell Checking the HTML, we added another blank cell to
the first two header rows, and the spanning cell to the third row
We did not add another cell to the fourth row, since its first cell is actually the spanning cell from the preceding row
The fourth row already has four cells: the first comes from the third row, and the remaining three are explicitly defined
70© 2001 D & D Enterprises
Rowspans span.html more complicated...
You need to be careful when defining tables with multiple spanning rows and columns
Make sure you count columns carefully, ensuring that the right cells line up with the corresponding spanning cells
71© 2001 D & D Enterprises
Span2.html The span.html table has four empty cells in
the upper left corner, corresponding to the two header rows and header columns We specified all four cells explicitly, but could have
used just one cell, spanning both rows and columns If the first cell in the first row were defined as:
<TH COLSPAN="2" ROWSPAN="2"></TH>the cell would span the first two cells of the first
two rows see
span2.html
72© 2001 D & D Enterprises
HTML 4.0 Table Changes
Table Headers and FootersTable Body
Table Rows & GroupsTable Columns & Groups
73© 2001 D & D Enterprises
Table Headers and Footers When tables are printed and broken across
several pages running headers and footers are very useful HTML 4.0 introduces the concept of a table header,
footer, and one or more table body sections Ideally, the browser would repeat the table header and
footer on each page when a table is printed In addition, you can use the groups attribute of the
<table> tag to change the way rules are drawn between the different sections of your table -- we have already looked at this MS IE 4.0 only RULES attribute
74© 2001 D & D Enterprises
<thead>
The <thead> tag defines the table header It contains one or more <tr> tags that
define the rows in the header You can use the ALIGN and VALIGN attributes
with the <thead>tag to control the alignment of content within the header cells, much like you use these tags in the <table> tag to control cell alignment.
75© 2001 D & D Enterprises
<tfoot>
The <tfoot> tag works just like the <thead>, except that it defines the table footer instead of the header The <tr> tags inside the <tfoot> tag
defines the number of rows that make up the table footer
76© 2001 D & D Enterprises
<tbody>
Any rows not in the header or the footer are considered part of the table body You can create multiple sections within
your table body by using the <tbody> tag
Again, you can use the ALIGN and VALIGN tags to control the alignment of the cells within these body sections
77© 2001 D & D Enterprises
Table Row Groups (4.0) Tables may now be grouped into rows consisting of
one table head <thead>, one table foot <tfoot> and one or more table body <tbody> sections Each group must contain at least one row The THEAD and TFOOT should contain information
about the table's columns Their start tags are required, but their end tags may be
omitted In order for browsers to render the foot of the
table before the body, the TFOOT element should appear before the TBODY element in the table
78© 2001 D & D Enterprises
Row Groups (IE OnlyIE Only)<table rules="groups"><thead>...header rows go here<tbody>...rows in the first section go here<tbody>...rows in the second section go here<tbody>...rows in the third section go here<tfoot> ...footer rows go here</table>
theadfoot.html & theadfoot2.html
79© 2001 D & D Enterprises
Table Column Groups
Remember we said that the HTML table model is row-oriented: You create a table as a series of rows,
each of which contains a series of cells. This makes it easy to create row
groups, since you can easily group adjacent <tr> tags to create a group.
80© 2001 D & D Enterprises
Table Column Groups Column grouping is more difficult, since
the corresponding cells that make up a column are spread throughout all the rows in the table
In order to create column groups, you must use special tags to define those groups before you define the rows and cells of your table
You do this with the <colgroup> tag
81© 2001 D & D Enterprises
<colgroup> The <colgroup> tag appears inside the
<table> tag It accepts four attributes:
"align", "valign", "width" and "span" ALIGN and VALIGN are used to specify the content
alignment of the cells in this column group, much like they are used to control general cell alignment when used in other table tags
The WIDTH attribute specifies the width of the cells, either as a percentage of the table or as an absolute number of pixels
82© 2001 D & D Enterprises
<colgroup> cols.html By default, the
<colgroup> tag defines a column group containing just one column
The first tag affects the first column of the table, the second controls the second column, and so forth.
If you wanted all the cells in the first column of your table to be aligned to the right you would use code like this:
<table><colgroup
align="right"></colgroup> ...table rows go here</table>
The above is the same as adding ALIGN=“right” to the first cell of every row in your table
83© 2001 D & D Enterprises
<colgroup> SPAN Column groups can
contain more than one column
You indicate this with the SPAN attribute
If you wanted the first three columns to be right aligned, you simply add span=“3” to the <COLGROUP> tag
You can create multiple column groups by using several <colgroup> tags
<table><colgroup
align="right" span="3">
</colgroup><colgroup span="4"
width="50"></colgroup>...table rows go here</table>
84© 2001 D & D Enterprises
Individual Columns <col> You can use the <colgroup> tag
to handle a range of similar columns
If some columns within the group have to be handled differently you use the <col> tag
The <col> tag lets you control individual columns in a column group
If you have four columns you want to have grouped with a rule around them but the individual columns require different widths and alignment use the <colgroup> tag to group them, and the <col> tag to handle each column
<table rules="groups"><colgroup><col align="left" width="20"><col align="right"
width="10"><col width="35"><col width="35"></colgroup>...other colgroups go here,
followed by table rows
</table>
85© 2001 D & D Enterprises
More on Columns
Tables, as you may have noticed are both complex and tricky. The cool thing about HTML is that there
are always multiple way to achieve the same results.
Type in the code on the next page to see a non-background way to achieve the popular left navigation scheme
86© 2001 D & D Enterprises
Save template.html as leftnav.html
87© 2001 D & D Enterprises
Table Reference Site
c|net builders.com advanced table tips:http://builder.cnet.com/Authoring/AdvHtml/
ss01.html Spend some time at home getting
familiar with table layout options!
88© 2001 D & D Enterprises
Complex Table TricksTable Tricks
NestingIncluding Graphics
89© 2001 D & D Enterprises
Nesting Tables for Effect For a more complex table layout
you can use different colors and shapes Sample will have three tables
top table technoweenie logo graphic to create overlapping squares divide table into
3 columns NOTE: cellpadding and cellspacing must be ”0”
so there is no gap between color spaces Tables with no content can use <br>
90© 2001 D & D Enterprises
Loads in 3.7 seconds with a 28.8 modem
http://www.internetsd.com/courses/html/ntable.html
http://www.internetsd.com/courses/html/ntable2.html
this one has borders turned on
91© 2001 D & D Enterprises
Nested Tables
The larger the table the longer it takes to load Your page won’t show until the final
closing </table> tag is read by the browser
So, try to break tables up into sections Make the first table small so it loads
quickly and the user will have something to see while the rest of the page loads
92© 2001 D & D Enterprises
Nested Tables Nest a complete table within a table Hint: use comments to help yourself keep
track!http://www.internetsd
.com/courses/html2/nested.html http://www.internetsd.com/courses/html2/
commented_tables.html
Not commented: http://downtime.com/new/custquot.htm http://libweb.uoregon.edu/janus.html
93© 2001 D & D Enterprises
Nested Tables
http://campus.fortunecity.com/computing/100/600530.html
http://libweb.uoregon.edu/janus.html
94© 2001 D & D Enterprises
Nest Tables
When creating a nested table, you should first create the outer table and then go back and create the inner table(s) When inserting the inner table, you
create a completely new table afterafter the opening <td> tag
The inner table must be closed before the closing </td> tag of the outer table
95© 2001 D & D Enterprises
Nest Tables
http://libweb.uoregon.edu/janus.html See nested_three.html See colored_nested.html
This is the tip your textbook author is talking about to learn to deconstruct tables!
96© 2001 D & D Enterprises
Tables & Graphics Designers sometimes use workarounds
when displaying big images They cut up the big image and put them in
tables, giving the illusion that the image is loading faster than one huge graphic
Programs such as Macromedia's Fireworks automate this imageslicing but you can do it on a budget!
More info: http://dreamink.com/speed5.shtml
Example: http://www.nu.edu/
97© 2001 D & D Enterprises
More?
Tables Tutorial http://www.pagetutor.com/pagetutor/
tables/index.html
98© 2001 D & D Enterprises
Wow Me Tables Design Ideas for HTML Tables
This is what tables were MEANT to do!!
http://www.botany.hawaii.edu/tables/default.htm Scholarly tables discussion
http://www.sunworld.com/sunworldonline/swol-05-2000/swol-05-webmaster.html
99© 2001 D & D Enterprises
Homework Assignment #1Homework Assignment #1
Table Skills3 Parts
100© 2001 D & D Enterprises
PART 1: Create this table
101© 2001 D & D Enterprises
Part 2: ALSO Create This Table (HARD!!)
102© 2001 D & D Enterprises
Part 3: Open Table Assignment
For the LAST part of your three part tables assignment, create a table that will wow me…!!!
103© 2001 D & D Enterprises
Real Life
Building a Flexible Page Layout Using Tables http://www.jshook.com/flexible_pages/
104© 2001 D & D Enterprises
Next
Forms!