1. Web Foundations MONDAY, OCTOBER 28, 2013 LECTURE 19: TABLES

2. Tables The Basic Table CompanyEmployeesFounded ACME Inc10001947 XYZ Corp20001973

3. Tables The Basic Table: The Parts Explained CompanyEmployeesFounded ACME Inc10001947 XYZ Corp20001973 Table is the container that holds all the individual parts CompanyEmployeesFounded ACME Inc10001947 XYZ Corp20001973 CompanyEmployeesFounded ACME Inc10001947 XYZ Corp20001973 Each row is a container that holds all the individual data cells Each cell is a container that holds the individual data

4. Basic Table CompanyEmployeesFounded ACME Inc10001947 XYZ Corp20001973

5. Basic Table CompanyEmployeesFounded ACME Inc10001947 XYZ Corp20001973

6. Basic Table CompanyEmployeesFounded ACME Inc10001947 XYZ Corp20001973

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

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

9. Basic Table CompanyEmployeesFounded ACME Inc10001947 XYZ Corp20001973

10. CompanyEmployeesFounded ACME Inc10001947 XYZ Corp20001973 Column

11. Tables The Basic Table with Border http://faculty.cascadia.edu/cduckett/foundations/tables/basic2.html

12. Tables Firefox Internet Explorer Chrome http://faculty.cascadia.edu/cduckett/foundations/tables/basic2a.html

13. Firefox 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; */ } Internet Explorer Chrome http://faculty.cascadia.edu/cduckett/foundations/tables/basic2b.html Tables: Borders Made Using CSS

14. Tables 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; } http://faculty.cascadia.edu/cduckett/foundations/tables/basic6.html From this… to this…

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

21. Table Width with CSS table { width:50%; } td { width:150px; } or 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 Span Row 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 Other Table Links HTML Table Tutorial HTML Table Tutorial HTML5 Tables HTML5 Tables http://faculty.cascadia.edu/cduckett/foundations/tables/ More Table Examples with CSS Formatting General Table General Table Column Options Column Options Column Styles Column Styles Financial Dark