1 / 17

Introduction to Tables

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.

laith-hoffman
Download Presentation

Introduction to Tables

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to Tables Masters Project CS 490

  2. 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.

  3. 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.

  4. Basic Table Tags 1. <TABLE> </TABLE> 2. <TR> </TR> 3. <TD> </TD> Other: <TH> </TH> <CAPTION> </CAPTION>

  5. 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.)

  6. Sample: Final Table Our Daily Offerings

  7. Create the TableFirst, Plan the Table on Paper Our Daily Offerings

  8. Then,Type the Table Contents <BODY> Our Daily Offerings </BODY>

  9. 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>

  10. 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>

  11. NOWRAP Example Use NOWRAP to get this Not this

  12. 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>

  13. Enhance the TableSpan a heading across 2 columns To 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

  14. 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—

  15. 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

  16. 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.

  17. 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)

More Related