Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "Web Foundations MONDAY, OCTOBER 28, 2013 LECTURE 19: TABLES."— Presentation transcript:

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

2 Tables The Basic Table CompanyEmployeesFounded ACME Inc XYZ Corp

3 Tables The Basic Table: The Parts Explained CompanyEmployeesFounded ACME Inc XYZ Corp Table is the container that holds all the individual parts CompanyEmployeesFounded ACME Inc XYZ Corp CompanyEmployeesFounded ACME Inc XYZ Corp 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 Inc XYZ Corp

5 Basic Table CompanyEmployeesFounded ACME Inc XYZ Corp

6 Basic Table CompanyEmployeesFounded ACME Inc XYZ Corp

7

8

9 Basic Table CompanyEmployeesFounded ACME Inc XYZ Corp

10 CompanyEmployeesFounded ACME Inc XYZ Corp Column

11 Tables The Basic Table with Border

12 Tables Firefox Internet Explorer Chrome

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 Tables: Borders Made Using CSS

14 Tables The Basic Table with Table Header Tags

15 Tables The Basic Table with Table Header Tags and Background Colors

16 Additional Table Tags Caption

17 Additional Table Tags Border Collapse with CSS table { border-collapse:collapse; } From this… to this…

18 Additional Table Tags Table Padding with CSS td { padding:15px; }

19 Additional Table Tags Alignment with CSS td { text-align:right; }

20 Height and Vertical Alignment with CSS td { height:50px; vertical-align:top; } Additional Table Tags

21 Table Width with CSS table { width:50%; } td { width:150px; } or

22 Row Groups THEAD, TFOOT, and TBODY

23 Spanning Column and Row Spanning

24 Spanning Column and Row Spanning Column Span Row Span Row Column

25 Spanning Column and Row Spanning

26 Spanning Column and Row Spanning

27 Table Inside a Table

28 Tables Other Table Links HTML Table Tutorial HTML Table Tutorial HTML5 Tables HTML5 Tables More Table Examples with CSS Formatting General Table General Table Column Options Column Options Column Styles Column Styles Financial Dark


Download ppt "Web Foundations MONDAY, OCTOBER 28, 2013 LECTURE 19: TABLES."

Similar presentations


Ads by Google