Download - Lect5 Tables
-
8/3/2019 Lect5 Tables
1/23
HTML AND THE INTERNET
TABLES AND TABLE TAGS
GOAL
This lecture covers tables, their use in Web pages,and their tags.
It also covers table layout, structure, design, andnesting.
Using tables to format Web pages is also covered.
2
Lecture6
-Tables
-
8/3/2019 Lect5 Tables
2/23
INTRODUCTION
HTML uses tables in two ways:
the conventional way (tabulate data), and
the new way (to impose structure and format on Webpages)
HTML tables consist of rows which are divided intocells.
Each cell holds its own content (data).
Cell data could be any HTML element
3
Lecture6
-Tables
HOW PAGE FORMATTING WITH TABLES ISACCOMPLISHED
Many HTML editors use tables for formatting whenthey are used to develop Web pages
It is often difficult to follow HTML code of Webpages that are formatted via tables
Tables may have horizontal, vertical, or bothheadings
Table definition tags are either cell-based tags ornon-cell based tags (more definitions on this later)
4
Lecture6
-Tables
-
8/3/2019 Lect5 Tables
3/23
TABLE STRUCTURE AND VARIABLE
Each table has a generic structure (below)consisting of rows, columns, and cells
5
Lecture6
-Tables
NON-CELL TABLE VARIABLES AND DEFINITIONS
Non-cell variables control the table properties andstructure. table caption,
summary,
border,
header,
rows, columns,
width,
height,
cells, and
Rules
6
Lecture6
-Tables
-
8/3/2019 Lect5 Tables
4/23
CELL-BASED VARIABLES AND DEFINITIONS
Cell variables are row span, column span, paddingspacing, and alignment of data within a cell
Other cell variables are the colors of the cellbackground and foreground (its text)
7
Lecture6
-Tables
Lecture6
-Tables
8
Cell spacing -
is the room
between cells
in a table.
Cell padding -
is the amount
of "margin
space" within
the cells in atable.
-
8/3/2019 Lect5 Tables
5/23
TABLE LAYOUT AND DESIGN
The purpose (tabulating data or formatting Webpages) of a table determines its layout and design
A table may have horizontal, vertical, or bothheadings
Tables used for page formatting typically do not useheadings or borders, and their cell sizes differgreatly
9
Lecture6
-Tables
TABLE FORMATTING CONSIDERATIONS
Web authors must bear in mind the different sizesof computer screens while designing tables
A table width and height should be large enough tofit on a computer screen without having to scroll upor down, or left to right
10
Lecture6
-Tables
-
8/3/2019 Lect5 Tables
6/23
Lecture6
-Tables
11
Table layout options
TABLE TAGS
HTML provides tags to create tables and controltheir variables
The table tags are , , ,, and
The tag acts as the container tag for all
the others
12
Lecture6
-Tables
-
8/3/2019 Lect5 Tables
7/23
COMMON TABLE TAG ATTRIBUTES
Common attributes of the tag are
SUMMARY,
WIDTH(in pixels or screen percentage),
HEIGHT (in pixels or screen percentage),
BORDER (in pixels),
ALIGN (Left, Right, Center),
CELLSPACING (in pixels), and
CELLPADDING (in pixels)
13
Lecture6
-Tables
TABLE ROW DEFINITIONS ( TAGS
The attributes of the tag are
ALIGN (Left, Right, Center)
VALIGN (Top, Bottom, Middle)
14
Lecture6
-Tables
-
8/3/2019 Lect5 Tables
8/23
TABLE CELL ATTRIBUTES
- Table Heading and - Table Data tagshave the same attribute sets.
Both are used to define the content of a single cellof data in the table.
Common attributes include: ROWSPAN,
COLSPAN,
CELLPADDING,
NOWRAP,
ALIGN, and VALIGN
15
Lecture6
-Tables
TABLE TAGS - EXAMPLE TABLE #1
16
Lecture6
-Tables
This table uses no border
Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
Note - No Borders defined
-
8/3/2019 Lect5 Tables
9/23
Lecture6
-Tables
17
Table #1
TABLE TAGS - TABLE #2
18
Lecture6
-Tables
This table has a border that is 4pixels thick
Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
-
8/3/2019 Lect5 Tables
10/23
1
Lecture6
-Tables
19
Table #2
TABLE TAGS - TABLE #3
20
Lecture6
-Tables
This table has a width of 200pixels, a height of 100 pixels, and a border that is 4 pixelsthick
Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
-
8/3/2019 Lect5 Tables
11/23
Lecture6
-Tables
21
Table #3
TABLE TAGS - TABLE #4
22
Lecture6
-Tables
This table has a width of 200 pixels, a height of 100 pixels, a borderthat is 4 pixels thick, and cell spacing of 8 pixels
Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
-
8/3/2019 Lect5 Tables
12/23
1
Lecture6
-Tables
23
Table #4
TABLE TAGS - TABLE #5
24
Lecture6
-Tables
This table uses equal size
cells
Cell 1Cell 2Cell 3Cell 4Cell 5Cell 6Cell 7Cell 8
Cell 9Cell 10Cell 11Cell 12
-
8/3/2019 Lect5 Tables
13/23
1
Lecture6
-Tables
25
Table #5
TABLE TAGS - TABLE #6
26
Lecture6
-Tables
This table uses cell 5 that spanstwo rows and three columns
Cell 1Cell 2Cell 3Cell 4
Cell 5Cell 6Cell 7Cell 8
Cell 9Cell 10Cell 11Cell 12
-
8/3/2019 Lect5 Tables
14/23
1
Lecture6
-Tables
27
Table #6
Note the empty
locations in the
table since
there weren'tany cells
defined for this
location.
TABLE TAGS - TABLE #7
28
Lecture6
-Tables
This table uses cell 5 that spans two rowsand three columns. The table also has a width of 200 pixels, a height of 100pixels, and cell spacing of 8 pixels
Cell 1Cell 2Cell 3Cell 4
Cell 5
Cell 6 Cell 7Cell 8
Cell 9Cell 10Cell 11Cell 12
Note - absolute pixel counts for table size
-
8/3/2019 Lect5 Tables
15/23
1
Lecture6
-Tables
29
Table #7
TABLE RENDERING AND CALCULATIONS
Browsers use all table, cell and non-cell, variables tocalculate cell sizes.
They must resolve any conflict they find between thesevariables
Each cell must be large enough to hold its content
Browsers perform the following calculations, using tablevariables, to render tables Calculate table width and height
Calculate the number of columns in a table
Calculate the size of a table cell
Calculate cell spacing and padding
Determine inheritance of alignment specifications30
Lecture6
-Tables
-
8/3/2019 Lect5 Tables
16/23
1
IMPACT OF CELL CONTENT ON CELL SIZES
31
Lecture6
-Tables
NESTING TABLES
Web authors may nest tables to achieve certaindesign goals of their Web pages
Table nesting makes HTML code quite complex anddifficult to follow
HTML nests tables at the cell level. Web authors
can create an entire table inside a cell of anothertable.
Nesting tables may produce awkward results
32
Lecture6
-Tables
-
8/3/2019 Lect5 Tables
17/23
1
NESTING TABLES - TABLE #8
33
Lecture6
-Tables
Cell 2 is an entire table
Cell 1Nested table
T21T22T23
Cell 3Cell 4
Cell 5Cell 6Cell 7Cell 8
Cell 9Cell 10Cell 11Cell 12
Note that the entire table
definition occurs within
the open and close tags
for the table cell.
Lecture6
-Tables
34
Table #8
-
8/3/2019 Lect5 Tables
18/23
1
NESTING TABLES - TABLE #9
35
Lecture6
-Tables
Cell 7 is an entire table
Cell 1Cell 2Cell 3Cell 4
Cell 5Cell 6
T21T22T23
Cell 8
Cell 9Cell 10Cell 11Cell 12
Lecture6
-Tables
36
Table #9
-
8/3/2019 Lect5 Tables
19/23
1
FORMATTING VIA TABLES
One common use of tables in HTML is to formatWeb pages
Formatting Web pages with tables is based on thesame idea as nesting tables;
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 independentscreen that can hold any HTML content includinga full Web page
37
Lecture6
-Tables
FORMATTING VIA TABLESSAMPLE LAYOUT PLAN
38
Lecture6
-Tables
-
8/3/2019 Lect5 Tables
20/23
2
FORMATTING VIA TABLES
39
Lecture6
-Tables
What to eat for a midnight snack?
Pizza
Nachos
Ice cream
Pretzels
Continued on next page
FORMATTING VIA TABLES
40
Lecture6
-Tables
Here are some Web sites to visit
Check latest NU offerings
Prentice Hall latest books
Various types of tables
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.
-
8/3/2019 Lect5 Tables
21/23
2
Lecture6
-Tables
41
Resulting
table layout
FAQS
Q: Does the tag replace the SUMMARYattribute of the tag?
A: No. The tag provides a very brief, one-statement description of a table. The SUMMARY attribute ofthe tag provides much more information about the
table structure and purpose, to help disabled Web surfers tounderstand the table.
42
Lecture6
-Tables
-
8/3/2019 Lect5 Tables
22/23
2
FAQS
Q: What is a good way to debug HTML code while usingtables to format Web pages?
A: Use the BORDER attribute of the tag to get anidea of how the browser is creating the table rows, columns,and cells that you have designed. These borders should helpyou immensely in deciding what to change to finalize theformatting. Once you like the final layout of the page, you canthen simply remove the BORDER attribute.
43
Lecture6
-Tables
SUMMARY
HTML tables can be used to tabulate data or toformat Web pages
A table consists of rows. Each row is divided intocells (columns)
A table has non-cell (control table structure andlayout) and cell variables (control cell layout)
Non-cell variables are caption, summary, border,header, rows, width, height, cells, and rules
44
Lecture6
-Tables
-
8/3/2019 Lect5 Tables
23/23
SUMMARY - CONTINUED
Cell variables are row span, column span, padding,spacing, and alignment
Table tags are , , ,, and
The attributes of the tag are SUMMARY,WIDTH, HEIGHT, BORDER, ALIGN, FRAME,CELLSPACING, and CELLPADDING
The attributes of the and tags areABBR, AXIS, HEADERS, SCOPE, ROWSPAN,
COLSPAN, NOWRAP, WIDTH, HEIGHT, ALIGN,VALIGN, CELLPADDING, and BGCOLOR
45
Lecture6
-Tables