The basics of writing semantically descriptive tables for my Fundamentals class.

1. BUILDING TABLES
by Ray Villalobos

2. WHAT ARE HTML TABLES?

3. WHAT ARE HTML TABLES?
• Organize information in rows and columns

4. WHAT ARE HTML TABLES?
• Organize information in rows and columns
• Useful for certain type of information

5. WHAT DO THEY LOOK LIKE
http://jsfiddle.net/planetoftheweb/CfCgX/

6. WHAT DO THEY LOOK LIKE
• Compound tags
http://jsfiddle.net/planetoftheweb/CfCgX/

7. WHAT DO THEY LOOK LIKE
• Compound tags
• Divided into ROWS <TR> tag
http://jsfiddle.net/planetoftheweb/CfCgX/

8. WHAT DO THEY LOOK LIKE
• Compound tags
• Divided into ROWS <TR> tag
• Each row divided into data cells <TD> or Table Data
http://jsfiddle.net/planetoftheweb/CfCgX/

9. SPANNING ROWS
http://jsfiddle.net/planetoftheweb/CfCgX/1/2/

10. SPANNING ROWS
• Let a cell take up several td’s
http://jsfiddle.net/planetoftheweb/CfCgX/1/2/

11. SPANNING ROWS
• Let a cell take up several td’s
• Colspan & Rowspan
http://jsfiddle.net/planetoftheweb/CfCgX/1/2/

12. SPANNING ROWS
• Let a cell take up several td’s
• Colspan & Rowspan
• Inside TD tags
http://jsfiddle.net/planetoftheweb/CfCgX/1/2/

13. PROBLEMS WITH TABLES
http://jsfiddle.net/planetoftheweb/CfCgX/3/

14. PROBLEMS WITH TABLES
• Tough for search engines to understand
http://jsfiddle.net/planetoftheweb/CfCgX/3/

15. PROBLEMS WITH TABLES
• Tough for search engines to understand
• Lack of semantic info
http://jsfiddle.net/planetoftheweb/CfCgX/3/

16. PROBLEMS WITH TABLES
• Tough for search engines to understand
• Lack of semantic info
• Hard to visualize code
http://jsfiddle.net/planetoftheweb/CfCgX/3/

17. ADDING A CAPTION
http://jsfiddle.net/planetoftheweb/CfCgX/4/

18. ADDING A CAPTION
• Explains content for SEO & Accessibility
http://jsfiddle.net/planetoftheweb/CfCgX/4/

19. ADDING A CAPTION
• Explains content for SEO & Accessibility
• Works as the title
http://jsfiddle.net/planetoftheweb/CfCgX/4/

20. DEFINING HEADERS
http://jsfiddle.net/planetoftheweb/CfCgX/6/

21. DEFINING HEADERS
http://jsfiddle.net/planetoftheweb/CfCgX/6/
• THEAD

22. DEFINING HEADERS
http://jsfiddle.net/planetoftheweb/CfCgX/6/
• THEAD
• Identifies
header

23. DEFINING HEADERS
http://jsfiddle.net/planetoftheweb/CfCgX/6/
• THEAD
• Identifies
header
• Can help to
style forms

24. IDENTIFYING BODY
http://jsfiddle.net/planetoftheweb/CfCgX/7/

25. IDENTIFYING BODY
• TBODY
http://jsfiddle.net/planetoftheweb/CfCgX/7/

26. IDENTIFYING BODY
• TBODY
http://jsfiddle.net/planetoftheweb/CfCgX/7/
• Creates a body section

27. CREATING A FOOTER
http://jsfiddle.net/planetoftheweb/CfCgX/8/

28. CREATING A FOOTER
http://jsfiddle.net/planetoftheweb/CfCgX/8/
• TFOOT

29. CREATING A FOOTER
http://jsfiddle.net/planetoftheweb/CfCgX/8/
• TFOOT
• Code after
THEAD and
before TBODY

30. CREATING A FOOTER
http://jsfiddle.net/planetoftheweb/CfCgX/8/
• TFOOT
• Code after
THEAD and
before TBODY
• Shows up
under TBODY

31. DEFINING HEADINGS
http://jsfiddle.net/planetoftheweb/CfCgX/9/

32. DEFINING HEADINGS
http://jsfiddle.net/planetoftheweb/CfCgX/9/
• TH are like H
tags for forms

33. DEFINING HEADINGS
http://jsfiddle.net/planetoftheweb/CfCgX/9/
• TH are like H
tags for forms
• Identify
headings for
tables

34. DEFINING HEADINGS
http://jsfiddle.net/planetoftheweb/CfCgX/9/
• TH are like H
tags for forms
• Identify
headings for
tables
• Show as
centered bold
in browsers

35. SCOPING HEADINGS
http://jsfiddle.net/planetoftheweb/CfCgX/10/

36. SCOPING HEADINGS
http://jsfiddle.net/planetoftheweb/CfCgX/10/
• Identifies
the
type of TH

37. SCOPING HEADINGS
http://jsfiddle.net/planetoftheweb/CfCgX/10/
• Identifies
the
type of TH
• More semantic
for SEO

38. SCOPING HEADINGS
http://jsfiddle.net/planetoftheweb/CfCgX/10/
• Identifies
the
type of TH
• More semantic
for SEO
• Can target with
the css type
selectors

39. FINISHING UP
http://jsfiddle.net/planetoftheweb/CfCgX/11/

40. FINISHING UP
http://jsfiddle.net/planetoftheweb/CfCgX/11/
• Adding a
border to the
TDs finishes up
the style

41. THE END