Topic 06 : HTML Tables

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