The document discusses HTML tables and their structure. HTML tables organize information into rows and columns using <table>, <tr>, and <td> tags. Additional tags like <thead>, <tbody>, <tfoot> add semantics and help with styling. <caption> provides a title. <th> defines table headings. Attributes like colspan and rowspan let cells span multiple rows or columns. The document also covers best practices for accessibility and problems to avoid with 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/
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/
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
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