Download TD - Brian Whitworth

Document related concepts
no text concepts found
Transcript
Mastering the Internet and
HTML
Tables and Table Tags
1
Outline






Goal
Objectives
Introduction
Table structure and
variables
Table layout and
design
Table tags







Table rendering and
calculations
Nesting tables
Formatting via tables
Tutorials
FAQs
Summary
Exercises/Homework
2
Goal
This chapter covers tables, their use in
Web pages, and their tags. It also covers
table layout, structure, design, and nesting.
Using tables to format Web pages is also
covered.
3
Objectives

Introduction
 Table layout and design
 Table structure and variables
 Table tags
 Table nesting, rendering, and calculations
4
Introduction





HTML uses tables in two ways: the conventional
way (tabulate data), and the new way (format Web
pages)
HTML tables consist f rows which are divided into
cells. Each cell holds its own content (data). Cell
data could be any HTML element
HTML editors use tables for formatting when they
are used to develop Web pages
It is hard to follow HTML code of Web pages that
are formatted via tables
Tables may have horizontal, vertical, or both
headings
5
Table structure and variable





Each table has a generic structure (figure 16.1)
consisting of rows, columns, and cells
HTML table variables are grouped into two groups:
non-cell, and cell
Non-cell variables control the table properties and
structure. They are table caption, summary, border,
header, rows, columns, width, height, cells, and rules
(figure 16.1)
Cell variables are row span, column span, padding
spacing, and alignment of data within a cell (figure
16.2)
Other cell variables are the colors of the cell
background and foreground (its text)
(Cont’d)
6
Figure 16.1 Table structure
(Cont’d)
7
Figure 16.2 Cell variables
8
Table layout and design





The purpose (tabulating data or formatting Web
pages) of a table determines its layout and design
A table may have horizontal, vertical, or both
headings (figure 16.3)
Tables used for formatting do not use headings or
borders, and their cell sizes differ greatly
Web authors must bear in mind the different sizes of
computer screens while designing tables
A table width and height should be large enough to
fit on a computer screen without having to scroll up
or down, or left to right
(Cont’d)
9
Figure 16.3 Table layout
10
Table tags






HTML provides tags to create tables and control their
variables
The table tags are <TABLE>, <CAPTION>, <TR>, <TH>,
and <TD>
The <TABLE> tag acts as the container tag for all the others
The attributes of the <TABLE> tag are SUMMARY,
WIDTH, HEIGHT, BORDER, ALIGN, FRAME, RULES,
CELLSPACING, and CELLPADDING
The attributes of the <TR> tag are ALIGN, VALIGN
The attributes of the <TH> and <TD> tags are ROWSPAN,
COLSPAN, CELLPADDING, ABBR, AXIS, HEADERS,
SCOPE, NOWRAP, ALIGN, and VALIGN
(Cont’d)
11
Table tags

Example 16.1 Use of tables (figures 16.4)
<HTML>
<HEAD>
<TITLE>A Web page with tables</TITLE>
</HEAD>
<BODY>
<FONT COLOR = "red"><CENTER>This table uses no
border</CENTER></FONT>
<TABLE ALIGN = "center">
<TR><TD>Cell 1<TD>Cell 2<TD>Cell 3
<TR><TD>Cell 4<TD>Cell 5<TD>Cell 6
</TABLE>
<P>
(Cont’d)
12
Table tags
<FONT COLOR = "red"><CENTER>This table has a border that is 4
pixels thick<CENTER></FONT>
<TABLE ALIGN = "center" BORDER = 4>
<TR><TD>Cell 1<TD>Cell 2<TD>Cell 3
<TR><TD>Cell 4<TD>Cell 5<TD>Cell 6
</TABLE><P>
<FONT COLOR = "red"><CENTER>This table has a width of 200
pixels, a height of 100 pixels, and a border that is 4 pixels
thick<CENTER></FONT>
<TABLE ALIGN = "center" BORDER = 4 WIDTH = 200 HEIGHT =
100>
<TR><TD>Cell 1<TD>Cell 2<TD>Cell 3
<TR><TD>Cell 4<TD>Cell 5<TD>Cell 6
</TABLE><P>
(Cont’d)
13
Table tags
<FONT COLOR = "red"><CENTER>This table has a
width of 200 pixels, a height of 100 pixels, a border that
is 4 pixels thick, and cell spacing of 8
pixels<CENTER></FONT>
<TABLE ALIGN = "center" BORDER = 4 WIDTH =
200 HEIGHT = 100 CELLSPACING = 8>
<TR><TD>Cell 1<TD>Cell 2<TD>Cell 3
<TR><TD>Cell 4<TD>Cell 5<TD>Cell 6
</TABLE>
</BODY>
</HTML>
(Cont’d)
14
Figure 16.4 Results of
the attributes of the
<TABLE> tag
(Cont’d)
15
Table tags

