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, and nesting. Using tables to format Web pages is also covered.

Lecture 6 - Tables

INTRODUCTION

HTML uses tables in two ways:

the conventional way (tabulate data), and the new way (to impose structure and format on Web pages)

Lecture 6 - Tables

HTML tables consist of rows which are divided into cells.

Each cell holds its own content (data). Cell data could be any HTML element

HOW PAGE FORMATTING WITH TABLES IS

ACCOMPLISHED

Many HTML editors use tables for formatting when they are used to develop Web pages It is often difficult to follow HTML code of Web pages that are formatted via tables Tables may have horizontal, vertical, or both headings Table definition tags are either cell-based tags or non-cell based tags (more definitions on this later)

Lecture 6 - Tables

TABLE STRUCTURE AND VARIABLE

Each table has a generic structure (below) consisting of rows, columns, and cells
Lecture 6 - Tables

NON-CELL TABLE VARIABLES AND DEFINITIONS

Non-cell variables control the table properties and structure.

table caption, summary, border, header, rows, columns, width, height, cells, and Rules
6

Lecture 6 - Tables

CELL-BASED VARIABLES AND DEFINITIONS

Cell variables are row span, column span, padding spacing, and alignment of data within a cell Other cell variables are the colors of the cell background and foreground (its text)

Lecture 6 - Tables

Cell spacing is the room between cells in a table. Cell padding is the amount of "margin space" within the cells in a table.
Lecture 6 - Tables

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 Tables used for page formatting typically do not use headings or borders, and their cell sizes differ greatly

Lecture 6 - Tables

TABLE FORMATTING CONSIDERATIONS

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

10

Lecture 6 - Tables

Table layout options

11

Lecture 6 - Tables

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

12

Lecture 6 - Tables

COMMON TABLE TAG ATTRIBUTES

Common attributes of the <TABLE> 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

Lecture 6 - Tables

