RV
Uploaded byRay Villalobos
KEY, PDF3,206 views

Building Semantic HTML tables

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.

Embed presentation

Downloaded 19 times
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 LIKE http://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 Table Data http://jsfiddle.net/planetoftheweb/CfCgX/
SPANNING ROWS http://jsfiddle.net/planetoftheweb/CfCgX/1/2/
SPANNING ROWS • Let a cell take up several td’s http://jsfiddle.net/planetoftheweb/CfCgX/1/2/
SPANNING ROWS • Let a cell take up several td’s • Colspan & Rowspan http://jsfiddle.net/planetoftheweb/CfCgX/1/2/
SPANNING ROWS • Let a cell take up several td’s • Colspan & Rowspan • Inside TD tags http://jsfiddle.net/planetoftheweb/CfCgX/1/2/
PROBLEMS WITH TABLES http://jsfiddle.net/planetoftheweb/CfCgX/3/
PROBLEMS WITH TABLES • Tough for search engines to understand http://jsfiddle.net/planetoftheweb/CfCgX/3/
PROBLEMS WITH TABLES • Tough for search engines to understand • Lack of semantic info http://jsfiddle.net/planetoftheweb/CfCgX/3/
PROBLEMS WITH TABLES • Tough for search engines to understand • Lack of semantic info • Hard to visualize code http://jsfiddle.net/planetoftheweb/CfCgX/3/
ADDING A CAPTION http://jsfiddle.net/planetoftheweb/CfCgX/4/
ADDING A CAPTION • Explains content for SEO & Accessibility http://jsfiddle.net/planetoftheweb/CfCgX/4/
ADDING A CAPTION • Explains content for SEO & Accessibility • Works as the title http://jsfiddle.net/planetoftheweb/CfCgX/4/
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 • Shows up under TBODY
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 • Identify headings for tables
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
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 semantic for SEO
SCOPING HEADINGS http://jsfiddle.net/planetoftheweb/CfCgX/10/ • Identifies the type of TH • More semantic for SEO • Can target with the css type selectors
FINISHING UP http://jsfiddle.net/planetoftheweb/CfCgX/11/
FINISHING UP http://jsfiddle.net/planetoftheweb/CfCgX/11/ • Adding a border to the TDs finishes up the style
THE END

More Related Content

PDF
HTML: An Introduction
byRandy Connolly
 
PDF
reveal.js 3.0.0
byHakim El Hattab
 
PPT
Html 5
bych samaram
 
PDF
Git studynotes
byRichard Kuo
 
PDF
Developing CouchApps
bywesthoff
 
PDF
Fedora 4 Deep Dive
byDavid Wilcox
 
PPT
Making HTML Tables Interactive
byMichelle Minkoff
 
PPTX
BITM3730 9-12.pptx
byMattMarino13
 
HTML: An Introduction
byRandy Connolly
 
reveal.js 3.0.0
byHakim El Hattab
 
Html 5
bych samaram
 
Git studynotes
byRichard Kuo
 
Developing CouchApps
bywesthoff
 
Fedora 4 Deep Dive
byDavid Wilcox
 
Making HTML Tables Interactive
byMichelle Minkoff
 
BITM3730 9-12.pptx
byMattMarino13
 

Similar to Building Semantic HTML tables

PPTX
HTML CSS and Web Development
byRahul Mishra
 
PPTX
BITM3730 9-13.pptx
byMattMarino13
 
PPTX
Html 5
byDanellaPatrick
 
PPTX
Introduction_to_HTML_Presentation [Autosaved].pptx
bylirevid966
 
PDF
HTML CSS.pdf
byANKURAGARWAL252666
 
PPTX
Web Development - Lecture 3
bySyed Shahzaib Sohail
 
PPTX
content creator passionate about architecture, culture, and design.
bySuma Angari
 
PDF
Html tutorial
byMukesh Tekwani
 
KEY
Html5, a gentle introduction
byDiego Scataglini
 
PDF
Doing it in style - creating beautiful sites, the web standards way / WebDD /...
byPatrick Lauke
 
