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


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


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


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.


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


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


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


Note - No Borders defined


9/23

Lecture6

-Tables

17

Table #1

TABLE TAGS - TABLE #2

18

Lecture6

-Tables

This table has a border that is 4pixels thick




10/23

1

Lecture6

-Tables

19

Table #2


20

Lecture6

-Tables

This table has a width of 200pixels, a height of 100 pixels, and a border that is 4 pixelsthick




11/23

Lecture6

-Tables

21

Table #3


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




12/23

1

Lecture6

-Tables

23

Table #4


24

Lecture6

-Tables

This table uses equal size

cells
Cell 1Cell 2Cell 3Cell 4




13/23

1

Lecture6

-Tables

25

Table #5


26

Lecture6

-Tables

This table uses cell 5 that spanstwo rows and three columns





14/23

1

Lecture6

-Tables

27

Table #6

Note the empty

locations in the

table since

there weren'tany cells

defined for this

location.


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 5

Cell 6 Cell 7Cell 8


Note - absolute pixel counts for table size


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


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


17/23

1

NESTING TABLES - TABLE #8

33

Lecture6

-Tables

Cell 2 is an entire table

Cell 1Nested table

T21T22T23

Cell 3Cell 4



Note that the entire table

definition occurs within

the open and close tags

for the table cell.

Lecture6

-Tables

34

Table #8


18/23

1

NESTING TABLES - TABLE #9

35

Lecture6

-Tables

Cell 7 is an entire table


Cell 5Cell 6

T21T22T23

Cell 8


Lecture6

-Tables

36

Table #9


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


20/23

2


39

Lecture6

-Tables

What to eat for a midnight snack?

Pizza

Nachos

Ice cream

Pretzels

Continued on next page


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.


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


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


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

Date post:	06-Apr-2018
Category:	Documents
Upload:	rachel-relucio
View:	228 times
Download:	0 times

Lect5 Tables

Documents