1. Lesson 7

2. Tables Table Tags and Attributes

3. Tables HTML tables are used in two main ways: 1.To organize tabular data in a familiar spreadsheet-like way. 2.To allow for more attractive layout of web page content, giving the designer more control over what goes where. The borders of the tables do not usually show in this case, and it is not obvious that the page content is in table cells.

4. Using tables to display data Borders may or may not be used, but the data retains a table-like appearance, which makes it easy to read.

5. Table Tags There are five main tags used with tables. These tags are supported by both IE and Netscape. They are; 1. 2. 3. (table row) 4. (table data) 5. (table header)

6. Table Tags Most often, you will only need to use three tags; 1. 2. (table row) 3. (table data)

7. Table Terminology

8. Example 1 1 2 3 Example 1 4 5 6 Table example 1 7 8 9 10 cell 1 11 cell 2 12 13 14 cell 3 15 cell 4 16 17 18 cell 5 19 cell 6 20 21 22 23 24

9. Example 1 (continued) Note how the data is arranged in a table of three rows and two columns, but it does not look like a typical table, because there are no borders.

10. Example 2 1 2 3 Example 2 4 5 6 Table example 2 7 8 9 10 cell 1 11 cell 2 12 13 14 cell 3 15 cell 4 16 17 18 cell 5 19 cell 6 20 21 22 23 24

11. Example 2 (continued) The previous slide looks more like a table or spreadsheet, because of the border The border is added by specifying an integer greater than zero, which will give the width of the border in pixels

12. Example 2 (continued) A default value of 2 is used for cellspacing, and a default of one is used for cellpadding Various combinations of border thickness, cellspacing, and cellpadding can be observed by using the JavaScript program available at http://javascript.internet.com/miscellaneous/table- maker.html

13. Example 3 1 Table example 3 2 3 4 This is an example 5 6 7 column 1 8 column 2 9 10 11 row 1 12 cell 1 13 cell 2 14 15 16 row 2 17 cell 3 18 cell 4 19 20 21 row 3 22 cell 5 23 cell 6 24 25 26

14. Example 3 (continued) The previous example shows all of the table tags used The head and body tags were omitted to save space on the slide Note how the caption appears above the table by default Note how the text in the table header cells is automatically bolder

15. The caption tag has an attribute called align. You can use it to put the caption above or below the table, e.g. (default)

16. The table tag has an attribute called cols, which allows you to specify how many columns the table will have Using this attribute will help speed the display of your table, because the browser does not need to read the entire piece of source code, counting the tags, before it knows how to start drawing the table.

17. Empty cells The next table has 5 columns, and 10 rows. Cellpadding and cellspacing are set to 0, and the border is set to 1. The table does not look right because there are no non-breaking spaces ( ) in the empty cells, to preserve the table integrity.

18. Empty cells (continued) 1 2 Table with empty cells - no non-breaking spaces 3 4 5 fgdhd 6 fdsf 7 8 fdsfds 9 10 11 fds 12 13 14 hfgd 15 16 17 18 19 fdfd 20 fdgg 21 22 fgd 23 24

19. Empty cells (continued) The next table is the same as the previous one, but with non-breaking spaces ( ) acting as placeholders for the cells, preserving the internal borders.

20. Empty cells (continued) 1 2 Table with empty cells - no non-breaking spaces 3 4 5 fgdhd 6 fdsf 7 8 fdsfds 9 10 11 fds 12 13 14 hfgd 15 16 17 18 19 fdfd 20 fdgg 21 22 fgd 23 24

21. Table tags A table is defined by the tags Cell 1 Cell 2 Inside a table row you can put table headers, table rows, and table cells. And can have the following attributes: border="n" n=number of pixels (Size of border around the cells) Summary text (Summary of this table for speech-synthesizing/non-visual browsers) cellpadding="n" cellspacing="n"

22. Tables The TD tag sets are individual sections that are contained within a TR tag set which are contained within a TABLE tag set. The and tags define a row of a table. The and tags define the table header cells. The and tags define the table data cells.

