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

264
views

Published on

Published in: Education

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
264
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
42
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 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 : HTML Tables