View
217
Download
0
Tags:
Embed Size (px)
Citation preview
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
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