introduction to tables
DESCRIPTION
Introduction to Tables. Masters Project CS 490. Tables. Tables are useful for organizing large bodies of information so that the reader can quickly see the overall picture. Tables on Web pages are similar to spreadsheets or tables in word processing programs. - PowerPoint PPT PresentationTRANSCRIPT
Kevin Murphy
Introduction to Tables
Masters Project CS 490
Kevin Murphy
Tables Tables are useful for organizing large bodies of
information so that the reader can quickly see the overall picture.
Tables on Web pages are similar to spreadsheets or tables in word processing programs.
Tables are organized in columns (vertical) and rows (horizontal).
A cell, where data is placed, is the intersection of a column and a row.
Kevin Murphy
Tables in HTML Since it is difficult to picture how a table will
appear on a Web page when looking at the HTML code, plan and sketch your table on paper first.
Plan for a lot of experimenting, testing, re-adjusting code, and testing again until you get what you want.
HTML editors, spreadsheet programs, and word processing table programs can help with table creation.
Kevin Murphy
Basic Table Tags
1. <TABLE> </TABLE>
2. <TR> </TR>
3. <TD> </TD>
Other:<TH> </TH><CAPTION> </CAPTION>
Kevin Murphy
Some Attributes
Border Rowspan
Width, Height Colspan
Align Cellspacing
NoWrap Cellpadding
(In addition, any cell can contain text and/or HTML codes including lists, links, forms, or other tables.)
Kevin Murphy
Sample: Final Table
Seafood Meat
Crab Scallops Lamb Prime Rib
Lunch $10.95 $14.95 $16.95 $14.95
Dinner $21.95 $24.99 $29.99 $23.99
Our Daily Offerings
Kevin Murphy
Create the TableFirst, Plan the Table on Paper
Crab S callops Lamb P rime R ib
Lunch $10.00 $10.00 $10.00 $10.00
Dinner $10.00 $10.00 $10.00 $10.00
Our Daily Offerings
Kevin Murphy
Then,Type the Table Contents
Crab Scallops Lamb Prime Rib
Lunch $10.95 $14.95 $16.95 $14.95
Dinner $21.95 $24.99 $29.99 $23.99
Our Daily Offerings<BODY>
</BODY>
Kevin Murphy
Add the Tags<TABLE>
<TR> <TH><BR></TH><TH>Crab</TH><TH>Scallop</TH><TH>Lamb</TH><TH>Rib</TH>
</TR>
<TR><TH>Lunch</TH><TD>$10</TD><TD>$14</TD><TD>$16</TD><TD>$14</TD>
</TR>
<TR><TH>Dinner</TH><TD>$21</TD><TD>$24</TD><TD>$29</TD><TD>$23</TD>
</TR>
</TABLE>
Kevin Murphy
Add a Caption<TABLE>
<CAPTION>Our Daily Offerings</CAPTION>
OR
<CAPTION ALIGN=BOTTOM>Our Daily Offerings</CAPTION>
<TR> <TH><BR></TH><TH>Crab</TH><TH>Scallop</TH><TH>Lamb</TH><TH>Rib</TH>
</TR>
Kevin Murphy
NOWRAP Example
Lamb Prime Rib
$16.95 $14.95
$29.99 $23.99
Lamb PrimeRib
$16.95 $14.95
$29.99 $23.99
Use NOWRAP to get this Not this
Kevin Murphy
Code the NOWRAP Attribute
<TABLE>
<CAPTION>Our Daily Offerings</CAPTION>
<TR>
<TH><BR></TH><TH>Crab</TH><TH>Scallop</TH>
<TH>Lamb</TH> <TH NOWRAP>Prime Rib</TH>
</TR>
Kevin Murphy
Enhance the TableSpan a heading across 2 columns
Seafood Meat
Crab Scallops Lamb Prime RibTo get this
<TABLE>
<CAPTION>Our Daily Offerings</CAPTION>
<TR>
<TH><BR></TH> <TH COLSPAN=2>Seafood</TH>
<TH COLSPAN=2>Meat</TH>
</TR>
Add this
Kevin Murphy
Enhance the TableAdd a Border, Cell Spacing, and Cell Padding
<TABLE BORDER CELLSPACING=4 CELLPADDING=2>
Syntax:
Border or Border=value (default is 1 pixel)
Cellspacing=value (default is 2 pixels)—Adds space between cells—
Cellpadding=value (default is 1 pixel)—Adds space around cell contents—
Kevin Murphy
Aligning Cell Contents
ALIGN=Left, Center, Right- Attribute for <TR> table row tag- Attribute for <TH> and <TD> cell tags
• <TH> default is center• <TD> default is left
VALIGN=Top, Bottom, Middle- Attribute for <TR> table row tag- Attribute for <TH> and <TD> cell tags
• Default value is middle
Kevin Murphy
Width and Height Attributes
Browsers generally display a table as large as it needs to be for the contents.
A column or row is as wide as the widest cell within that column or row.
The size of the table, column, or row can be controlled with attributes expressed in pixels or as a percentage.
Kevin Murphy
Height, Width Examples
<TABLE WIDTH=80%>(Displays the table as a % of browser window)
<TH WIDTH=100 HEIGHT=100>(Displays as a 100 pixel square)
<TD WIDTH=2% HEIGHT=2%>(Displays as 2% of the width and height of the
entire table)