Introduction to Tables Masters Project CS 490 Kevin
Introduction to Tables Masters Project CS 490 Kevin Murphy
Tables n Tables are useful for organizing large bodies of information so that the reader can quickly see the overall picture. n Tables on Web pages are similar to spreadsheets or tables in word processing programs. n Tables are organized in columns (vertical) and rows (horizontal). n A cell, where data is placed, is the intersection of a column and a row. Kevin Murphy
Tables in HTML n 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. n Plan for a lot of experimenting, testing, readjusting code, and testing again until you get what you want. n 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> <CAPTION> </TH> </CAPTION> Kevin Murphy
Some Attributes Border Width, Height Align No. Wrap Rowspan Colspan Cellspacing Cellpadding (In addition, any cell can contain text and/or HTML codes including lists, links, forms, or other tables. ) Kevin Murphy
Sample: Final Table Our Daily Offerings Kevin Murphy
Create the Table First, Plan the Table on Paper Our Daily Offerings Kevin Murphy
Then, Type the Table Contents <BODY> Our Daily Offerings </BODY> Kevin Murphy
Add the Tags <TABLE> <TR> <TH><BR></TH><TH>Crab</TH><TH>Scallop</TH><TH>Lamb</TH><TH>Rib</TH> </TR> <TH>Lunch</TH><TD>$10</TD><TD>$14</TD><TD>$16</TD><TD>$14</TD> </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 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 Table Span a heading across 2 columns To get this <TABLE> <CAPTION>Our Daily Offerings</CAPTION> Add this <TR> <TH><BR></TH> <TH COLSPAN=2>Seafood</TH> <TH COLSPAN=2>Meat</TH> </TR> Kevin Murphy
Enhance the Table Add 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 n 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 n 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 n Browsers generally display a table as large as it needs to be for the contents. n A column or row is as wide as the widest cell within that column or row. n 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) Kevin Murphy
- Slides: 17