SlideShare a Scribd company logo
TABLE
STRUCTURE
HTML elements can be
used to describe tabular
data
The <table> element
defines the start and end of
the table
The <tr> element defines
the start and end of a row
in the table
The <td> element defines a
table cell
WRITE THE HTML TABLE CODE
HTML TABLECODE
The colspan Attribute
The colspan attribute merges two or more
columns into one column.
The rowspan Attribute
The rowspan attribute merges two or more rows
into one row.
WRITE HTML CODE
WRITE HTML CODE
THE <THEAD>,<TFOOT> &
<TBODY> ELEMENTS
We can specify rows as being part of the
table header, the table body or the table
footer.
The <thead>, <tfoot> and <tbody> allow us
to add extra meaning to the table contents.
THE <THEAD>,<TFOOT> &
<TBODY> ELEMENTS
The <tfoot> element should be added before the
<tbody>.
Tables are perfectly valid without the use of these
elements, so for the simplicity, they are often
ommited.
ACCESSIBLE
TABLES
Screen readers
linearize tables.
Read out the contents in
order
From left to right, top to
bottom
In this example, the
screen reader would
read
S.N., Item, Price, Qty,
Amount, 1, Book, 200, 5,
1000
ACCESSIBLE
TABLES
There are a number of HTML features which can
be used to enhance the accessibility of tables.
1. The summary attribute
2. The <caption> element
3. The <th> element
THE SUMMARY
ATTRIBUTE
The summary attribute can be read out by screen
readers.
It should describe the structure of the table, which
can help the user make sense of the table data
when it is linearised.
THE <CAPTION>
ELEMENT
▪ The caption element provides a title for the table.
THE <TH>
ELEMENT
The <th> element specifies that the cell contains
table header information.
Distinguishes the headers from data
<th> elements are usually displayed in bold and
center.
TABLEAND CSS
TABLEAND CSS
TABLEAND CSS
The border-collapse
property is specific to
tables.
Specifies if the cell borders are
merged
The default value is separate.
TABLEAND CSS
HIGHLIGHTING SPECIFIC
CELLS
We can style individual cells,
rows and columns using class
and id attributes.
The <col> and <colgroup>
elements allow us to target
columns.
THE <COLGROUP> AND <COL>
ELEMENTS
The <col> and
<colgroup> elements
allow us to describe
specific columns.
USING TABLES FOR PAGE
LAYOUT
Before widespread browser support for CSS,
tables were often used for page layout.
With borders not visible, the table acts as a grid
setting out the page contents.
The following slide is a screen shot of the
Amazon website from August 2004.
Tables are used to design the page.
Amazon now have a CSS driven design.
USING TABLES FOR PAGE
LAYOUT
http://www.amazon.com/
Amazon - August 2004
USING TABLES FOR PAGE
LAYOUT
▪ The red lines
show the table
borders.
– Complex tables
– Tables inside
tables - nested
tables
http://www.amazon.com/
TABLES AND MOBILE
DEVICES
Tables do not work well on small screen sizes.
 User has to scroll horizontally to view contents
Displaying complex tables can be computationally
intensive.
 Mobile devices have limited processing power
End of Topic 6
Topic 6 : HTMLTables

More Related Content

Similar to htmltables-180721142906-1.pptx

HTML Walkthrough Internship Course
HTML Walkthrough Internship CourseHTML Walkthrough Internship Course
HTML Walkthrough Internship Course
Zoltan Iszlai
 
Html table
Html tableHtml table
Html table
JayjZens
 
Table in MS Frontpage 2003
Table in MS Frontpage 2003Table in MS Frontpage 2003
Table in MS Frontpage 2003Ann Alcid
 
Organizing Content with Lists and Tables
Organizing Content with Lists and TablesOrganizing Content with Lists and Tables
Organizing Content with Lists and Tables
Nicole Ryan
 
HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language)HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language)
Jishan Ali
 
HTML Tables in Omeka
HTML Tables in OmekaHTML Tables in Omeka
HTML Tables in Omeka
American Antiquarian Society
 
Html Basic Tags
Html Basic TagsHtml Basic Tags
Html Basic Tags
Richa Singh
 
ASP.NET 10 - Data Controls
ASP.NET 10 - Data ControlsASP.NET 10 - Data Controls
ASP.NET 10 - Data Controls
Randy Connolly
 
HTML Tables
HTML TablesHTML Tables
HTML Tables
Nisa Soomro
 
Web design - Working with tables in HTML
Web design - Working with tables in HTMLWeb design - Working with tables in HTML
Web design - Working with tables in HTML
Mustafa Kamel Mohammadi
 
