html table

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

3. HTML TABLECODE

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.

6. WRITE HTML CODE

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. 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