Exploring the InternetCreating web pages

with 2-d layout

91.113-021Instructor: Michael Krolak

91.113-031Instructor: Patrick Krolak

See also http://www.cs.uml.edu/~pkrolak/

Authors: P. D. & M. S. Krolak Copyright 2005

Tonight

• Laying out a web page in 2-D using table tags

Source: http://www.arteffectsni.co.uk/web_design/cartoon_web_design.gif

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<Pre></Pre> container

• The <Pre></Pre> 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 <table></table>

The hierarchy of attribute settings.

• The controlling attribute is the one closest to the data cell.

• Thus the <Table></Table> 's attributes are overridden by those of the <TR></TR>'s and the <TD></TD> or <TH></TH> override those of the <TR></TR> that contains it.

Table tag attributes

Table Tag Attribute

Attribute/Values The | is either .. or.. Attribute Property

Border=" | 0 | 1 | N"

Create:

no border default "0" width. i.e. no border "1" width a thin line "N" width where N is some integer greater that 1

will create a 3-d looking border. See, for example, the title box at the top of page.

Cellspacing="N" Creates the border around the cells. Here N is an integer. N=0 is no interior framing.

Cellpadding="N" Creates the space around the cell's text and its border. Set this to some positive value >1.

Width="N | N%" Create table N Pixels in width or N per cent of the available width

BGcolor="#RGB | Color_Name"

The table's Background color can be specified as either a RGB color triple or as one of the HTML color words.

Background="URL" Allows an image to used as tile for a background.

The Caption tag <Caption></Caption>:

A caption used to title a table.

Table Tag Attribute

Attribute/Values The | is either .. or..

Attribute Property

align="top|bottom" Align=top -- put caption at the top of table Align=bottom -- put caption at the bottom of table

Row containers <TR></TR>

The Table Row tag <Tr></Tr>:

The <TR></TR> container holds all the cells in a given row, i.e. the <TD></TD> or <TH></TH> containers. The <TR> container creates the rows of the table and the cells define the elements of the row.

TR attributes

Table Row Tag Attribute Attribute/Values

The | is either .. or.. Specify only one choice

Attribute Property

ALIGN ="LEFT | CENTER | RIGHT"

a horizonral align text using either Left or Center or Right Justified

VALIGN ="TOP | MIDDLE | BOTTOM"

vertical alignment of the text either top or center or bottom

BGcolor="#RGB | Color_Name"

The row's Background color can be specified as either a RGB color triple or as one of the HTML color words.

Background="URL" Allows an image to used as tile for a background.

NOWRAP Stop word wrapping in the cell. This forces the cell to put all the text on one line.

Cell elements <TD></TD>

The Table Data Cell Tag <TD></TD>:

The table data cell is the basic atomic unit of the table. It contains the text and image information that will be display at this row and column. Note that the <TD></TD> container must be in a <TR><TR> container. The TD container may contain a <Table></Table> container. Hence the Table container can hold not only almost all text and image related tags even a table within a table.

Cell element attributes

Table Data Cell Tag Attribute Attribute/Values

The | is either .. or.. Attribute Property

ALIGN ="LEFT | CENTER | RIGHT" a horizontal align text using either Left or Center or Right Justified

VALIGN ="TOP| MIDDLE| BOTTOM" vertical alignment of the text either top or center or bottom

COLSPAN="N" The Cell spans N columns where N is an integer

ROWSPAN="N" The Cell spans N rows where N is an integer

Width="N | N%" The width of the cell can be specified as N Pixels or as N% of the table's width.

BGcolor="#RGB | Color_Name" The cell's Background color can be specified as either a RGB color triple or as one of the HTML color words.

Background="URL" Allows an image to be used as a tile for a background.

The Table Header tag <TH></TH>:

• The Table Header tag <TH></TH>:

• The <TH></TH> container is special case of the <TD></TD>

• 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 <TD></TD>.  

Rowspan & Colspan

The Rowspan and Colspan attributes:

The rowspan and colspan allow a cell to occupy the location of more than one cell. For instance suppose you want a cell that spans all the columns to provide a heading. To achieve this set colspan equal to the number of columns.

Example

A Simple Example of a Colspan Table (2 Rows 3 columns)

HTML Source Resulting Display Simple ColSpan Table

<Table border="2" cellspacing="2" > <!-- First Row -->

<TR> <TD colspan="3"> Title Spanning the

Colums</TD></TR> <!-- Second Row -->

<TR> <TD>R2 C1</TD><TD>R2

C2</TD><TD>R2 C3</TD></TR> </Table>

Simple ColSpan Table

Title Spanning

the Colums R2 C1

R2 C2

R2 C3

Why is my blank cell the wrong color?

Warning about Cells that contain no text

When creating a table with a cell that is without content, i.e. no text or images, the cell will appear without the background color. This will cause a transparent hole in the table. To fix it so that the table correctly colors the cell simply type one or more spaces in the cell container. This will cause the browser to do the right thing.

Table Examples

Simple Table Examples (2 Rows 3 columns)

HTML Source Resulting Display Simple 2x3 Table <Table border="2" cellspacing="2" > <!-- First Row --> <TR> <TD> R1 C1</TD><TD>R1 C2</TD><TD>R1 C3</TD></TR> <!-- Second Row --> <TR> <TD>R2 C1</TD><TD>R2 C2</TD><TD>R2 C3</TD></TR> </Table>

Simple 2x3 Table

R1 C1 R1 C2 R1 C3

R2 C1 R2 C2 R2 C3

Table examples

Simple 2x3 Table with 3-d border (5) <Table border="5" cellspacing="2" > <!-- First Row --> <TR> <TD> R1 C1</TD><TD>R1 C2</TD><TD>R1 C3</TD></TR> <!-- Second Row --> <TR> <TD>R2 C1</TD><TD>R2 C2</TD><TD>R2 C3</TD></TR>

</Table>

Simple 2x3 Table with 3-d border (5)

R1 C1 R1 C2 R1 C3

R2 C1 R2 C2 R2 C3