PPTX
Introduction to HTML5
byTerry Ryan
 
PPTX
Table and Form HTML&CSS
byYaowaluck Promdee
 
PPTX
Html
byFAKHRUN NISHA
 
PPTX
Html
byFAKHRUN NISHA
 
PPTX
HTML Basics, Web Development Part-2.pptx
byFarzana Younas
 
KEY
Artdm171 Week4 Tags
byGilbert Guerrero
 
PDF
htmlcheatsheet.pdf
byBdBangladesh
 
PDF
HTMLcheatsheet.pdf
byGuyou1
 
PDF
HTMLcheatsheet.pdf
byGuyou1
 
KEY
Html 5, a gentle introduction
byDiego Scataglini
 
HTML CSS and Web Development
byRahul Mishra
 
BITM3730 9-13.pptx
byMattMarino13
 
Html 5
byDanellaPatrick
 
Introduction_to_HTML_Presentation [Autosaved].pptx
bylirevid966
 
HTML CSS.pdf
byANKURAGARWAL252666
 
Web Development - Lecture 3
bySyed Shahzaib Sohail
 
content creator passionate about architecture, culture, and design.
bySuma Angari
 
Html tutorial
byMukesh Tekwani
 
Html5, a gentle introduction
byDiego Scataglini
 
Doing it in style - creating beautiful sites, the web standards way / WebDD /...
byPatrick Lauke
 
Introduction to HTML5
byTerry Ryan
 
Table and Form HTML&CSS
byYaowaluck Promdee
 
Html
byFAKHRUN NISHA
 
Html
byFAKHRUN NISHA
 
HTML Basics, Web Development Part-2.pptx
byFarzana Younas
 
Artdm171 Week4 Tags
byGilbert Guerrero
 
htmlcheatsheet.pdf
byBdBangladesh
 
HTMLcheatsheet.pdf
byGuyou1
 
HTMLcheatsheet.pdf
byGuyou1
 
Html 5, a gentle introduction
byDiego Scataglini
 

More from Ray Villalobos

KEY
Making money with Google's Adsense
byRay Villalobos
 
KEY
Creating forms
byRay Villalobos
 
KEY
Doing business
byRay Villalobos
 
KEY
Analytics essentials
byRay Villalobos
 
KEY
Online Advertising
byRay Villalobos
 
KEY
Social media fundamentals
byRay Villalobos
 
KEY
Working with HTML Lists
byRay Villalobos
 
PPT
Understanding html
byRay Villalobos
 
PPT
CSS Fundamentals
byRay Villalobos
 
Making money with Google's Adsense
byRay Villalobos
 
Creating forms
byRay Villalobos
 
Doing business
byRay Villalobos
 
Analytics essentials
byRay Villalobos
 
Online Advertising
byRay Villalobos
 
Social media fundamentals
byRay Villalobos
 
Working with HTML Lists
byRay Villalobos
 
Understanding html
byRay Villalobos
 
CSS Fundamentals
byRay Villalobos
 

Building Semantic HTML tables

  • 1.
    BUILDING TABLES by Ray Villalobos
  • 2.
  • 3.
    WHAT ARE HTMLTABLES? • Organize information in rows and columns
  • 4.
    WHAT ARE HTMLTABLES? • Organize information in rows and columns • Useful for certain type of information
  • 5.
    WHAT DO THEYLOOK LIKE http://jsfiddle.net/planetoftheweb/CfCgX/
  • 6.
    WHAT DO THEYLOOK LIKE • Compound tags http://jsfiddle.net/planetoftheweb/CfCgX/
  • 7.
    WHAT DO THEYLOOK LIKE • Compound tags • Divided into ROWS <TR> tag http://jsfiddle.net/planetoftheweb/CfCgX/
  • 8.
    WHAT DO THEYLOOK LIKE • Compound tags • Divided into ROWS <TR> tag • Each row divided into data cells <TD> or Table Data http://jsfiddle.net/planetoftheweb/CfCgX/
  • 9.
  • 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.

Editor's Notes