1 Mastering the Internet and HTML Tables and Table Tags.

1

Mastering the Internet and Mastering the Internet and HTMLHTML

Tables and Table Tags

2

OutlineOutline

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

3

GoalGoal

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.

4

ObjectivesObjectives

IntroductionTable layout and designTable structure and variablesTable tagsTable nesting, rendering, and calculations

5

IntroductionIntroduction 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

6

Table structure and variableTable 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)

7

Figure 16.1 Table structure (Cont’d)

8

Figure 16.2 Cell variables

9

Table layout and designTable 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)

10

Figure 16.3 Table layout

11

Table tagsTable 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)

12

Table tagsTable tagsExample 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)

13

Table tagsTable 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)

14

Table tagsTable 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)

15

(Cont’d)

Figure 16.4 Results of the attributes of the <TABLE> tag

16

Table tagsTable tagsExample 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)

17

Table tagsTable 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)

18

Table tagsTable 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)

19

Figure 16.5 Results of the attributes of the <TD> tag

20

Table rendering and Table rendering and calculationscalculations

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)

21

Figure 16.6 Effect of cell content on its design

22

Nesting tablesNesting 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)

23

Nesting tablesNesting tablesExample 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)

24

Nesting tablesNesting 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</TABLE>

(Cont’d)

25

Nesting tablesNesting 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)

26

Figure 16.7 Nesting tables

27

Formatting via tablesFormatting 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)

28

Formatting via tablesFormatting via tables

Example 16.4 Formatting with tables (figures 16.8 and 16.9)

(Cont’d)

Figure 16.8 Layout design

29

Formatting via tablesFormatting 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)

30

Formatting via tablesFormatting via tablesWhat 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)

31

Formatting via tablesFormatting 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)

32

Figure 16.9 Formatting a Web page with tables

33

TutorialsTutorialsTutorial 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)

34

TutorialsTutorials<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>


<TD>00100</TD><TD>Lisa</TD> (Cont’d)

35

TutorialsTutorials<TD>Stones</TD><TD>5329.78</TD>


<TD>00200</TD><TD>Joe</TD><TD>Ellis</TD><TD>25.00</TD>


<TD>00225</TD><TD>Kathy</TD> (Cont’d)

36

TutorialsTutorials<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)

37

Figure 16.10 A table with a horizontal heading

38

TutorialsTutorialsTutorial 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)

39

TutorialsTutorials<TD>00057</TD><TD>00100</TD><TD>00200</TD><TD>00225</TD><TD>00316</TD><TD>00439</TD>


<TH BGCOLOR = "red">First Name</TH><TD>John</TD><TD>Lisa</TD><TD>Joe</TD> (Cont’d)

40

TutorialsTutorials<TD>Kathy</TD><TD>Marilyn</TD><TD ALIGN = "center" VALIGN = "top">Anna</TD>


<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)

41

TutorialsTutorials<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>


42

Figure 16.11 A table with a vertical heading

43

TutorialsTutorialsTutorial 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)

44

TutorialsTutorials<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>


<TH BGCOLOR = "red">Account number</TH><TD>00057</TD><TD>00100</TD> (Cont’d)

45

TutorialsTutorials<TD>00200</TD><TD>00225</TD><TD>00316</TD>


<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>


46

Figure 16.12 A table with dual headings

47

TutorialsTutorialsTutorial 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)

48

TutorialsTutorials<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)

49

TutorialsTutorials<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)

50

TutorialsTutorials<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)

51

TutorialsTutorials<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)

52

Figure 16.13 Formatting a form via tables

53

FAQsFAQsQ: 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)

54

FAQsFAQs

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.

55

SummarySummary– 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 BGCOLOR

56

ExercisesExercises

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)

57

<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)

59

ProblemsProblems

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)

60

<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)

61

<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)

62

<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>


1 Mastering the Internet and HTML Tables and Table Tags.

Documents

Transcript of 1 Mastering the Internet and HTML Tables and Table Tags.