Topic 06 : HTML Tables
Er. Pradip Kharbuja
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
Write the HTML Table Code
HTML Table Code
The colspan Attribute
▪ The colspan attribute merges two or more columns into one column.
The rowspan Attribute
▪ The rowspan attribute merges two or more rows into one row.
Write HTML Code
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.
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.
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
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
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.
The <caption> Element
▪ The caption element provides a title for the table.
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.
Table and CSS
Table and CSS
Table and CSS
▪ The border-collapse property is specific to tables.
– Specifies if the cell borders are merged
– The default value is separate.
Table and CSS
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.
The <colgroup> and <col> Elements
▪ The <col> and <colgroup> elements allow us to describe specific columns.
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.
Using Tables for Page Layout
http://www.amazon.com/
Amazon - August 2004
Using Tables for Page Layout
▪ The red lines show the table borders.
– Complex tables
– Tables inside tables - nested tables
http://www.amazon.com/
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
End of Topic 6
Topic 6 : HTML Tables
Top Related