Your SlideShare is downloading. ×
Topic 06 : HTML Tables
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Topic 06 : HTML Tables


Published on

Published in: Education

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Topic 06 : HTML Tables Er. Pradip Kharbuja
  • 2. 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
  • 3. Write the HTML Table Code
  • 4. HTML Table Code
  • 5. The colspan Attribute ▪ The colspan attribute merges two or more columns into one column.
  • 6. The rowspan Attribute ▪ The rowspan attribute merges two or more rows into one row.
  • 7. Write HTML Code
  • 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.
  • 15. Table and CSS
  • 16. Table and CSS
  • 17. Table and CSS ▪ The border-collapse property is specific to tables. – Specifies if the cell borders are merged – The default value is separate.
  • 18. Table and CSS
  • 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 Amazon - August 2004
  • 23. Using Tables for Page Layout ▪ The red lines show the table borders. – Complex tables – Tables inside tables - nested tables
  • 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 : HTML Tables