Session on common html table
Session on common html tableSession on common html table
Session on common html table
Rahul Kumar
 
Unit-1 SQL fundamentals.docx SQL commands used to create table, insert values...
Unit-1 SQL fundamentals.docx SQL commands used to create table, insert values...Unit-1 SQL fundamentals.docx SQL commands used to create table, insert values...
Unit-1 SQL fundamentals.docx SQL commands used to create table, insert values...
SakkaravarthiS1
 
Tables
TablesTables
Tables
savitamhaske
 
Table and Form HTML&CSS
Table and Form HTML&CSSTable and Form HTML&CSS
Table and Form HTML&CSS
Yaowaluck Promdee
 
Web designing
Web designingWeb designing
Web designing
Prof. Dr. K. Adisesha
 
Web I - 03 - Tables
Web I - 03 - TablesWeb I - 03 - Tables
Web I - 03 - Tables
Randy Connolly
 
Web Development - Lecture 3
Web Development - Lecture 3Web Development - Lecture 3
Web Development - Lecture 3
Syed Shahzaib Sohail
 
Web Design & Development - Session 4
Web Design & Development - Session 4Web Design & Development - Session 4
Web Design & Development - Session 4
Shahrzad Peyman
 

Similar to htmltables-180721142906-1.pptx (20)

HTML Walkthrough Internship Course
HTML Walkthrough Internship CourseHTML Walkthrough Internship Course
HTML Walkthrough Internship Course
 
Html table
Html tableHtml table
Html table
 
Table in MS Frontpage 2003
Table in MS Frontpage 2003Table in MS Frontpage 2003
Table in MS Frontpage 2003
 
Organizing Content with Lists and Tables
Organizing Content with Lists and TablesOrganizing Content with Lists and Tables
Organizing Content with Lists and Tables
 
belajar HTML 3
belajar HTML 3belajar HTML 3
belajar HTML 3
 
HTML Tables
HTML TablesHTML Tables
HTML Tables
 
HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language)HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language)
 
HTML Tables in Omeka
HTML Tables in OmekaHTML Tables in Omeka
HTML Tables in Omeka
 
Html Basic Tags
Html Basic TagsHtml Basic Tags
Html Basic Tags
 
ASP.NET 10 - Data Controls
ASP.NET 10 - Data ControlsASP.NET 10 - Data Controls
ASP.NET 10 - Data Controls
 
HTML Tables
HTML TablesHTML Tables
HTML Tables
 
Web design - Working with tables in HTML
Web design - Working with tables in HTMLWeb design - Working with tables in HTML
Web design - Working with tables in HTML
 
Session on common html table
Session on common html tableSession on common html table
Session on common html table
 
Unit-1 SQL fundamentals.docx SQL commands used to create table, insert values...
Unit-1 SQL fundamentals.docx SQL commands used to create table, insert values...Unit-1 SQL fundamentals.docx SQL commands used to create table, insert values...
Unit-1 SQL fundamentals.docx SQL commands used to create table, insert values...
 
Tables
TablesTables
Tables
 
Table and Form HTML&CSS
Table and Form HTML&CSSTable and Form HTML&CSS
Table and Form HTML&CSS
 
Web designing
Web designingWeb designing
Web designing
 
Web I - 03 - Tables
Web I - 03 - TablesWeb I - 03 - Tables
Web I - 03 - Tables
 
Web Development - Lecture 3
Web Development - Lecture 3Web Development - Lecture 3
Web Development - Lecture 3
 
Web Design & Development - Session 4
Web Design & Development - Session 4Web Design & Development - Session 4
Web Design & Development - Session 4
 

Recently uploaded

Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
MysoreMuleSoftMeetup
 
Polish students' mobility in the Czech Republic
Polish students' mobility in the Czech RepublicPolish students' mobility in the Czech Republic
Polish students' mobility in the Czech Republic
Anna Sz.
 
Thesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.pptThesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.ppt
EverAndrsGuerraGuerr
 
CLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCE
CLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCECLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCE
CLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCE
BhavyaRajput3
 
The Roman Empire A Historical Colossus.pdf
The Roman Empire A Historical Colossus.pdfThe Roman Empire A Historical Colossus.pdf
The Roman Empire A Historical Colossus.pdf
kaushalkr1407
 
2024.06.01 Introducing a competency framework for languag learning materials ...
2024.06.01 Introducing a competency framework for languag learning materials ...2024.06.01 Introducing a competency framework for languag learning materials ...
2024.06.01 Introducing a competency framework for languag learning materials ...
Sandy Millin
 
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
siemaillard
 
