This document discusses HTML tables, including their basic structure using <table>, <tr>, and <td> tags. It covers colspan and rowspan attributes to merge cells, and <thead>, <tfoot>, and <tbody> tags to specify header, footer, and body rows. The document also discusses making tables accessible to screen readers by using the summary attribute, <caption> tag, and <th> tag for headers. Finally, it covers styling tables with CSS and issues with using tables for layout on mobile devices.

1. Prepared By: Er. Nawaraj
Bhandari
DESIGNING AND DEVELOPING A
WEBSITE
Topic 6:
HTML Tables

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