1. Exploring the Internet Creating web pages with 2-d layout 91.113-021 Instructor: Michael Krolak 91.113-031 Instructor: Patrick Krolak See also http://www.cs.uml.edu/~pkrolak/http://www.cs.uml.edu/~pkrolak/ Authors: P. D. & M. S. Krolak Copyright 2005

2. Tonight Laying out a web page in 2-D using table tags Source: http://www.arteffectsni.co.uk/web_design/cartoon_web_design.gif http://www.arteffectsni.co.uk/web_design/cartoon_web_design.gif

3. Class Announcements Class Notes Have been posted.

4. Table Tags Creating web pages with 2-d layout

5. Why we need tables Before table tags: 1.there were few mechanisms in HTML to control the placement of text and images if the designer had a concept of how the materials related to each other in two dimensional space. 2.The original HTML was designed as a data flow language. The browser read and displayed the HTML as it read in the tags and content. Thus the material flowed across the page from left to right without concern for what appeared above or below it. 3.A modern web site is a complex layout arrangement of white space, images, and text designed to let the viewer sort out: pages organization and major ideas.

6. Preformatted text container The container tag, which stood for preformatted text, instructed the browser to layout the container's text exactly as it was typed into the HTML source document. To work required a fixed width type font. This allowed for tables of rows and columns of numbers and text to be laid out. However, it could not be adjusted for size of window etc. The resulting appearance looked and appeared like an old fashion typewriter or teletype. Image placement of the type needed for modern e- commerce sites was impossible.

7. Table The hierarchy of attribute settings. The controlling attribute is the one closest to the data cell. Thus the 's attributes are overridden by those of the 's and the or override those of the that contains it.

8. Table tag attributes

9. The Caption tag :

10. Row containers

11. TR attributes

12. Cell elements

13. Cell element attributes

14. The Table Header tag : The container is special case of the It creates a cell whose text is in bold and centered as the default. As the name implies it is used at the tops of the Columns to specify their purpose. The attributes are the same as the.

15. Rowspan & Colspan

16. Example

17. Why is my blank cell the wrong color?

18. Table Examples

19. Table examples