TABLE ROW DEFINITIONS ( <TR> TAGS

The attributes of the <TR> tag are

ALIGN (Left, Right, Center) VALIGN (Top, Bottom, Middle)

14

Lecture 6 - Tables

TABLE CELL ATTRIBUTES

<TH> - Table Heading and <TD> - Table Data tags have the same attribute sets. Both are used to define the content of a single cell of data in the table. Common attributes include:

Lecture 6 - Tables

ROWSPAN, COLSPAN, CELLPADDING, NOWRAP, ALIGN, and VALIGN

15

TABLE TAGS - EXAMPLE TABLE #1

<FONT COLOR = "red"><CENTER> This table uses no border</CENTER></FONT> <P> <TABLE ALIGN = "center"> Note - No Borders <TR> <TD>Cell 1 </TD> <TD> Cell 2 </TD> <TD>Cell 3 </TD> </TR> <TR> <TD>Cell 4 </TD> <TD>Cell 5 </TD> <TD>Cell 6 </TD> </TR> </TABLE> </P>

defined

16

Lecture 6 - Tables

Table #1

17

Lecture 6 - Tables

TABLE TAGS - TABLE #2

<P> <FONT COLOR = "red"><CENTER>This table has a border that is 4 pixels thick</CENTER></FONT><BR> <TABLE ALIGN = "center" BORDER = 4> <TR> <TD>Cell 1 </TD> <TD>Cell 2 </TD> <TD>Cell 3 </TD> </TR> <TR> <TD>Cell 4 </TD> <TD>Cell 5 </TD> <TD>Cell 6 </TD> </TR> </TABLE> 18 </P>
Lecture 6 - Tables

Table #2
Lecture 6 - Tables

19

TABLE TAGS - TABLE #3

<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><BR> <TABLE ALIGN = "center" BORDER = 4 WIDTH = 200 HEIGHT = 100> <TR> <TD>Cell 1 </TD> <TD>Cell 2 </TD> <TD>Cell 3 </TD> </TR> <TR> <TD>Cell 4 </TD> <TD>Cell 5 </TD> <TD>Cell 6 </TD> </TR> </TABLE> 20 </P>
Lecture 6 - Tables

10

Table #3

21

Lecture 6 - Tables

TABLE TAGS - TABLE #4

<P><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><BR> <TABLE ALIGN = "center" BORDER = 4 WIDTH = 200 HEIGHT = 100 CELLSPACING = 8> <TR> <TD>Cell 1 </TD> <TD>Cell 2 </TD> <TD> Cell 3 </TD> </TR> <TR> <TD>Cell 4 </TD> <TD>Cell 5 </TD> <TD>Cell 6 </TD> </TR> </TABLE> 22 </P>
Lecture 6 - Tables

11

Table #4
23

Lecture 6 - Tables

TABLE TAGS - TABLE #5

<P> <FONT COLOR = "red"><CENTER>This table uses equal size cells</CENTER></FONT><BR> <TABLE ALIGN = "center" BORDER = 4> <TR> <TD>Cell 1</TD><TD>Cell 2</TD><TD>Cell 3</TD><TD>Cell 4</TD> </TR> <TR> <TD>Cell 5</TD><TD>Cell 6</TD><TD>Cell 7</TD><TD>Cell 8</TD> </TR> <TR> <TD>Cell 9</TD><TD>Cell 10</TD><TD>Cell 11</TD><TD>Cell 12</TD> </TR> </TABLE> </P>

24

Lecture 6 - Tables

12

Table #5

25

Lecture 6 - Tables

TABLE TAGS - TABLE #6

<P><FONT COLOR = "red"><CENTER>This table uses cell 5 that spans two rows and three columns<CENTER></FONT><BR> <TABLE ALIGN = "center" BORDER = 4> <TR> <TD>Cell 1</TD><TD>Cell 2</TD><TD>Cell 3</TD><TD>Cell 4</TD> </TR> <TR> <TD ROWSPAN = 2 COLSPAN = 3 ALIGN = "center">Cell 5</TD> <TD>Cell 6</TD><TD>Cell 7</TD><TD>Cell 8</TD> </TR> <TR> <TD>Cell 9</TD><TD>Cell 10</TD><TD>Cell 11</TD><TD>Cell 12</TD> </TR> </TABLE></P>
26
Lecture 6 - Tables

13

Note the empty locations in the table since there weren't any cells defined for this location. Table #6
Lecture 6 - Tables

27

TABLE TAGS - TABLE #7

<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><BR> <TABLE ALIGN = "center" BORDER = 4 WIDTH = 200 HEIGHT = 100 CELLSPACING = 8> <TR> Note - absolute pixel counts for table size <TD>Cell 1</TD><TD>Cell 2</TD><TD>Cell 3</TD><TD>Cell 4</TD> </TR> <TR> <TD ROWSPAN = 2 COLSPAN = 3 ALIGN = "center">Cell 5</TD> <TD>Cell 6 </TD><TD>Cell 7</TD><TD>Cell 8</TD> <TR> <TD>Cell 9</TD><TD>Cell 10</TD><TD>Cell 11</TD><TD>Cell 12</TD> </TR> 28 </TABLE>

Lecture 6 - Tables

14

Table #7
29

Lecture 6 - Tables

TABLE RENDERING AND CALCULATIONS

Browsers use all table, cell and non-cell, variables to calculate cell sizes. They must 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

Lecture 6 - 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 specifications

30

15

IMPACT OF CELL CONTENT ON CELL SIZES

31

Lecture 6 - Tables

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

32

Lecture 6 - Tables

16

NESTING TABLES - TABLE #8

<P><FONT COLOR="red"><CENTER>Cell 2 is an entire table</CENTER></FONT><BR> <TABLE ALIGN = "center" BORDER = 4> <TR> Note that the entire table <TD>Cell 1</TD><TD>Nested table definition occurs within <TABLE ROWS=1 COLS=3> <TR> the open and close tags <TD>T21</TD><TD>T22</TD><TD>T23</TD> for the table cell. </TR></TABLE></TD> <TD>Cell 3</TD><TD>Cell 4</TD> </TR> <TR> <TD>Cell 5</TD><TD>Cell 6</TD><TD>Cell 7</TD><TD>Cell 8</TD> </TR> <TR> <TD>Cell 9</TD><TD>Cell 10</TD><TD>Cell 11</TD><TD>Cell 12</TD> </TR> </TABLE></P>
33
Lecture 6 - Tables

Table #8

34

Lecture 6 - Tables

17

NESTING TABLES - TABLE #9

<FONT COLOR = "red"><CENTER>Cell 7 is an entire table<CENTER></FONT> <TABLE ALIGN = "center" BORDER = 4 CELLSPACING = 10%> <TR> <TD>Cell 1</TD><TD>Cell 2</TD><TD>Cell 3</TD><TD>Cell 4</TD> </TR> <TR> <TD ROWSPAN = 2 COLSPAN = 3>Cell 5</TD><TD>Cell 6</TD> <TD><TABLE ROWS =1 COLS = 3 BORDER = 5> <TR> <TD>T21</TD><TD>T22</TD><TD>T23</TD> </TR> </TABLE> </TD><TD>Cell 8</TD> </TR> <TR> <TD>Cell 9</TD><TD>Cell 10</TD><TD>Cell 11</TD><TD>Cell 12</TD> </TR> </TABLE>

35

Lecture 6 - Tables Lecture 6 - Tables

Table #9

36

18

FORMATTING VIA TABLES

One common use of tables in HTML is to format Web pages Formatting Web pages with tables is based on the same idea as nesting tables;

Lecture 6 - 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 independent screen that can hold any HTML content including a full Web page
37

FORMATTING VIA TABLES SAMPLE LAYOUT PLAN

38

Lecture 6 - Tables

19

FORMATTING VIA TABLES

<TABLE ALIGN = "center" BORDER = 0>
Lecture 6 - Tables

<TR VALIGN = "top"> <TD BGCOLOR = "yellow"> <IMG SRC = "myImage.gif"> </TD>

<TD BGCOLOR = "green">What to eat for a midnight snack?

<UL> <LI>Pizza <LI>Nachos <LI>Ice cream <LI>Pretzels </TD> </TR>

39

Continued on next page

FORMATTING VIA TABLES

<TR VALIGN = "top">
Lecture 6 - Tables

<TD BGCOLOR = "gray"> Here are some Web sites to visit <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> </TR> </TABLE>

40

20

Resulting table layout

41

Lecture 6 - Tables

FAQS

Q: Does the <CAPTION> tag replace the SUMMARY attribute of the <TABLE> tag?

A: No. The <CAPTION> tag provides a very brief, onestatement 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.

42

Lecture 6 - Tables

21

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, you can then simply remove the BORDER attribute.

43

Lecture 6 - Tables

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

44

Lecture 6 - Tables

22

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

45

Lecture 6 - Tables

23