BUILDING TABLES  by Ray Villalobos
WHAT ARE HTML TABLES?
WHAT ARE HTML TABLES?• Organize   information in rows and columns
WHAT ARE HTML TABLES?• Organize   information in rows and columns• Useful   for certain type of information
WHAT DO THEY LOOK LIKEhttp://jsfiddle.net/planetoftheweb/CfCgX/
WHAT DO THEY LOOK LIKE• Compound         tags  http://jsfiddle.net/planetoftheweb/CfCgX/
WHAT DO THEY LOOK LIKE• Compound         tags• Divided    into ROWS <TR> tag  http://jsfiddle.net/planetoftheweb/CfCgX/
WHAT DO THEY LOOK LIKE• Compound         tags• Divided    into ROWS <TR> tag• Each   row divided into data cells <TD> or T...
SPANNING ROWShttp://jsfiddle.net/planetoftheweb/CfCgX/1/2/
SPANNING ROWS • Let   a cell take up several td’shttp://jsfiddle.net/planetoftheweb/CfCgX/1/2/
SPANNING ROWS • Let   a cell take up several td’s • Colspan    & Rowspanhttp://jsfiddle.net/planetoftheweb/CfCgX/1/2/
SPANNING ROWS • Let   a cell take up several td’s • Colspan    & Rowspan • Inside TD   tagshttp://jsfiddle.net/planetofthew...
PROBLEMS WITH TABLES             http://jsfiddle.net/planetoftheweb/CfCgX/3/
PROBLEMS WITH TABLES•   Tough for search engines to understand                                      http://jsfiddle.net/pla...
PROBLEMS WITH TABLES•   Tough for search engines to understand•   Lack of semantic info                                   ...
PROBLEMS WITH TABLES•   Tough for search engines to understand•   Lack of semantic info•   Hard to visualize code         ...
ADDING A CAPTION           http://jsfiddle.net/planetoftheweb/CfCgX/4/
ADDING A CAPTION• Explains   content for SEO & Accessibility                                         http://jsfiddle.net/pl...
ADDING A CAPTION• Explains   content for SEO & Accessibility• Works   as the title                                        ...
DEFINING HEADERS      http://jsfiddle.net/planetoftheweb/CfCgX/6/
DEFINING HEADERS                http://jsfiddle.net/planetoftheweb/CfCgX/6/• THEAD
DEFINING HEADERS                http://jsfiddle.net/planetoftheweb/CfCgX/6/• THEAD• Identifies header
DEFINING HEADERS                http://jsfiddle.net/planetoftheweb/CfCgX/6/• THEAD• Identifies header• Can help to style forms
IDENTIFYING BODY         http://jsfiddle.net/planetoftheweb/CfCgX/7/
IDENTIFYING BODY• TBODY              http://jsfiddle.net/planetoftheweb/CfCgX/7/
IDENTIFYING BODY• TBODY                             http://jsfiddle.net/planetoftheweb/CfCgX/7/• Creates   a body section
CREATING A FOOTER      http://jsfiddle.net/planetoftheweb/CfCgX/8/
CREATING A FOOTER            http://jsfiddle.net/planetoftheweb/CfCgX/8/• TFOOT
CREATING A FOOTER                http://jsfiddle.net/planetoftheweb/CfCgX/8/• TFOOT• Code after THEAD and before TBODY
CREATING A FOOTER                http://jsfiddle.net/planetoftheweb/CfCgX/8/• TFOOT• Code after THEAD and before TBODY• Sho...
DEFINING HEADINGS            http://jsfiddle.net/planetoftheweb/CfCgX/9/
DEFINING HEADINGS                     http://jsfiddle.net/planetoftheweb/CfCgX/9/• TH are like H tags for forms
DEFINING HEADINGS                         http://jsfiddle.net/planetoftheweb/CfCgX/9/• TH are like H tags for forms• Identi...
DEFINING HEADINGS                         http://jsfiddle.net/planetoftheweb/CfCgX/9/• TH are like H tags for forms• Identi...
SCOPING HEADINGS         http://jsfiddle.net/planetoftheweb/CfCgX/10/
SCOPING HEADINGS                  http://jsfiddle.net/planetoftheweb/CfCgX/10/• Identifies          the type of TH
SCOPING HEADINGS                  http://jsfiddle.net/planetoftheweb/CfCgX/10/• Identifies          the type of TH• More sem...
SCOPING HEADINGS                    http://jsfiddle.net/planetoftheweb/CfCgX/10/• Identifies          the type of TH• More s...
FINISHING UP       http://jsfiddle.net/planetoftheweb/CfCgX/11/
FINISHING UP                         http://jsfiddle.net/planetoftheweb/CfCgX/11/• Adding  a border to the TDs finishes up t...
THE END
Upcoming SlideShare
Loading in...5
×

Building Semantic HTML tables

3,643

Published on

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