Example 16.2 Use of variable-size table cells (figure
16.5)
<HTML>
<HEAD>
<TITLE>A Web page with variable-size table cells</TITLE>
</HEAD>
<BODY>
<FONT COLOR = "red"><CENTER>This table uses equal size
cells<CENTER></FONT>
<TABLE ALIGN = "center" BORDER = 4>
<TR><TD>Cell 1<TD>Cell 2<TD>Cell 3<TD>Cell 4
<TR><TD>Cell 5<TD>Cell 6<TD>Cell 7<TD>Cell 8
<TR><TD>Cell 9<TD>Cell 10<TD>Cell 11<TD>Cell 12
</TABLE>
(Cont’d)
16
Table tags
<P>
<FONT COLOR = "red"><CENTER>This table uses cell 5 that spans
two rows and three columns<CENTER></FONT>
<TABLE ALIGN = "center" BORDER = 4>
<TR><TD>Cell 1<TD>Cell 2<TD>Cell 3<TD>Cell 4
<TR><TD ROWSPAN = 2 COLSPAN = 3 ALIGN = "center">Cell 5
<TD>Cell 6<TD>Cell 7<TD>Cell 8
<TR><TD>Cell 9<TD>Cell 10<TD>Cell 11<TD>Cell 12
</TABLE>
<P>
<FONT COLOR = "red"><CENTER>This table uses cell 5 that spans
two rows and three columns. The table also has a width of 200 pixels,
a height of 100 pixels, and cell spacing of 8
pixels<CENTER></FONT>
(Cont’d)
17
Table tags
<TABLE ALIGN = "center" BORDER = 4 WIDTH
= 200 HEIGHT = 100 CELLSPACING = 8>
<TR> <TD>Cell 1<TD>Cell 2<TD>Cell 3<TD>Cell
4
<TR><TD ROWSPAN = 2 COLSPAN = 3 ALIGN
= "center">Cell 5<TD>Cell 6<TD>Cell 7<TD>Cell
8
<TR><TD>Cell 9<TD>Cell 10<TD>Cell 11
<TD>Cell 12
</TABLE>
</BODY></HTML>
(Cont’d)
18
Figure 16.5 Results
of the attributes of
the <TD> tag
19
Table rendering and
calculations

Browsers use all table, cell and non-cell, variables to
calculate cell sizes. They resolve any conflict they find
between these variables
 Each cell must be large enough to hold its content
 Browsers perform the following calculations, using table
variables, to render tables
–
–
–
–
–
Calculate table width and height
Calculate the number of columns in a table
Calculate the size of a table cell (figure 16.6)
Calculate cell spacing and padding
Determine inheritance of alignment specifications (Cont’d)
20
Figure 16.6 Effect of cell content on its design
21
Nesting tables

Web authors may nest tables to achieve
certain design goals of their Web pages
 Table nesting makes HTML code quite
complex and difficult to follow
 HTML nests tables at the cell level. Web
authors can create an entire table inside a cell
of another table.
 Nesting tables may produce awkward results
(Cont’d)
22
Nesting tables

