Using HTML tables...

Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment Padding the columns and Rows Spanning Columns and Rows Special Examples Creating page layouts

Competency Objectives 1.Can create a table of elements 2.Can add color, alignment, size 3.Understand some of capabilities of tables 4.Can use tables for layout Competency Alert: You need to know this ! Common Problem Area! People seem to forget this

HTML Tables l An orderly arrangement of text and/or graphics into vertical columns and horizontal rows. l Within HTML tables perform many functions »Control web page layout (for text and graphics) »Separate a Web page into different areas »Show data output in traditional table format

A couple of table examples... A table used as a page layout device A simple table Competency Alert: You need to know this !

HTML Tables Organization l Tables are organized by rows and columns Each these are called a “cell”

The Basic Table Structure The bare minimum tags needed to describe a table are …, … Defines the start and end of table Defines the start and end of a table row Defines the start and end of a table data item in a row.

The Basic Table Structure Simple Table Cell 1 Cell 2 Cell 3 Cell 4 Table Row Table data (column) Start & End Table Competency Alert: You need to know this !

Not all rows need not be same the size Notice you do not need same columns in each row Cell 1 Cell 2 Cell 1 Cell 2 Cell 3

How ‘null’ columns are treated What would the following display? Cell1 Cell2 Cell ? Cell 1 Cell 2 Cell 3 Row 1 has 5 cols, Col 3-4 empty, col 5 has cell ? Row 2: Cols 1-3 only have data

Using for Table Headers Use the tag for Table headers. Each element within is made bold and centered Character Description Frodo The ring bearer, that is, he carries the ring. Sam Frodo's trusted assistant. He carries the stuff (and Frodo too sometimes) Automatic Bold & center Competency Alert: You need to know this !

Not closing tags in tables. Tables are another example of how ‘wrong’ html displays correctly. My First Table Description Size Weight Gun 5 Inch Barrel 20 Ounces T-Rex 40 Feet High Multiple Tons Hurricane Floyd 400 Miles Radius ???? No, tag Missing and tag Common Problem Area! People seem to forget this

Tables Are Their Own Environment Simple Table Character Description Frodo The ring bearer, that is, he carries the ring. Sam Frodo's trusted assistant. He carries the stuff (and Frodo too sometimes) Is this line italics or not? You might think each table cell would be default italics Line AFTER table still gets italics. Italics is turned off after the cell. Common Problem Area! People seem to forget this

Table Cells Format Like Documents... Test A litte 'tune' Happy Days Are here again. The skies are are blue again But my favorite 'tune' is: Create a ol within this cell. Format some text. Include an image centered. Competency Alert: You need to know this !

Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment Padding the columns and Rows Spanning Columns and Rows Special Examples Creating page layouts

Table Attributes Row and Column Width Some other attributes for the tag width=number, percentage - specifies the width (in pixels) of entire window or % of size of current element. (Can be set at table, row or cell level.) height=number, percentage - specifies the height (in pixels) of entire window or % of size of current window. (Can be set at table, row or cell level.)

Specifying Column Size My First Table Description Size Weight Gun 5 Inch Barrel 20 Ounces T-REX 40 Feet High Multiple Tons Hurricane Floyd 400 Miles Radius ???? Set overall table size Specify per column or one for overall. Notice how browser overrides the 10% column to ‘even’ column out.

Using Percentages fills to current window size. My First Table Description Size Weight Gun 5 Inch Barrel 20 Ounces T-REX 40 Feet High Multiple Tons Hurricane Floyd 400 Miles Radius ???? If specify width and height as percentage, browser will automatically resize table

Other table attributes: Borders border=# - 0 or no border is the default Simple Table Character Description Frodo The ring bearer, that is, he carries the ring. Sam Frodo's trusted assistant. He carries the stuff (and Frodo too sometimes) Is this line italics or not? Border = 0 And border=10

