Lab Exercise 1 CMPUT 410 (Winter 2004) Due Date: Week 3 (Sept 19 and 22) before the end of your lab time. Objectives: Use HTML tags to build tables and to position text. Comments: Your TA has to see that the exercise is done. Table tags in HTML can be used to render tables of all configurations. Table tags are also commonly used to position text, images or other components in a web page. Eliminating the display of the table borders and placing objects and text in the appropriate table cells does this trick. We saw in class tags for creating tables with rows and columns of data. XHTML 1.0 and XHTML 1.1 have extensions for these tags over HTML 4.0. Ask your TA about the differences. Use either XHTML 1.1, XHTML 1.0 or HTML 4.0 to create the following tables. Each table should be in a separate web page The first table has imbricated rows and columns to present some information (see Figure 1). The first part of the exercise is to reproduce the table in Figure 1. The image, of size 200x260, could be linked from: http://www.cs.ualberta.ca/~zaiane/courses/cmput410/work/book.jpg. Notice the caption of the table and the colors of some cells. Figure 1 The second table uses a "hidden" table to position text (see Figure 2). What is referred to as a hidden table is simply a table with no apparent border. To see the borders, set the BORDER parameter to 1. Figure 3, shows that same table with a visible border. Figure 2 For the exercise, reproduce in a web page the layout in Figure 2. Figure 3 Additional (not part of the exercise): Once you put your pages on-line, validate them by the W3C validator (http://validator.w3.org/). Experiment with the different parameters of the table tags such as <WIDTH> <CELLPADDING> <CELLSPACING> <NOWRAP> <VALIGN> etc. You could experiment with Cascading Style Sheets.

End of Page