Example 16.3 Use of nested tables (figure 16.7)
<HTML>
<HEAD>
<TITLE>A Web page with nested tables</TITLE>
</HEAD>
<BODY>
<FONT COLOR = "red"><CENTER>Cell 2 is an entire
table</CENTER></FONT>
<TABLE ALIGN = "center" BORDER = 4>
<TR><TD>Cell 1<TD>Nested table
<TABLE ROWS =2 COLS = 3>
<TR><TD>T21<TD>T22<TD>T23
</TABLE>
(Cont’d)
23
Nesting tables
<TD>Cell 3<TD>Cell 4
<TR><TD>Cell 5<TD>Cell 6<TD>Cell 7<TD>Cell 8
<TR><TD>Cell 9<TD>Cell 10<TD>Cell 11<TD>Cell 12
</TABLE>
<FONT COLOR = "red"><CENTER>Cell 7 is an entire
table<CENTER></FONT>
<TABLE ALIGN = "center" BORDER = 4 CELLSPACING = 10%>
<TR><TD>Cell 1<TD>Cell 2<TD>Cell 3<TD>Cell 4
<TR><TD ROWSPAN = 2 COLSPAN = 3>Cell 5<TD>Cell 6<TD>
<TABLE ROWS =2 COLS = 3 BORDER = 5>
<TR><TD>T21<TD>T22<TD>T23
</TABLE>
<TD>Cell 8
<TR><TD>Cell 9<TD>Cell 10<TD>Cell 11<TD>Cell 12 (Cont’d)
24
</TABLE>
Nesting tables
<FONT COLOR = "red"><CENTER>Cell 11 is an entire
table<CENTER></FONT>
<TABLE ALIGN = "center" BORDER = 4 WIDTH = 200 HEIGHT
= 100 CELLSPACING = 10>
<TR><TD>Cell 1<TD>Cell 2<TD>Cell 3<TD>Cell 4
<TR><TD ALIGN = "center" ROWSPAN = 2 COLSPAN = 3>Cell
5<TD>Cell 6<TD>Cell 7<TD>Cell 8
<TR><TD>Cell 9<TD>Cell 10<TD>
<TABLE ROWS = 2 COLS = 3 BORDER = 5>
<TR><TD>T21<TD>T22<TD>T23
</TABLE>
<TD>Cell 12
</TABLE>
</BODY></HTML>
(Cont’d)
25
Figure 16.7 Nesting tables
26
Formatting via tables

The ultimate goal of using tables in HTML is to
format Web pages
 Formatting Web pages with tables is based on the
same idea as nesting tables; i.e. formatting is
achieved at the cell level. Web authors can create
an entire Web page inside a table cell.
 Each table cell can be viewed as an independent
screen that can hold any HTML content including
a full Web page
(Cont’d)
27
Formatting via tables
 Example
16.4 Formatting with tables (figures
16.8 and 16.9)
Figure 16.8
Layout
design
(Cont’d)
28
Formatting via tables
<HTML>
<HEAD>
<TITLE>Formatting a Web page with tables</TITLE>
</HEAD>
<BODY>
<TABLE ALIGN = "center" BORDER = 0>
<TR VALIGN = "top">
<TD BGCOLOR = "yellow">
<IMG SRC = "myImage.gif">
</TD>
<TD BGCOLOR = "green">
(Cont’d)
29
Formatting via tables
What to eat for a midnight snack?
<UL>
<LI>Pizza
<LI>Nachos
<LI>Ice cream
<LI>Pretzels
</TD>
</TR>
<TR VALIGN = "top">
<TD BGCOLOR = "gray">
Here are some Web sites to visit
(Cont’d)
30
Formatting via tables
<A HREF = "http://www.neu.edu">Check latest NU
offerings<BR>
<A HREF = "http://www.prenhall.com">Prentice Hall latest
books<BR>
<A HREF = "example16.1.html">Various types of tables
</TD>
<TD BGCOLOR = "purple">It is once said that physical
fitness and exercises are very important to maintain a
healthy life. We all must eat well balanced meals, work out
at least three times a week, 45 minutes each time.
</TD>
</TABLE>
</BODY></HTML>
(Cont’d)
31
Figure 16.9 Formatting a Web page with tables
32
Tutorials

