AdvWeb-1/37 DePaul University SNL 262 Web Page Design Tables! - Chapt 15 Instructor: David A. Lash

AdvWeb-2/37 HTML Tables u An orderly arrangement of text and/or graphics into vertical columns and horizontal rows. Table with integrated graphics u Within HTML tables perform many functions See example at: ble.html ble.html – Control web page layout (for text and graphics) – Separate a Web page into different areas – Show data output in traditional table format Example of table as a page layout device

AdvWeb-3/37 HTML Tables u An orderly arrangement of text and/or graphics into vertical columns and horizontal rows. Each these are called a “cell”

AdvWeb-4/37 The Basic Table Structure The bare minimum tags needed to describe a table are …, … Encloses TABLE Defn Start & End Table row Start & End Table Colmn

AdvWeb-5/37 The Basic Table Structure Simple Table Cell 1 Cell 2 Cell 3 Cell 4 Table Row Table Column Start & End Table Creates the example 4 cell table Click HereClick Here

AdvWeb-6/37 Guess The Table Format - 1? What would the following display? Cell 1 Cell 2 Cell 1 Cell 2 Cell 3 Click Here for answer

AdvWeb-7/37 Guess The Table Format - 2? What would the following display? Cell1 Cell2 Cell Cell 1 Cell 2 Cell 3 Click Here for answer

AdvWeb-8/37 Guess The Table Format - 3? What would the following display? Cell1 Cell2 Cell ? Cell 1 Cell 2 Cell 3 Click Here for answer ss3table.html Row 1 w/ 5 cols Col 3-4 empty Col 5 Row 2 Cols 1-3 only have data

AdvWeb-9/37 Introducing the Another basic but option TAG is the similar to Col 1 Col 2 Cell 1 Cell 2 Cell 1 Cell 2 Click Here for example Automatic Bold & center

AdvWeb-10/37 Another Example My First Table Description Size Weight Gun 5 Inch Barrel 20 Ounces T-Rex 40 Feet High Multiple Tons Hurricane Floyd 400 Miles Radius ???? (Sometime can get by w/o closing tags,, but this is risky business (e.g., I.E., VS Navigator.) Click Here for example

AdvWeb-11/37 Tables Are Their Own Environment My First Table Description Size Weight Gun 5 Inch Barrel 20 Ounces T-Rex 40 Feet High Multiple Tons Hurricane Floyd 400 Miles Radius ???? You’d think each element in the table would be bold Instead that bold is ignored w/I table

AdvWeb-12/37 Table Cells Format Like Documents... Test Cell1 Happy Days Are here again. The skies are are blue again

AdvWeb-13/37 Options: Table, Row and Column Width Some other attributes for the table tag u 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.) u 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.)

AdvWeb-14/37 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 ???? Click Here Sets the overall sizes Sets individual element

AdvWeb-15/37 Options: Borders Some other attributes for the table tag u border=# - 0 or no border is the default see below for more details.

AdvWeb-16/37 Implementing Borders My First Table Description Size Weight Gun 5 Inch Barrel 20 Ounces T-REX 40 Feet High Multiple Tons Hurricane Floyd 400 Miles Radius ???? Example Example at

AdvWeb-17/37 Options: Background color u bgcolor="#rrggbb" or color name - sets a color for background for table or table cell.

AdvWeb-18/37 Tables and BGCOLOR u Can use BGCOLOR= attribute in the TABLE,TR or TD tag. Color MyTable The Local News TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT

AdvWeb-19/37 Some Special Table Tricks u Cell text alignment u Padding the columns and Rows u Spanning Columns and Rows u Special Examples

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

AdvWeb-21/37 Options: Alignment My First Table Name Rank Serial Number George Washington General 1 George Bush President 42 George Ryan ??? ????? u

AdvWeb-22/37 Cell padding and cell spacing u Cell padding specifies the number of pixels from the cell border to the text. Useful for simple announcement boxes. u Cell spacing specifies number of pixels between cells of the table. Text Spacing Number of pixels betw cells Padding Number of pixels from cell border to text Text

AdvWeb-23/37 Cell Padding And Spacing u Cell padding specifies the number of pixels from the cell border to the text. Useful for simple announcement boxes. Color MyTable The Local News Announcing Earlier Class Dismissal Today! 1 Row 1 Col (A Box!) Start text 52 pixels from border (next slide

AdvWeb-24/37 Would look like...

AdvWeb-25/37 Cell Padding And Spacing u Cell spacing specifies number of pixels between cells of the table. Color MyTable The Local News DATA1 DATA2 DATA3 DATA4 u (next slide 50 pixels between table cells

AdvWeb-26/37 Would Look Like...

AdvWeb-27/37 Options: colspan and rowspan u colspan - Allows a cell to span columns u rowspan - Allows a cell to span rows – Useful for performing a page layout

AdvWeb-28/37 Column & Row Spacing u Colspan allows 1 cell to span more than 1 Columns of cells. This row has colspan=2 This row has colspan=3 This row has colspan=2

AdvWeb-29/37 Col Span Example u Example Colspan Color MyTable The Local News TEXT TEXT TEXT TEXT TEXT TEXT <TD BGCOLOR="ORANGE">TEXT u n_example.html n_example.html 3 rows & Cols. The first row spans all cols!

AdvWeb-30/37 Col & Row Spacing u 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

AdvWeb-31/37 RowSpan Example u Just like Col Span but with rows! Color MyTable The Local News TEXT TEXT TEXT TEXT TEXT TEXT TEXT u an.html an.html 3 rows & Cols. The first col spans all rows!

AdvWeb-32/37 Creating Layouts u Suppose you want to make a page layout as follows: This Col has colspan 5 Title NavigationNavigation Main Page rowspan 4 rowspan 4 colspan 4 Your Logo

AdvWeb-33/37 Wouldn’t this solve the problem? Sample Table Title Nav1 Nav2 Nav3 Main Body u See how this would display 1 st col 15% of screen Span title Put Nav Items In BL Put Main Body in

AdvWeb-34/37 Would Output... Navigation not upper right hand corner Title and body not centered

AdvWeb-35/37 Lets Refine It... Sample Table Title Nav1 Nav2 Nav3 <TABLE WIDTH=100% BORDER=0 CELLSPACING=0 CELLPADDING=0> Main Body u Next slide Center In cell Start New table Align in Center of cell Valign at Top Of cell

AdvWeb-36/37 Would Output...

AdvWeb-37/37 Some Special Table Uses u Goto This Web Page - Click HereClick Here