Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html tables


Published on

Html tables

Published in: Education
  • Login to see the comments

  • Be the first to like this

Html tables

  1. 1. Prepared By: Er. Nawaraj Bhandari DESIGNING AND DEVELOPING A WEBSITE Topic 6: HTML Tables
  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