Tutorial 16.8.1 A table with a horizontal heading
(figure 16.10)
<HTML>
<HEAD>
<TITLE>A Web page with horizontal heading</TITLE>
</HEAD>
<BODY>
<TABLE BORDER = 5 ALIGN = "center">
<CAPTION><FONT COLOR = "blue"><H2>Customer
information of a bank</H2></FONT></CAPTION>
<TR BGCOLOR = "red">
<TH>Account Number</TH>
<TH>First Name</TH>
(Cont’d) 33
Tutorials
<TH>Last Name</TH>
<TH>Account Balance</TH>
</TR>
<TR BGCOLOR = "yellow">
<TD>00057</TD>
<TD>John</TD>
<TD>Doe</TD>
<TD>1234.56</TD>
</TR>
<TR BGCOLOR = "yellow">
<TD>00100</TD>
<TD>Lisa</TD>
(Cont’d)
34
Tutorials
<TD>Stones</TD>
<TD>5329.78</TD>
</TR>
<TR BGCOLOR = "yellow">
<TD>00200</TD>
<TD>Joe</TD>
<TD>Ellis</TD>
<TD>25.00</TD>
</TR>
<TR BGCOLOR = "yellow">
<TD>00225</TD>
<TD>Kathy</TD>
(Cont’d)
35
Tutorials
<TD>Doherty</TD>
<TD>10258.94</TD></TR>
<TR BGCOLOR = "yellow" ALIGN = "center">
<TD>00316</TD>
<TD>Marilyn</TD>
<TD>Walsh</TD>
<TD>359.37</TD></TR>
<TR BGCOLOR = "yellow" ALIGN = "right">
<TD>00439</TD>
<TD>Anna</TD>
<TD>Clinton</TD><TD>2483.33</TD>
</TR></TABLE></BODY></HTML>
(Cont’d)
36
Figure 16.10 A table with a horizontal heading
37
Tutorials

Tutorial 16.8.2 A table with a vertical heading
(figure 16.11)
<HTML>
<HEAD>
<TITLE>A Web page with vertical heading</TITLE>
</HEAD>
<BODY>
<TABLE BORDER = 5 ALIGN = "center">
<CAPTION><FONT COLOR = "blue"><H2>Customer
information of a bank</H2></FONT></CAPTION>
<TR BGCOLOR = "yellow">
<TH BGCOLOR = "red">Account Number</TH> (Cont’d)
38
Tutorials
<TD>00057</TD>
<TD>00100</TD>
<TD>00200</TD>
<TD>00225</TD>
<TD>00316</TD>
<TD>00439</TD>
</TR>
<TR BGCOLOR = "yellow">
<TH BGCOLOR = "red">First Name</TH>
<TD>John</TD>
<TD>Lisa</TD>
<TD>Joe</TD>
(Cont’d)
39
Tutorials
<TD>Kathy</TD>
<TD>Marilyn</TD>
<TD ALIGN = "center" VALIGN = "top">Anna</TD>
</TR>
<TR BGCOLOR = "yellow">
<TH BGCOLOR = "red">Last Name</TH>
<TD>Doe</TD>
<TD>Stones</TD>
<TD>Ellis</TD>
<TD>Doherty</TD><TD>Walsh</TD>
<TD ALIGN="right“ VALIGN = "bottom">Clinton</TD>
</TR>
(Cont’d)
40
Tutorials
<TR BGCOLOR = "yellow">
<TH BGCOLOR = "red">Account Balance</TH>
<TD>1234.56</TD>
<TD>5329.78</TD>
<TD>25.00</TD>
<TD>10258.94</TD>
<TD>359.37</TD>
<TD>2483.33</TD>
</TR>
</TABLE>
</BODY>
</HTML>
(Cont’d)
41
Figure 16.11 A table with a vertical heading
42
Tutorials

