1 / 28

Web Foundations

This lecture covers the fundamental components of HTML tables, including the structure defined by `<table>`, `<tr>`, and `<td>` tags. You will learn how to create basic tables, including understanding the role of rows and cells in organizing data. The discussion also highlights various styling options with CSS, including borders, padding, alignment, and advanced features like column and row spanning. This foundational knowledge is essential for anyone looking to build structured data displays on the web.

ishana
Télécharger la présentation

Web Foundations

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

More Related