Palestine last event orientationfvgnh .pptx
Palestine last event orientationfvgnh .pptxPalestine last event orientationfvgnh .pptx
Palestine last event orientationfvgnh .pptx
RaedMohamed3
 
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
Nguyen Thanh Tu Collection
 
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
Levi Shapiro
 
The geography of Taylor Swift - some ideas
The geography of Taylor Swift - some ideasThe geography of Taylor Swift - some ideas
The geography of Taylor Swift - some ideas
GeoBlogs
 
Overview on Edible Vaccine: Pros & Cons with Mechanism
Overview on Edible Vaccine: Pros & Cons with MechanismOverview on Edible Vaccine: Pros & Cons with Mechanism
Overview on Edible Vaccine: Pros & Cons with Mechanism
DeeptiGupta154
 
Operation Blue Star - Saka Neela Tara
Operation Blue Star   -  Saka Neela TaraOperation Blue Star   -  Saka Neela Tara
Operation Blue Star - Saka Neela Tara
Balvir Singh
 
How to Make a Field invisible in Odoo 17
How to Make a Field invisible in Odoo 17How to Make a Field invisible in Odoo 17
How to Make a Field invisible in Odoo 17
Celine George
 
Guidance_and_Counselling.pdf B.Ed. 4th Semester
Guidance_and_Counselling.pdf B.Ed. 4th SemesterGuidance_and_Counselling.pdf B.Ed. 4th Semester
Guidance_and_Counselling.pdf B.Ed. 4th Semester
Atul Kumar Singh
 
Synthetic Fiber Construction in lab .pptx
Synthetic Fiber Construction in lab .pptxSynthetic Fiber Construction in lab .pptx
Synthetic Fiber Construction in lab .pptx
Pavel ( NSTU)
 
"Protectable subject matters, Protection in biotechnology, Protection of othe...
"Protectable subject matters, Protection in biotechnology, Protection of othe..."Protectable subject matters, Protection in biotechnology, Protection of othe...
"Protectable subject matters, Protection in biotechnology, Protection of othe...
SACHIN R KONDAGURI
 
The approach at University of Liverpool.pptx
The approach at University of Liverpool.pptxThe approach at University of Liverpool.pptx
The approach at University of Liverpool.pptx
Jisc
 
Unit 8 - Information and Communication Technology (Paper I).pdf
Unit 8 - Information and Communication Technology (Paper I).pdfUnit 8 - Information and Communication Technology (Paper I).pdf
Unit 8 - Information and Communication Technology (Paper I).pdf
Thiyagu K
 
Francesca Gottschalk - How can education support child empowerment.pptx
Francesca Gottschalk - How can education support child empowerment.pptxFrancesca Gottschalk - How can education support child empowerment.pptx
Francesca Gottschalk - How can education support child empowerment.pptx
EduSkills OECD
 

Recently uploaded (20)

Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
 
Polish students' mobility in the Czech Republic
Polish students' mobility in the Czech RepublicPolish students' mobility in the Czech Republic
Polish students' mobility in the Czech Republic
 
Thesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.pptThesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.ppt
 
CLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCE
CLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCECLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCE
CLASS 11 CBSE B.St Project AIDS TO TRADE - INSURANCE
 
The Roman Empire A Historical Colossus.pdf
The Roman Empire A Historical Colossus.pdfThe Roman Empire A Historical Colossus.pdf
The Roman Empire A Historical Colossus.pdf
 