Tutorial 16.8.3 A table with dual headings (figure
6.12)
<HTML><HEAD>
<TITLE>A Web page with dual heading</TITLE>
</HEAD>
<BODY>
<TABLE BORDER = 5 ALIGN = "center">
<CAPTION><FONT COLOR = "blue"><H2>Customer
information of a bank</H2></FONT></CAPTION>
<TR><TD></TD>
<TH BGCOLOR = "red“ COLSPAN = 6>Customer
name</TH></TR>
(Cont’d)
43
Tutorials
<TR BGCOLOR = "yellow">
<TD BGCOLOR = "white"></TD>
<TD>John Doe</TD>
<TD>Lisa Stones</TD>
<TD>Joe Ellis</TD>
<TD>Kathy Doherty</TD>
<TD>Marilyn Walsh</TD>
</TR>
<TR BGCOLOR = "yellow">
<TH BGCOLOR = "red">Account number</TH>
<TD>00057</TD>
<TD>00100</TD>
(Cont’d)
44
Tutorials
<TD>00200</TD>
<TD>00225</TD>
<TD>00316</TD>
</TR>
<TR BGCOLOR = "yellow">
<TH BGCOLOR = "red">Account balance</TH>
<TD>1234.56</TD>
<TD>5329.78</TD>
<TD>25.00</TD>
<TD>10258.94</TD>
<TD>359.37</TD>
</TR></TABLE></BODY></HTML>
(Cont’d)
45
Figure 16.12 A table with dual headings
46
Tutorials

Tutorial 16.8.4 Formatting a form via a table
(figure 6.13)
<HTML>
<HEAD>
<TITLE>Formatting a form via tables</TITLE>
</HEAD>
<BODY>
<TABLE ALIGN = "center">
<CAPTION><FONT COLOR = "blue"><H2>Please fill
this survey form</H2></FONT></CAPTION>
(Cont’d)
47
Tutorials
<FORM>
<TR>
<TD>First Name:</TD><TD><INPUT TYPE = "text"
NAME = "first" SIZE = 10 MAXLENGTH = 15></TD>
<TD>MI:</TD><TD><INPUT TYPE = "text" NAME =
"mi" SIZE = 1></TD>
<TD>Last Name:</TD><TD><INPUT TYPE = "text"
NAME = "last" SIZE = 10 MAXLENGTH = 18></TD>
</TR>
<TR>
<TD>City:</TD><TD><INPUT TYPE = "text" NAME =
"city" SIZE = 10 MAXLENGTH = 13></TD> (Cont’d)
48
Tutorials
<TD>State:</TD><TD><INPUT TYPE = "text" NAME =
"state" SIZE = 2></TD>
<TD>Zip code:</TD><TD><INPUT TYPE = "text"
NAME = "code" SIZE = 5></TD>
</TR>
<TR>
<TD COLSPAN = 2>Choose a sport:</TD>
</TR>
<TR>
<TD COLSPAN = 4>Basketball:<INPUT TYPE =
"checkbox" CHECKED> Football:<INPUT TYPE =
"checkbox">Hockey:<INPUT TYPE =
"checkbox"></TD></TR>
(Cont’d)
49
Tutorials
<TR>
<TD COLSPAN = 2>Choose a year:</TD>
</TR>
<TR>
<TD COLSPAN = 6>Freshman:<INPUT TYPE = "radio"
NAME = "year" CHECKED> Sophomore:<INPUT TYPE
= "radio">Junior:<INPUT TYPE = "radio" NAME =
"year">Senior:<INPUT TYPE = "radio" NAME =
"year"></TD>
</TR>
<TR>
<TD COLSPAN = 3>Choose your favorite junk food:</TD>
</TR>
(Cont’d)
50
Tutorials
<TR>
<TD><SELECT MULTIPLE>
<OPTION>Chips<OPTION>Pizza<OPTION>Nachos
</SELECT></TD>
</TR><TR>
<TD COLSPAN = 5><TEXTAREA ROWS = 5 COLS = 15
WRAP = "soft">Please let us know your
comments</TEXTAREA></TD>
</TR><TR>
<TD><INPUT TYPE = "submit" VALUE = "Send
it"></TD>
<TD><INPUT TYPE = "reset" VALUE = "Clear it"></TD>
</TR></TABLE></BODY></HTML>
(Cont’d)
51
Figure 16.13 Formatting a form via tables
52
FAQs

