1. 56 © 1998,1999, 2000 David T. Gray, Howard Duncan, Jane Kernan Tables HTML Tables are used to control Web page layout for both text and graphics +In HTML, we use and tags to create a table. +A table has an internal structure based on rows and columns +A table is made up of a number of rows. We use and to define a row. +Each row is made up of a number of cells (columns). We use and to define the data to be placed in a cell. We use and to define column headings. +Table data elements can contain any HTML element A simple rule is if you can add it to a Web page you can add it to a table cell.

2. 57 © 1998,1999, 2000 David T. Gray, Howard Duncan, Jane Kernan Tables

3. 58 © 1998,1999, 2000 David T. Gray, Howard Duncan, Jane Kernan row 1 row 2 … row n column header 1 column header 2 … column header m cell 1 cell 2 … cell m … cell 1 cell 2 … cell m Column 2 Data for (2,m) ······ ······ ······

4. 59 © 1998,1999, 2000 David T. Gray, Howard Duncan, Jane Kernan thirteen.html Table Column 1 Column 2 Column 3 (1,1) (2,1) (3,1) (1,2) (2,2) (3,2)

5. 60 © 1998,1999, 2000 David T. Gray, Howard Duncan, Jane Kernan Empty Cells In general, blanks in HTML text are ignored. +However, we can use a special non-breaking space if we want to cause output of a space. one_a.html This is a piece of text with various spaces and new lines. Some special characters: © ç £ &.

6. 61 © 1998,1999, 2000 David T. Gray, Howard Duncan, Jane Kernan We can distinguish between empty cells and cells containing spaces. fourteen.html Table Column 1 Column 2 Column 3

7. 62 © 1998,1999, 2000 David T. Gray, Howard Duncan, Jane Kernan

8. 63 © 1998,1999, 2000 David T. Gray, Howard Duncan, Jane Kernan Some attributes for. fifteen.html Table Column 1 Column 2 Column 3

9. 64 © 1998,1999, 2000 David T. Gray, Howard Duncan, Jane Kernan

10. 65 © 1998,1999, 2000 David T. Gray, Howard Duncan, Jane Kernan

11. 66 © 1998,1999, 2000 David T. Gray, Howard Duncan, Jane Kernan Some attributes for and. sixteen.html Table Column 1 Column 2 Column 3

12. 67 © 1998,1999, 2000 David T. Gray, Howard Duncan, Jane Kernan

13. 68 © 1998,1999, 2000 David T. Gray, Howard Duncan, Jane Kernan With no border attribute to we get:

14. 69 © 1998,1999, 2000 David T. Gray, Howard Duncan, Jane Kernan Typically, each row in a table has the same number of columns. +Similarly, each column has the same number of rows. +However, it is possible to have cells that span 2 or more rows (columns).

15. 70 © 1998,1999, 2000 David T. Gray, Howard Duncan, Jane Kernan Table Column 1 Column 2 Column 3 (1,1)&(2,1) (3,1 (1,2) (2,2) (3,2) Column 1 Column 2 Column 3 (1,1)&(1,2) (2,1) (3,1) (2,2) (3,2) eighteen.html

16. 71 © 1998,1999, 2000 David T. Gray, Howard Duncan, Jane Kernan It is possible to nest one table within another. +This is achieved by making a table the data of a single cell. +Not all browsers support nested tables.

17. 72 © 1998,1999, 2000 David T. Gray, Howard Duncan, Jane Kernan Table Column 1 Column 2 Column 3 (1,1)&(2,1) (3,1) Column 1 Column 2 Column 3 (1,1)&(1,2) (2,1) (3,1) (2,2) (3,2) (2,2) (3,2) nineteen.html

18. 73 © 1998,1999, 2000 David T. Gray, Howard Duncan, Jane Kernan Tables and Text You can use tables to producte two-column text displays to achieve a news letter effect, it is important to keep the columns narrow so that they will display correctly on smaller monitors. +To create a two-column text table create a table with one row and two data elements in that row. Fill data element with a column of text. For the best display you should fill each cell with the same amount of text. +Also include cellpadding to create space between the two columns.

19. 74 © 1998,1999, 2000 David T. Gray, Howard Duncan, Jane Kernan

20. 75 © 1998,1999, 2000 David T. Gray, Howard Duncan, Jane Kernan HTML ElementAttributesAttribute ValuesWhat the Attribute Does Align =Left, rightJustifies the table against one side of the page with text flowing down alongside it. (this attribute does not set the alignment for any cells within the table) Bgcolor =A colour name or hex colour code Sets the background colour for all cells of the table (can be overridden by TD BGCOLOR) Border =n(an integer)Sets the width in pixels of the 3-D border drawn around the entire table Cellpadding =n(an integer)Sets the width in pixels of a margin inserted inside the boundaries of each cell Cellspacing =n(an integer)Sets the width in pixels of the boundary separating adjacent cells

21. 76 © 1998,1999, 2000 David T. Gray, Howard Duncan, Jane Kernan HTML ElementAttributesAttribute ValuesWhat the Attribute Does Summary =A quoted stringSummarises the table for nonvisual browsers Width =n(an integer) or n%An integer value sets the width of the table in pixels, a % value sets the width as a pecentage of the width of the browser window (table data) (table headers) Align =Left, center, rightSets the horizontal alignment for one cell (default value is left Bgcolor=A colour name or hex colour code Sets the background colour for one cell Colspan=n (an integer)Allows the cell to span n table columns

22. 77 © 1998,1999, 2000 David T. Gray, Howard Duncan, Jane Kernan Disables line wrapping for all cells in the row Takes no value Nowrap Sets the alignment attribute for each cell in one row (can be overridden by TD align) Left, center, rightAlign = (table row) An integer values sets the width of the cell in pixels n (an integer)Width = Sets the vertical alignment for one cell (default value is middle) Top, middle, bottom, baseline Valign = Allows cells to span n table rows n(integer)Rowspan = Keeps all text inside the cell on a single line, unless explicitly borken by BR or P tags Takes no valueNowrap What the Attribute DoesAttribute ValuesAttributesHTML Element Valign = Top, middle, bottom, baseline Sets the vertical alignment for cells in the row (default value is middle)

23. 78 © 1998,1999, 2000 David T. Gray, Howard Duncan, Jane Kernan Exercise III Design an HTML page to produce the following table: Link this page to your home page.