1 / 14

Tables

Tables. 18 February 2014. A Basic Table. <table> < tr > <td> </td> </ tr > </ table>. Table (TABLE) Contains TABLE ROWS (TR) Contains TABLE DATA (TD) Data can contain anything Text Lists Other tables Pictures …. Tables. Required Table <table> </table> Row < tr > </ tr >

pennie
Download Presentation

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. Tables 18 February 2014

  2. A Basic Table <table> <tr> <td> </td> </tr> </table> Table (TABLE) Contains TABLE ROWS (TR) Contains TABLE DATA (TD) Data can contain anything • Text • Lists • Other tables • Pictures • …

  3. Tables • Required • Table <table> </table> • Row <tr> </tr> • Data <td> </td> • Optional elements • Header (replaces data) <th> </th> • Caption <caption> </caption> • For multipage tables • Thead <thead> (contains rows) </thead> • Tfoot <tfoot> (contains rows) </tfoot> • Tbody <tbody> (contains rows) </tbody> • REQUIRED if thead or tfoot

  4. Tables • Need to format the parts • Each has borders • Can collapse

  5. Need to format each part

  6. Table borders • Every element in the table has a border • Adjacent cells can have their own borders (default) or they can share a border (border-collapse)

  7. Centering Tables • They have width. Use margins. • Elements in table can have any text align you want

  8. Formatting elements • Often need to repeat format on multiple elements • CSS notation th,tr,td{ border: none; }

  9. Merging Cells • CAN’T BE DONE IN CSS • HTML attributes on td • colspan=“n” • rowspan=“n”

  10. Customization • Borders • Colors • Widths • Spacing • Backgrounds • Fonts • Spacing

  11. Fixed Width • Tables will adjust columns based on content • What if you want them fixed width? • Fixed and same col { width: …; } • Fixed and different <table> <col width=“…”> <tr> OR class per td (but have to put it on every td)

  12. Best solution requires new feature • What are trees? • HTML tags create one! • Called the DOM (Document Object Model) • CSS will allow us to format selectively based on the tree

  13. Most Elegant Solution: CSS Selectors • context tag { • Applies to any tag inside context • Space is a descendant selector • context > tag { • Applies to any tag directly inside context • > is a child selector • Context + tag { • Applies only to a tag that DIRECTLY follows a context • + is an adjacent sibling selector

  14. Tables for Page Layout? • Better to save tables for actual tables • For page layout: floating divs • For navigation and pictures: lists and divs

More Related