Options: Background Color bgcolor="#rrggbb" or color name - sets a color for background for table or table cell. Can specify bgcolor for overall table background, for a row, and for a column. Column specification overrides row Row specification overrides table specification

Table bgcolor example... Color MyTable Color My World - Chicago As time goes on I realize just what you mean to me. But now, now that your near Promise your love That I've waited to share And dreams of our moments together Color my world with hope of loving you Set default table background to red Use green for row Override table and row color and make column yellow

Attributes: Alignment Some other attributes for the table tag align=left|right|center – sets the horizontal alignment for a table, row, or cell. Can be used with, or tags. valign=top|bottom|middle – set the vertical alignment of the table, row or cell. Can be used with,, or tags.

Alignment Attributes My First Table Name Rank Serial Number George Washington General 1 George Bush President 42 George Ryan ??? ????? Right justify Center justify

Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment Padding the columns and Rows Spanning Columns and Rows Special Examples Creating page layouts

A Definition Style Table My First Table HTML HyperText Markup Language. It is the language you develop web pages in. You use the result of HTML without even knowing it. (Web Page Design)

Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment Padding the columns and Rows Spanning Columns and Rows Special Examples Creating page layouts

Cell padding and cell spacing Cell padding specifies the number of pixels from the cell border to the text. Useful for simple announcement boxes. Cell spacing specifies number of pixels between cells of the table. Spacing number of pixels between cells Padding number of pixels from cell border to text

Cell Padding Announcement Box Color MyTable The Local News Announcing Earlier Class Dismissal Today! Padding of 52 from border to text A single cell table

Using Cell Spacing Cell Spacing The Local News DATA1 DATA2 8. DATA3 DATA Cell Spacing of 50

Attributes: colspan and rowspan colspan - Allows a cell to span columns rowspan - Allows a cell to span rows These are useful for performing a page layout

Column & Row Spacing Colspan - span more than 1 cell column. This row has colspan=2 This row has colspan=3 This row has colspan=2

Colspan Example 3 rows & Cols. The first row spans all cols! Spanning columns Colspan Your title here TEXT Text TEXT TEXT TEXT <TD BGCOLOR="ORANGE">TEXT

Using Rowspan Rowspan allows 1 cell to span more than 1 rows of cells. This col has rowspan=3 This col spans both cols rowspan=2 This col has rowspan=3

RowSpan Example 3 rows & Cols. The first colomn spans all rows! Rowspan My Page Visit uncle's site my dad's site my site other stuff TEXT TEXT TEXT TEXT TEXT

A Narrow Column My First Table Now IS The Time For All Good Men To Come To The Aid Of Their Country.

Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment Padding the columns and Rows Spanning Columns and Rows Special Examples Creating page layouts

Creating Layouts Suppose you want to make a page layout as follows: This Coloumn has colspan 5 Title NavigationNavigation Main Page rowspan 4 Rowspan 4 Colspan 4 Your Logo

Wouldn’t this solve the problem? Sample Table Title Nav1 Nav2 Nav3 Main Body 1 st col15% of screen Span the title 4 columns Put Nav Items in bullet list Put Main Body in Navigation not upper right hand corner Title and body not centered

Lets Refine It... Sample Table Title Nav1 Nav2 Nav3 <TABLE WIDTH=100% BORDER=0 CELLSPACING=0 CELLPADDING=0> Main Body Center In cell Start a new table that is 100% of remaining space. Align in center of cell Valign at Top Of cell

Would Output...

Precisely Placing text Need to sub-divide this cell to precisely place this text

One possible method Sample Table Title Nav1 Nav2 Nav3 Main Body Copyright by me 2005

Review of homework Look at homework file at Also don’t forget to include a link on your home page

Objectives... How to create tables Basic,, tags Some arguments with table Height, width, border Special “tricks” Cell text alignment Padding the columns and Rows Spanning Columns and Rows Special Examples Creating page layouts