2024.06.01 Introducing a competency framework for languag learning materials ...
2024.06.01 Introducing a competency framework for languag learning materials ...2024.06.01 Introducing a competency framework for languag learning materials ...
2024.06.01 Introducing a competency framework for languag learning materials ...
 
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 
Palestine last event orientationfvgnh .pptx
Palestine last event orientationfvgnh .pptxPalestine last event orientationfvgnh .pptx
Palestine last event orientationfvgnh .pptx
 
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
BÀI TẬP BỔ TRỢ TIẾNG ANH GLOBAL SUCCESS LỚP 3 - CẢ NĂM (CÓ FILE NGHE VÀ ĐÁP Á...
 
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
 
The geography of Taylor Swift - some ideas
The geography of Taylor Swift - some ideasThe geography of Taylor Swift - some ideas
The geography of Taylor Swift - some ideas
 
Overview on Edible Vaccine: Pros & Cons with Mechanism
Overview on Edible Vaccine: Pros & Cons with MechanismOverview on Edible Vaccine: Pros & Cons with Mechanism
Overview on Edible Vaccine: Pros & Cons with Mechanism
 
Operation Blue Star - Saka Neela Tara
Operation Blue Star   -  Saka Neela TaraOperation Blue Star   -  Saka Neela Tara
Operation Blue Star - Saka Neela Tara
 
How to Make a Field invisible in Odoo 17
How to Make a Field invisible in Odoo 17How to Make a Field invisible in Odoo 17
How to Make a Field invisible in Odoo 17
 
Guidance_and_Counselling.pdf B.Ed. 4th Semester
Guidance_and_Counselling.pdf B.Ed. 4th SemesterGuidance_and_Counselling.pdf B.Ed. 4th Semester
Guidance_and_Counselling.pdf B.Ed. 4th Semester
 
Synthetic Fiber Construction in lab .pptx
Synthetic Fiber Construction in lab .pptxSynthetic Fiber Construction in lab .pptx
Synthetic Fiber Construction in lab .pptx
 
"Protectable subject matters, Protection in biotechnology, Protection of othe...
"Protectable subject matters, Protection in biotechnology, Protection of othe..."Protectable subject matters, Protection in biotechnology, Protection of othe...
"Protectable subject matters, Protection in biotechnology, Protection of othe...
 
The approach at University of Liverpool.pptx
The approach at University of Liverpool.pptxThe approach at University of Liverpool.pptx
The approach at University of Liverpool.pptx
 
Unit 8 - Information and Communication Technology (Paper I).pdf
Unit 8 - Information and Communication Technology (Paper I).pdfUnit 8 - Information and Communication Technology (Paper I).pdf
Unit 8 - Information and Communication Technology (Paper I).pdf
 
Francesca Gottschalk - How can education support child empowerment.pptx
Francesca Gottschalk - How can education support child empowerment.pptxFrancesca Gottschalk - How can education support child empowerment.pptx
Francesca Gottschalk - How can education support child empowerment.pptx
 

htmltables-180721142906-1.pptx

  • 1. TABLE STRUCTURE HTML elements can be used to describe tabular data The <table> element defines the start and end of the table The <tr> element defines the start and end of a row in the table The <td> element defines a table cell
  • 2. WRITE THE HTML TABLE CODE
  • 4. The colspan Attribute The colspan attribute merges two or more columns into one column.
  • 5. The rowspan Attribute The rowspan attribute merges two or more rows into one row.
  • 8. THE <THEAD>,<TFOOT> & <TBODY> ELEMENTS We can specify rows as being part of the table header, the table body or the table footer. The <thead>, <tfoot> and <tbody> allow us to add extra meaning to the table contents.
  • 9. THE <THEAD>,<TFOOT> & <TBODY> ELEMENTS The <tfoot> element should be added before the <tbody>. Tables are perfectly valid without the use of these elements, so for the simplicity, they are often ommited.
  • 10. ACCESSIBLE TABLES Screen readers linearize tables. Read out the contents in order From left to right, top to bottom In this example, the screen reader would read S.N., Item, Price, Qty, Amount, 1, Book, 200, 5, 1000
  • 11. ACCESSIBLE TABLES There are a number of HTML features which can be used to enhance the accessibility of tables. 1. The summary attribute 2. The <caption> element 3. The <th> element
  • 12. THE SUMMARY ATTRIBUTE The summary attribute can be read out by screen readers. It should describe the structure of the table, which can help the user make sense of the table data when it is linearised.
  • 13. THE <CAPTION> ELEMENT ▪ The caption element provides a title for the table.
  • 14. THE <TH> ELEMENT The <th> element specifies that the cell contains table header information. Distinguishes the headers from data <th> elements are usually displayed in bold and center.
  • 17. TABLEAND CSS The border-collapse property is specific to tables. Specifies if the cell borders are merged The default value is separate.
  • 19. HIGHLIGHTING SPECIFIC CELLS We can style individual cells, rows and columns using class and id attributes. The <col> and <colgroup> elements allow us to target columns.
  • 20. THE <COLGROUP> AND <COL> ELEMENTS The <col> and <colgroup> elements allow us to describe specific columns.
  • 21. USING TABLES FOR PAGE LAYOUT Before widespread browser support for CSS, tables were often used for page layout. With borders not visible, the table acts as a grid setting out the page contents. The following slide is a screen shot of the Amazon website from August 2004. Tables are used to design the page. Amazon now have a CSS driven design.
  • 22. USING TABLES FOR PAGE LAYOUT http://www.amazon.com/ Amazon - August 2004
  • 23. USING TABLES FOR PAGE LAYOUT ▪ The red lines show the table borders. – Complex tables – Tables inside tables - nested tables http://www.amazon.com/
  • 24. TABLES AND MOBILE DEVICES Tables do not work well on small screen sizes.  User has to scroll horizontally to view contents Displaying complex tables can be computationally intensive.  Mobile devices have limited processing power
  • 25. End of Topic 6 Topic 6 : HTMLTables