Introduction to Web Site Development Steven Emory Department 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

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 My Table Data 1 2

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

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

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 1 2 3

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 1 2 3

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 1 2 3

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 Your web browser does not support inline frames!

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.