Q: Does the <CAPTION> tag replace the
SUMMARY attribute of the <TABLE> tag?
– A: No. The <CAPTION> tag provides a very
brief, one-statement description of a table. The
SUMMARY attribute of the <TABLE> tag
provides much more information about the
table structure and purpose, to help disabled
Web surfers to understand the table.
(Cont’d)
53
FAQs

Q: What is a good way to debug HTML code
while using tables to format Web pages?
– A: Use the BORDER attribute of the <TABLE>
tag to get an idea of how the browser is creating
the table rows, columns, and cells that you have
designed. These borders should help you
immensely in deciding what to change to finalize
the formatting. Once you like the final layout of
the page, simply remove the BORDER attribute.
54
Summary
– HTML tables can be used to tabulate data or to format Web pages
– A table consists of rows. Each row is divided into cells (columns)
– A table has non-cell (control table structure and layout) and cell
–
–
–
–
–
variables (control cell layout)
Non-cell variables are caption, summary, border, header, rows,
width, height, cells, and rules
Cell variables are row span, column span, padding, spacing, and
alignment
Table tags are <TABLE>, <CAPTION>, <TH>, <TR>, and <TD>
The attributes of the <TABLE> tag are SUMMARY, WIDTH,
HEIGHT, BORDER, ALIGN, FRAME, CELLSPACING, and
CELLPADDING
The attributes of the <TH> and <TD> tags are ABBR, AXIS,
HEADERS, SCOPE, ROWSPAN, COLSPAN, NOWRAP,
WIDTH, HEIGHT, ALIGN, VALIGN, CELLPADDING, and
55
BGCOLOR
Exercises

Problem 16.1. Create the table shown in
figure 16.1
– Solution strategy: Follow example 16.1.
Use a text editor to write and debug the
HTML code. Use a browser to display
the results
(Cont’d)
56
<HTML>
<HEAD>
<TITLE>A Web page with a table</TITLE>
</HEAD>
<BODY>
<FONT COLOR = "red"><CENTER>Table 1: This a
caption</CENTER></FONT>
<TABLE ALIGN = "center" BORDER>
<TR><TD>Cell (1,1)<TD>Cell (1, 2)<TD>Cell (1, 3)
<TR><TD>Cell (2,1)<TD>Cell (2, 2)<TD>Cell (2, 3)
<TR><TD>Cell (3,1)<TD>Cell (3, 2)<TD>Cell (3, 3)
<TR><TD>Cell (4,1)<TD>Cell (4, 2)<TD>Cell (4, 3)
<TR><TD>Cell (5,1)<TD>Cell (5, 2)<TD>Cell (5, 3)
</TABLE></BODY></HTML>
(Cont’d)
57
58
Problems

Problem 16.16. Create the dual-heading
table shown in figure 16.17
– Solution strategy: Use a text editor to
write the HTML code. Use a browser to
test it
(Cont’d)
59
<HTML>
<HEAD>
<TITLE>Exercise 9</TITLE>
</HEAD>
<BODY>
<TABLE ALIGN = "center" BORDER = "2">
<TR>
<TH>Course Number</TH>
<TH>Course Name</TH>
<TH>Grad./Undergrad.</TH>
<TH>Term Offered</TH>
</TR>
(Cont’d)
60
<TR><TH>CHE3600</TH>
<TD>Polymer Science</TD>
<TD>Graduate</TD>
<TD>Every Fall</TD>
</TR>
<TR>
<TH>CIV3410</TH>
<TD>Solid Mech. I</TD>
<TD>Graduate</TD>
<TD>Every Fall</TD>
</TR>
<TR>
<TH>ECE3454</TH>
<TD>Graph Theory</TD>
(Cont’d)
61
<TD>Graduate</TD>
<TD>Every Spring</TD>
</TR><TR>
<TH>MIM3350</TH>
<TD>CAD/CAM</TD>
<TD>Graduate</TD>
<TD>Every Winter</TD>
</TR><TR>
<TH>MIM1430</TH>
<TD>Manufacturing</TD>
<TD>Undergrad.</TD>
<TD>Every Spring</TD>
</TR></TABLE></BODY></HTML>
(Cont’d)
62
63