Introduction to Web Site Development

Steven EmoryDepartment of Computer Science

California State University, Los Angeles

Lecture 4:Tables and Frames

The TABLE Element (Basics)

Description: Use the TABLE element to place data in a multidimensional structure, in the form of a table

Placement: Flow Content (i.e. don’t put a table inside a paragraph or in-between text)

Content: CAPTION, COLGROUP, THEAD, TFOOT, and TBODY elements

The TABLE Element (Syntax)

Requirements

Start Tag: REQUIRED

End Tag: REQUIRED

Self-Closing Tag: FORBIDDEN

Example

<TABLE> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>2</TD></TR> </TABLE>

The TABLE Element (Attributes)

Optional Attributes

TITLE: Specify a tool tip when the mouse hovers over the table

The CAPTION Element (Basics)

Description: Use the CAPTION element to define caption text for the table (optional)

Placement: CAPTION must be a child of TABLE

Content: Flow content (excluding nested tables).

The CAPTION Element (Syntax)

Requirements

Start Tag: REQUIRED

End Tag: REQUIRED

Self-Closing Tag: FORBIDDEN

Example

<TABLE><CAPTION>My Table Data</CAPTION><TR><TD>1</TD></TR> <TR><TD>2</TD></TR> </TABLE>

The CAPTION Element (Attributes)

Optional Attributes

TITLE: Specify a tool tip when the mouse hovers over the caption

The TR Element (Basics)

Description: Use the TR element to begin a new row in a table

Placement: TR must be a child of TABLE, THEAD, TFOOT, or TBODY

Content: When parent is THEAD, zero or more TH elements; otherwise, zero or more TD or TH elements.

The TR Element (Syntax)

Requirements

Start Tag: REQUIRED

End Tag: OPTIONAL

Self-Closing Tag: YES (XML Syntax)

Example

<TABLE><TR><TD>1</TD></TR> <TR><TD>2</TD></TR> </TABLE>

The TR Element (Attributes)

Optional Attributes

None

The TD/TH Elements (Basics)

Description: Use the TD/TH element to add table data to the current row of the table

Placement: TD/TH must be a child of TR

Content: Flow content

The difference between TD and TH is that TH is exclusively used in THEAD while TH and TD can both be used in TBODY

The TD/TH Elements (Syntax)

Requirements

Start Tag: REQUIRED

End Tag: OPTIONAL

Self-Closing Tag: YES (XML Syntax)

Example

<TABLE> <TR><TH>C1</TH><TH>C2</TH></TR> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE>

The TD/TH Elements (Attributes)

Optional Attributes

COLSPAN: The number of columns this piece of TD data will span.

ROWSPAN: The number of rows this piece of TD data will span.

HEADERS: A string containing a sequence of HTML identifiers that are associated with table headers. Used by speech readers to help the blind make sense of table data.

The THEAD Element (Basics)

Description: Use the THEAD element to mark one or more rows of a table, starting from the first row, as heading rows

Placement: THEAD must be a child of TABLE

Content: Zero or more TR elements.

The THEAD Element (Syntax)

Requirements

Start Tag: REQUIRED

End Tag: OPTIONAL

Self-Closing Tag: YES (XML Syntax)

Example

<TABLE> <THEAD><TR> <TH>1</TH><TH>2</TH><TH>3</TH> </TR></THEAD> </TABLE>

The THEAD Element (Attributes)

Optional Attributes

None

The TFOOT Element (Basics)

Description: Use the TFOOT element to mark one or more rows of a table, starting from the bottom row, as footing rows. Useful for summarizing data

Placement: TFOOT must be a child of TABLE

Content: Zero or more TR elements.

The TFOOT Element (Syntax)

Requirements

Start Tag: REQUIRED

End Tag: OPTIONAL

Self-Closing Tag: YES (XML Syntax)

Example

<TABLE> <TFOOT><TR> <TD>1</TD><TD>2</TD><TD>3</TD> </TR></TFOOT> </TABLE>

The TFOOT Element (Attributes)

Optional Attributes

None

The COLGROUP Element (Basics)

Description: Use the COLGROUP element to apply a CSS style down all rows, spanning a specified number of columns. Useful for coloring columns and grouping data.

Placement: COLGROUP must be a child of TABLE

Content: Zero or more COL elements.

The COLGROUP Element (Syntax)

Requirements

Start Tag: OPTIONAL (read standard)

End Tag: OPTIONAL (read standard)

Self-Closing Tag: YES (XML Syntax)

Example

See the lecture example code for an example since this element uses something we haven’t really covered yet (CSS).

The TBODY Element (Basics)

Description: Use the TBODY element to mark one or more rows of a table, starting after the last THEAD row, as body rows.

Placement: TBODY must be a child of TABLE and come after THEAD (if there is a THEAD)

Content: Zero or more TR elements.

The TBODY Element (Syntax)

Requirements

Start Tag: OPTIONAL (see standard)

End Tag: OPTIONAL (see standard)

Self-Closing Tag: YES (XML Syntax)

Example

<TABLE> <TBODY><TR> <TD>1</TD><TD>2</TD><TD>3</TD> </TR></TBODY> </TABLE>

The TBODY Element (Attributes)

Optional Attributes

None

Frames

Very popular in the late 90’s

Really old school and outdated now

HTML5 standard has deprecated the FRAME and FRAMESET elements

One type of frame however, still exists in HTML5, the inline frame element, IFRAME

The IFRAME Element (Basics)

Description: Use the IFRAME to load the contents of another HTML page in a child window within the current document.

Placement: IFRAME is embedded content, and can be placed anywhere flow and phrasing content is expected.

Content: Fallback text, in the case that the web browser does not support inline frames.

The IFRAME Element (Syntax)

Requirements

Start Tag: REQUIRED

End Tag: REQUIRED

Self-Closing Tag: FORBIDDEN

Example

<IFRAME SRC="index.html"> Your web browser does not support inline frames!</IFRAME>

The IFRAME Element (Attributes)

Optional Attributes

SRC: The URL of the document to load within the frame. Can be absolute or relative.

NAME: The name of the frame window (useful when we do JavaScript later on).

WIDTH: The desired width of the frame window.

HEIGHT: The desired height of the frame window.