Presentation is loading. Please wait.

Presentation is loading. Please wait.

The Web Wizards Guide to HTML Chapter Six Tables.

Similar presentations

Presentation on theme: "The Web Wizards Guide to HTML Chapter Six Tables."— Presentation transcript:

1 The Web Wizards Guide to HTML Chapter Six Tables

2 Chapter Objectives Examine the structure of HTML tables Explore the most important table attributes Learn how tables can be used to format text Learn how tables can be used to format graphics Explain some caveats and warnings associated with tables

3 The Table Element The Table Element Each table tag pair can hold any number of table rows Each table row tag pair can hold any number of table data items Each table data tag pair can hold text, images, and other HTML elements

4 Table Cells A table cell is another name for a table data element Tables cells can be distinguished by their own background colors, type fonts, alignments, etc. A table containing a single cell can be used to frame an image or offset important text

5 Table Attributes You can center HTML elements on a Web page by embedding them inside a single-celled table with a width=100% table attribute and an align=center table data attribute A border=5 table attribute creates a 3-D picture frame for a single-celled table containing an image

6 Tables and Text Text is hard to read against a busy background pattern, but you can lay a table containing text on top of a background pattern without sacrificing readability (just give the table a solid background color) Tables can also be used to separate text into two columns (a cellpadding=20 table attribute will put white space between the two columns)

7 Web Page Borders Empty table columns can be used to create margins for text on a Web page Use a fixed width attribute (e.g. width=50 ) for the empty table data element A left-hand margin is necessary if you want to run a graphical border down the left side of a Web page (by tiling a very wide background pattern)

8 Tables and Graphics Tables can be used to control a Web page layout for multiple images (or images mixed with text) Images of different sizes can be fit together in irregularly-shaped tables using cell-structure diagrams All tables have an underlying cell structure with a uniform number of table cells across each table row

9 colspan and rowspan colspan and rowspan are table data attributes that are used to create irregular tables A table cell can be extended horizontally with the colspan attribute A table cell can be extended vertically with the rowspan attribute

10 One vs. Many If you have one very large table, try to break it up into a sequence of smaller tables that can be stacked vertically on a Web page Browsers have to download the contents of an entire table before any of the table can be viewed Multiple tables will be displayed incrementally so the user will be able to see the first part of your page while the rest of the page is still downloading

Download ppt "The Web Wizards Guide to HTML Chapter Six Tables."

Similar presentations

Ads by Google