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

No notes for slide

Topic 06 : HTML Tables

  1. 1. Topic 06 : HTML Tables Er. Pradip Kharbuja
  2. 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. 3. Write the HTML Table Code
  4. 4. HTML Table Code
  5. 5. The colspan Attribute ▪ The colspan attribute merges two or more columns into one column.
  6. 6. The rowspan Attribute ▪ The rowspan attribute merges two or more rows into one row.
  7. 7. Write HTML Code
  8. 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. 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. 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. 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. 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. 13. The <caption> Element ▪ The caption element provides a title for the table.
  14. 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. 15. Table and CSS
  16. 16. Table and CSS
  17. 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. 18. Table and CSS
  19. 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. 20. The <colgroup> and <col> Elements ▪ The <col> and <colgroup> elements allow us to describe specific columns.
  21. 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. 22. Using Tables for Page Layout Amazon - August 2004
  23. 23. Using Tables for Page Layout ▪ The red lines show the table borders. – Complex tables – Tables inside tables - nested tables
  24. 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. 25. End of Topic 6 Topic 6 : HTML Tables