Topic 06 : HTML Tables

25 %
75 %
Information about Topic 06 : HTML Tables

Published on March 7, 2014

Author: PradipKharbuja


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 Amazon - August 2004

Using Tables for Page Layout ▪ The red lines show the table borders. – Complex tables – Tables inside tables - nested tables

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

Add a comment

Related presentations