23. Tables align="alignment" alignment =left, right, or center valign="alignment" alignment =top, middle, or bottom col span="n" n=the number of columns to span rowspan="n" n=the number of rows to span nowrap=nowrap width="n" n=the number of pixels or percentage (n%) height="n" n=the number of pixels or percentage (n%) hspace="n" n=the number of pixels vspace="n" n=the number of pixels

24. Border and a Caption A border attribute can be defined as follows: You can change the border attribute setting in order to modify the width of the border surrounding a table An optional caption can be defined for a table by using the caption tag. Sample Table Use the caption tag to place explanatory text about a table near the table. (note :IE NN)

25. Background colours To display background colors in table cells use the bgcolor attribute. The attribute bgcolor applies to the,,, and tags. Background colours can be set within the table as a whole, for an individual row, and for an individual cell. Background colours should be used to make the table and its information more readable and useable.

26. Background colours Setting the background colour of an individual cell will override the background colour that has been set for that row or for the entire table. Setting the background colour for a row will override the background colour set for the entire table. Setting the background colour for an entire table will override the background colour set for a page. Note that the bgcolor attribute uses the American spelling of the word. Example

27. Alignment, Height & Width You can align data within a cell horizontally and vertically: Width and Height: To change the display size of a table:

28. Cellspacing and Cellpadding To change the width of column and row border use the cellspacing attribute. This defines the space between cells. To change the amount of space between the edges of the cells and the cell’s contents use the cellpadding attribute

29. Spanning Rows and Columns To span multiple rows and columns: xxx

30. The colspan and rowspan attributes work the same way for as they do for. When adding colspan or rowspan, you must remove the individual cells that will be occupied by the expanded cell, as shown in the following examples.

31. Original table 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

32. (wrong) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

33. (corrected) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

34. (wrong) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

35. (corrected) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

36. thead, tbody, tfoot To specify the head section of a table use the. The tags are used to specify the body section of the table and are similar to the element of an HTML document. The tags are used to specify the footer section of the table. If you use the thead, tfoot and tbody elements, you must use every element, but you can leave them blank They should appear in this order:, and, so that browsers can render the foot before receiving all the data. You must use these tags within the table element. The, and elements are seldom used, because of bad browser support. This should change in future.

37. The COL Tag The tag is used to specify the alignment for an entire column. Use this element when you want to specify different attribute values to a column inside a colgroup. This example shows a colgroup that has three columns of different widths: 1 2 3 4 Note the different width defined for each column.

38. COLGROUP.. This tag is used to group together columns in a table. It allows you to treat the columns in your table similarly to the rows, including rule lines to differentiate the columns. It goes at the beginning of the table, before the content.

39. Using tables for page layout Practically every professional site today uses tables to present an attractive layout It is a way to break a page up into sections, and control the content within each section. Tables allow content to take a familiar form, similar to magazine or newspaper layout

40. Using tables for page layout Tables can be nested multiple times, so that the cell of a table contains a second table, and a cell of the second table contains a third table, although good planning should minimize nesting to keep the code simple. The following example will build a page using several tables, and tables within the cells of other tables

41. Using tables for page layout Pay particular attention to how the following features of tables apply when they are used for layout; Table width, height Background color Table row alignment Table data width, and alignment Each new table added will be shown in bold type in the source code

42. Layout design When using tables for layout, the first thing you should do is plan your layout using a pencil and paper. Decide on the placement and proportions needed before you start writing code.

43. Layout design Try to avoid nesting tables more than two levels deep, since they will be easier to work with. With a more complicated design involving nested tables, it can be helpful to create each table separately to get the layout right, and then put the tables together.

44. mmmmm

45. Review.. This tag defines the enclosed rows as the header rows of the table. If the table is broken across several physical pages (such as when printing), the header rows will be repeated... This tag defines the enclosed rows as the footer rows of the table. If the table is broken across several physical pages (such as when printing), the footer rows will be repeated... This tag divides your table into discrete sections. Each section is delimited with a rule line.