Published in: Self Improvement, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,643
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

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
  • Building Semantic HTML tables

    1. 1. BUILDING TABLES by Ray Villalobos
    2. 2. WHAT ARE HTML TABLES?
    3. 3. WHAT ARE HTML TABLES?• Organize information in rows and columns
    4. 4. WHAT ARE HTML TABLES?• Organize information in rows and columns• Useful for certain type of information
    5. 5. WHAT DO THEY LOOK LIKEhttp://jsfiddle.net/planetoftheweb/CfCgX/
    6. 6. WHAT DO THEY LOOK LIKE• Compound tags http://jsfiddle.net/planetoftheweb/CfCgX/
    7. 7. WHAT DO THEY LOOK LIKE• Compound tags• Divided into ROWS <TR> tag http://jsfiddle.net/planetoftheweb/CfCgX/
    8. 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. 9. SPANNING ROWShttp://jsfiddle.net/planetoftheweb/CfCgX/1/2/
    10. 10. SPANNING ROWS • Let a cell take up several td’shttp://jsfiddle.net/planetoftheweb/CfCgX/1/2/
    11. 11. SPANNING ROWS • Let a cell take up several td’s • Colspan & Rowspanhttp://jsfiddle.net/planetoftheweb/CfCgX/1/2/
    12. 12. SPANNING ROWS • Let a cell take up several td’s • Colspan & Rowspan • Inside TD tagshttp://jsfiddle.net/planetoftheweb/CfCgX/1/2/
    13. 13. PROBLEMS WITH TABLES http://jsfiddle.net/planetoftheweb/CfCgX/3/
    14. 14. PROBLEMS WITH TABLES• Tough for search engines to understand http://jsfiddle.net/planetoftheweb/CfCgX/3/
    15. 15. PROBLEMS WITH TABLES• Tough for search engines to understand• Lack of semantic info http://jsfiddle.net/planetoftheweb/CfCgX/3/
    16. 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. 17. ADDING A CAPTION http://jsfiddle.net/planetoftheweb/CfCgX/4/
    18. 18. ADDING A CAPTION• Explains content for SEO & Accessibility http://jsfiddle.net/planetoftheweb/CfCgX/4/
    19. 19. ADDING A CAPTION• Explains content for SEO & Accessibility• Works as the title http://jsfiddle.net/planetoftheweb/CfCgX/4/
    20. 20. DEFINING HEADERS http://jsfiddle.net/planetoftheweb/CfCgX/6/
    21. 21. DEFINING HEADERS http://jsfiddle.net/planetoftheweb/CfCgX/6/• THEAD
    22. 22. DEFINING HEADERS http://jsfiddle.net/planetoftheweb/CfCgX/6/• THEAD• Identifies header
    23. 23. DEFINING HEADERS http://jsfiddle.net/planetoftheweb/CfCgX/6/• THEAD• Identifies header• Can help to style forms
    24. 24. IDENTIFYING BODY http://jsfiddle.net/planetoftheweb/CfCgX/7/
    25. 25. IDENTIFYING BODY• TBODY http://jsfiddle.net/planetoftheweb/CfCgX/7/
    26. 26. IDENTIFYING BODY• TBODY http://jsfiddle.net/planetoftheweb/CfCgX/7/• Creates a body section
    27. 27. CREATING A FOOTER http://jsfiddle.net/planetoftheweb/CfCgX/8/
    28. 28. CREATING A FOOTER http://jsfiddle.net/planetoftheweb/CfCgX/8/• TFOOT
    29. 29. CREATING A FOOTER http://jsfiddle.net/planetoftheweb/CfCgX/8/• TFOOT• Code after THEAD and before TBODY
    30. 30. CREATING A FOOTER http://jsfiddle.net/planetoftheweb/CfCgX/8/• TFOOT• Code after THEAD and before TBODY• Shows up under TBODY
    31. 31. DEFINING HEADINGS http://jsfiddle.net/planetoftheweb/CfCgX/9/
    32. 32. DEFINING HEADINGS http://jsfiddle.net/planetoftheweb/CfCgX/9/• TH are like H tags for forms
    33. 33. DEFINING HEADINGS http://jsfiddle.net/planetoftheweb/CfCgX/9/• TH are like H tags for forms• Identify headings for tables
    34. 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. 35. SCOPING HEADINGS http://jsfiddle.net/planetoftheweb/CfCgX/10/
    36. 36. SCOPING HEADINGS http://jsfiddle.net/planetoftheweb/CfCgX/10/• Identifies the type of TH
    37. 37. SCOPING HEADINGS http://jsfiddle.net/planetoftheweb/CfCgX/10/• Identifies the type of TH• More semantic for SEO
    38. 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. 39. FINISHING UP http://jsfiddle.net/planetoftheweb/CfCgX/11/
    40. 40. FINISHING UP http://jsfiddle.net/planetoftheweb/CfCgX/11/• Adding a border to the TDs finishes up the style
    41. 41. THE END
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×