Download
web foundations n.
Skip this Video
Loading SlideShow in 5 Seconds..
Web Foundations PowerPoint Presentation
Download Presentation
Web Foundations

Web Foundations

103 Vues Download Presentation
Télécharger la présentation

Web Foundations

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Web Foundations Monday, October 28, 2013 LECTURE 19: Tables

  2. Tables The Basic Table

  3. Tables The Basic Table: The Parts Explained Table is the container that holds all the individual parts <table> <tr> Each row is a container that holds all the individual data cells <td> Each cell is a container that holds the individual data

  4. Basic Table <table> </table>

  5. Basic Table <table> <tr> </tr> <tr> </tr> </tr> <tr> </table>

  6. Basic Table <table> <tr> <td> </td> <td> <td> </tr> </td> </td> <td> <tr> <td> <td> </tr> </td> </td> </td> </tr> <tr> <td> </td> </td> <td> <td> </td> </table>

  7. http://faculty.cascadia.edu/cduckett/foundations/tables/basic0.htmlhttp://faculty.cascadia.edu/cduckett/foundations/tables/basic0.html

  8. http://faculty.cascadia.edu/cduckett/foundations/tables/basic.htmlhttp://faculty.cascadia.edu/cduckett/foundations/tables/basic.html

  9. Basic Table <table> <tr> <td> </td> <td> <td> </tr> </td> </td> <td> <tr> <td> <td> </tr> </td> </td> </td> </tr> <tr> <td> </td> </td> <td> <td> </td> </table>

  10. Column Column Column <table> <tr> <td> </td> <td> <td> </tr> </td> </td> <td> <tr> <td> <td> </tr> </td> </td> </td> </tr> <tr> <td> </td> </td> <td> <td> </td> </table>

  11. Tables <table border=1> The Basic Table with Border http://faculty.cascadia.edu/cduckett/foundations/tables/basic2.html

  12. Tables <table border=8> Firefox Chrome Internet Explorer http://faculty.cascadia.edu/cduckett/foundations/tables/basic2a.html

  13. Tables: Borders Made Using CSS Firefox <style> table{ border-color: #000; border-width: 8px; border-style: solid; /* Same as: border: 8px solid #000; */ } td { border-color: #369; border-width: 2px; border-style: solid; /* Same as: border: 2px solid #369; */ } </style> Internet Explorer Chrome http://faculty.cascadia.edu/cduckett/foundations/tables/basic2b.html

  14. Tables <th> The Basic Table with Table Header Tags http://faculty.cascadia.edu/cduckett/foundations/tables/basic3.html http://faculty.cascadia.edu/cduckett/foundations/tables/basic3a.html http://faculty.cascadia.edu/cduckett/foundations/tables/basic3b.html

  15. Tables The Basic Table with Table Header Tags and Background Colors http://faculty.cascadia.edu/cduckett/foundations/tables/basic4.html

  16. Additional Table Tags Caption http://faculty.cascadia.edu/cduckett/foundations/tables/basic5.html

  17. Additional Table Tags Border Collapse with CSS table { border-collapse:collapse; } From this… to this… http://faculty.cascadia.edu/cduckett/foundations/tables/basic6.html

  18. Additional Table Tags Table Padding with CSS td { padding:15px; } http://faculty.cascadia.edu/cduckett/foundations/tables/basic7.html

  19. Additional Table Tags Alignment with CSS td { text-align:right; } http://faculty.cascadia.edu/cduckett/foundations/tables/basic8.html

  20. Additional Table Tags Height and Vertical Alignment with CSS td { height:50px; vertical-align:top; } http://faculty.cascadia.edu/cduckett/foundations/tables/basic9.html

  21. Additional Table Tags Table Width with CSS table { width:50%; } or td { width:150px; } http://faculty.cascadia.edu/cduckett/foundations/tables/basic10.html http://faculty.cascadia.edu/cduckett/foundations/tables/basic11.html

  22. Row Groups THEAD, TFOOT, and TBODY http://faculty.cascadia.edu/cduckett/foundations/tables/basic12.html

  23. Spanning Column and Row Spanning http://faculty.cascadia.edu/cduckett/foundations/tables/basic13.html

  24. Spanning Column and Row Spanning Column Span  Row Row Span  Row Row Row Column Column Column

  25. Spanning Column and Row Spanning http://faculty.cascadia.edu/cduckett/foundations/tables/basic13a.html

  26. Spanning Column and Row Spanning http://faculty.cascadia.edu/cduckett/foundations/tables/basic14.html

  27. Table Inside a Table http://faculty.cascadia.edu/cduckett/foundations/tables/basic15.html

  28. Tables http://faculty.cascadia.edu/cduckett/foundations/tables/ • More Table Examples with CSS Formatting • General Table • Column Options • Column Styles • Financial • Dark • Other Table Links • HTML Table Tutorial • HTML5 Tables