Introduction to Web Site Development Lecture 4: Tables and Frames Department of Computer Science California State University, Los Angeles

Tabular Data A table consists of: A caption (optional) A header (optional) Zero or more columns (optional) A footer (optional and if there isn’t one at the bottom) A body with zero or more rows (optional) A footer (optional and if there isn’t one at the top)

The TABLE Element Description Requirements: Usage: Used to place data in a multidimensional structure Requirements: Start Tag: REQUIRED End Tag: REQUIRED Usage: Context: Where flow content is expected Content Model: CAPTION, COLGROUP, THEAD, TFOOT, TBODY, TR elements are allowed

The TABLE Element Example <TABLE> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE> Note: If you miss rows without elements or tags, the results are unpredictable!

The TABLE Element Optional Attributes TITLE: Specify a tool tip when the mouse hovers over the table SUMMARY: To provide a table summary (accessibility reasons, speech readers, general information)

The CAPTION Element Description: Requirements Usage: Used to define caption text for the table (optional) Requirements Start Tag: REQUIRED End Tag: REQUIRED Usage: Context: Must be first child of TABLE Content Model: Flow content, excluding nested tables

The CAPTION Element Example <TABLE> <CAPTION>My Table Caption</CAPTION> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE>

The CAPTION Element Optional Attributes TITLE: Specify a tool tip when the mouse hovers over the caption

The TR Element Description: Requirements Use to begin a new row in a table Requirements Start Tag: REQUIRED End Tag: REQUIRED

The TR Element Usage: Context: Must be a child of TABLE, THEAD, TFOOT, or TBODY Content Model: When parent is THEAD, zero or more TH elements; otherwise, zero or more TD or TH elements.

The TR Element Example <TABLE> <TR><TD>1</TD></TR> <TR><TD>2</TD></TR> </TABLE>

The TR Element Optional Attributes None

The TD/TH Elements Description Requirements Usage Use to add table data to the current row of the table Requirements Start Tag: REQUIRED End Tag: OPTIONAL Usage Context: Must be a child of TR Content Model: Flow content

The TD/TH Elements The difference between TD and TH is that TH is exclusively used in THEAD while TH and TD can both be used in TBODY 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 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.

ROWSPAN/COLSPAN (2) Rowspan and Colspan Can Be Tricky If you’re having problems, draw out table on paper first Rowspan Row Column Colspan

The THEAD Element Description Requirements Usage Use to mark one or more rows of a table, starting from the first row, as heading rows Requirements Start Tag: REQUIRED End Tag: OPTIONAL Usage Context: Must be a child of TABLE Content Model: Zero or more TR elements

The THEAD Element Example <TABLE> <THEAD> <TR> <TH>1</TH><TH>2</TH><TH>3</TH> </TR> </THEAD> </TABLE>

The THEAD Element Optional Attributes None

The TFOOT Element Description Requirements Usage Use mark one or more rows of a table, starting from the bottom row, as footing rows Requirements Start Tag: REQUIRED End Tag: OPTIONAL Usage Context: Must be a child of TABLE Content Model: Zero or more TR elements.

The TFOOT Element Example <TABLE> <TFOOT> <TR> <TD>1</TD><TD>2</TD><TD>3</TD> </TR> </TFOOT> </TABLE>

The TFOOT Element Optional Attributes None

The TBODY Element Description Requirements Usage Use to mark one or more rows of a table, starting after the last THEAD row, as body rows. Requirements Start Tag: OPTIONAL (see standard) End Tag: OPTIONAL (see standard) Usage Context: Must be a child of TABLE and come after THEAD (if there is a THEAD) Content Model: Zero or more TR elements.

The TBODY Element Example <TABLE> <TBODY><TR> <TD>1</TD><TD>2</TD><TD>3</TD> </TR></TBODY> </TABLE>

The TBODY Element Optional Attributes None

The IFRAME Element 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 Description Requirements Usage Use to load the contents of another HTML page in a child window within the current document Requirements Start Tag: REQUIRED End Tag: REQUIRED Usage Context: Where flow or phrasing content is expected Content Model: Fallback text, in the case that the web browser does not support inline frames

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

The IFRAME Element 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.