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

2. 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)

3. 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

4. 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!

5. 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)

6. 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

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

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

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

10. 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.

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

12. The TR Element
Optional Attributes
None

13. 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

14. 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>

15. 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.

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

17. 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

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

19. The THEAD Element
Optional Attributes
None

20. 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.

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

22. The TFOOT Element
Optional Attributes
None

23. 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.

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

25. The TBODY Element
Optional Attributes
None

26. 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

27. 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

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

29. 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.