Building Semantic HTML tables

  • 3,338 views
Uploaded on

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,338
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
4
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 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 LIKEhttp://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 ROWShttp://jsfiddle.net/planetoftheweb/CfCgX/1/2/
  • 10. SPANNING ROWS • Let a cell take up several td’shttp://jsfiddle.net/planetoftheweb/CfCgX/1/2/
  • 11. SPANNING ROWS • Let a cell take up several td’s • Colspan & Rowspanhttp://jsfiddle.net/planetoftheweb/CfCgX/1/2/
  • 12. SPANNING ROWS • Let a cell take up several td’s • Colspan & Rowspan • Inside TD tagshttp://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