1 / 11

Introduction to Programming the WWW I

Learn the functionalities of HTML table elements for structuring web pages effectively. Discover how to use tables for layout, text, graphics, page borders, and more. Understand the advantages and disadvantages of utilizing tables in web design.

dgwinn
Télécharger la présentation

Introduction to Programming the WWW I

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 Programming the WWW I CMSC 10100-1 Winter 2003 Lecture 5

  2. The Table Element • Each table tag pair <table></table> can hold any number of table rows • Each tablerow tag pair <tr></tr> can hold any number of table data items • Each table data tag pair <td></td> can hold text, images, and other HTML elements • Each table head tag pair <th></th>has a different appearnce than table data.

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

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

  5. 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) • Example: link from bagpipes page • Tables can also be used to separate text into two columns (a cellpadding=“20” table attribute will put white space between the two columns) • More on tables for page layout later

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

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

  8. 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 • Put an internal table inside • Better to control margins with CSS (later)

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

  10. Page layout • Example: bagpipe page • Sets up header, navigation, main, and footer information sections • Need to write in content to each section

  11. Disadvantages of tables for layout • Not all browsers can read tables • Complex layout requires complex tables (lots of headaches, room for error) • Complex tables can download, be rendered slowly • Scalability issues

More Related