1. WDMD 170 – UW Stevens Point 1 WDMD 170 Internet Languages eLesson: HTML/XHTML Tables (NON-audio version) © Dr. David C. Gibbs 2003-04

2. WDMD 170 – UW Stevens Point 2 Objectives Create basic tables Apply the fundamental table attributes to customize an HTML table Utilize the colspan and rowspan attributes to “merge” cells within a table

3. WDMD 170 – UW Stevens Point 3 What are Tables? Tables are collections of rows and columns that you use to organize and display information. In a table, the intersection of any given row and column is called a cell.

4. WDMD 170 – UW Stevens Point 4 Example of table use in a web page

5. WDMD 170 – UW Stevens Point 5 Example of table use in sample code We have used tables in presenting some code samples in the last eLesson. Visit the sample files and view the source to see tables in action. ( In first example border=“1”, in the second border=“0”.) validateEmailAddress.htm eMailingFormData.htm

6. WDMD 170 – UW Stevens Point 6 Tables can be used to lay out Web pages. The W3C discourages using tables for document layout because tables can be difficult for non-visual user agents to interpret. How are tables used?

7. WDMD 170 – UW Stevens Point 7 Why not use Tables? Additionally, user agents with small monitors, such as Personal Digital Assistants (PDAs), and browsers that use large fonts may have difficulty rendering a Web page that is laid out using tables. The W3C encourages the use of Cascading Style Sheets (CSS) for document layout.

8. WDMD 170 – UW Stevens Point 8 Why use Tables? Indeed, why use tables?why use tables? There is a lot of HTML code out there with tables, and, using CSS for positioning is not trivial, so picking up table skills is a good idea.

9. WDMD 170 – UW Stevens Point 9 Basic Elements You create tables using the element. Within the element you can nest a number of other elements that specify the content of each cell along with the structure and appearance of the table. The element also includes several attributes that affect the appearance and structure of a table.

10. WDMD 170 – UW Stevens Point 10 Table Elements These tags are placed between …

11. WDMD 170 – UW Stevens Point 11 The element, a cell Cells are the most basic parts of a table You create a cell within the element using the element. The element stands for “table data” The content of each element is the data that will appear in the table cell

12. WDMD 170 – UW Stevens Point 12 The element, a row Each element essentially represents a column in the table You declare table cells within table row elements that you create with the element. Each element you include within a element creates a separate row.

13. WDMD 170 – UW Stevens Point 13 Use the outstanding material at the w3schools site to create your own “Introduction to Tables” web page. Browse to http://www.w3schools.com/html/html_tables.asphttp://www.w3schools.com/html/html_tables.asp Work your way through their examples, copying and pasting their code samples into your document, saving it as IntroToTables.htm. (I have counted 19 different examples you should copy into your page.) Be sure to label each example with an explanatory description. Here is a sample of how to get started.sample Your page will scroll vertically a lot if you put all 19 examples on the one page. While this is not good page design, I’ll accept it here as your goal is to learn about HTML tables. [You may construct several pages, linking them if you wish.] Add the page to a folder labeled IntroToTables. eTask 1

14. WDMD 170 – UW Stevens Point 14 eTask 2 Create a table (using border=“1”) of three rows and three columns, as shown in the figure at right Use appropriate colspan and rowspan attributes to create the table (using border=“1”) shown at right. Here is a code sample that provides a hint.code sample Save the document as TablesUsingRowspanColspan.htm in your IntroToTables folder.

15. WDMD 170 – UW Stevens Point 15 Table Widths You use the width attribute of the element to specify the size of a table. You can assign a fixed value in pixels or a percentage representing the visible width of a Web browser window. e.g.

16. WDMD 170 – UW Stevens Point 16 Summary Tables are collections of rows and columns that you use to organize and display data In a table, the intersection of any given row and column is called a cell You create tables using the element You create a cell within the element using the element You create a caption for a Web page table using the element

17. WDMD 170 – UW Stevens Point 17 Summary You use the width attribute of the element to specify the size of a table. You include the frame attribute in the element to specify which sides of the table should display a border You can use a element to create an empty cell, but you must include the non-breaking space character entity ( ) as each empty cell’s content You can cause cells to span multiple rows or columns by including the rowspan or colspan attribute in the or elements

18. WDMD 170 – UW Stevens Point 18 Assignment Revise your index.htm page, utilizing tables to organize the multitudes of completed exercises. Here’s how one student last semester chose to do it. You can use multiple tables (as is done here) or a single table. The colors are provided by a “style sheet”. (That’s NEXT on our agenda!)

19. WDMD 170 – UW Stevens Point 19 End of eLesson Jump to the Beginning of this eLesson WDMD 170 Course Schedule D2L Courseware Site