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.
- 15. TABLEAND CSS
- 16. TABLEAND CSS
- 17. TABLEAND CSS The border-collapse property is specific to tables. Specifies if the cell borders are merged The default value is separate.
- 18. TABLEAND 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 : HTMLTables