Exploring the Internet Creating web pages with 2-d layout Instructor: Michael Krolak Instructor: Patrick Krolak See also Authors: P. D. & M. S. Krolak Copyright 2005

Tonight Laying out a web page in 2-D using table tags Source:

Class Announcements Class Notes Have been posted.

Table Tags Creating web pages with 2-d layout

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.

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.

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.

Table tag attributes

The Caption tag :

Row containers

TR attributes

Cell elements

Cell element attributes

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.

Rowspan & Colspan

Example

Why is my blank cell the wrong color?

Table Examples

Table examples