1. TABLES

2. Tables Consider the following web-page

4. This web-page shows a H1 followed by a TABLE The TABLE has the following parts: –a THEAD –a TFOOT –a TBODY –a CAPTION The THEAD, TFOOT and TBODY contains TRs The TRs contain either THs or TDs Many of these have attributes

5. Tables A table is delimited by and Inside these tags we have a TBODY We can also have a THEAD, TFOOT and a CAPTION if we wish

6. Simple Table 10-11 Maths 11-12 Physics

9. Tables and style A tag has several attributes, some of which can be controlled by stylesheets and some of which cannot I expect that, in the future, all attributes will be controllable by stylesheets

10. Rules between Table data One attribute that still cannot be controlled by a stylesheet is the RULES attribute This can take one of the following values:none (default), groups, cols, rows, all

11. Simple Table 10-11 Maths 11-12 Physics

14. Simple Table 10-11 Maths 11-12 Physics

17. Simple Table 10-11 Maths 11-12 Physics

20. THEAD A table head is used to explain the data in the TBODY

21. Simple Table Time Subject 10-11 Maths 11-12 Physics

24. cs 3314 got here on 1 dec 2005

25. TFOOT A table foot can be used to summarise the data in the table

26. Time Subject Number of hours 2 10-11 Maths 11-12 Physics

29. CAPTION A caption describes the complete table

30. Time Subject Number of hours 2 Lecture Schedule 10-11 Maths 11-12 Physics

32. TDs of Non-standard sizes Sometimes, we need TDs that are wider or higher than the normal ones in a table

34. In the previous slide, the “Session” TDs in the TBODY were taller than the normal TDs –each of them was as tall as two normal rows In the TFOOT, the “Number of hours” TD was wider than the normal TDs –it was as wide as two normal columns This done by using two attributes of TDs: –the ROWSPAN attribute enables us to make taller than normal TDs –the COLSPAN attribute enables us to make wider than normal TDs

35. Session Time Subject Number of hours 4 Lecture Schedule Morning 10-11 Maths 11-12 Physics Afternoon 14-15 Chem 16-17 Logic

36. Non standard THs We can also have THs of non-standard sizes We use the same ATTRIBUTES: –COLSPAN –ROWSPAN

38. Lecture Time Lecture Session Time Subject Number of hours 4 Lecture Schedule Morning 10-11 Maths 11-12 Physics Afternoon 14-15 Chem 16-17 Logic

39. Using PADDING in TDs We can use PADDING in TDs to provide some “white space” that makes the table content more legible

41. Compare the two tables

42. TD {PADDING-LEFT : 20 ; PADDING-RIGHT : 20}

43. Using stylesheets to affect layout of TD content You should already have seen the TEXT-ALIGN attribute which can be used in stylesheets to affect content layout We can, of course, use this to affect the layout of the contents of TDs and THs

44. TH {TEXT-ALIGN : right} TD {PADDING-LEFT : 20 ; PADDING-RIGHT : 20; TEXT-ALIGN : center}

45. Compare the two tables