Download presentation
Presentation is loading. Please wait.
Published byTerry Titterington Modified over 10 years ago
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.