Download presentation
Presentation is loading. Please wait.
1
1 XHTML Tables A table is a matrix of cells, for displaying content in rows and columns The cells can include almost any element Some cells display row or column labels and some display data A table is specified as the content of a tag
2
2 XHTML Tables Document subtree for table: … … … Table data elements may contain anything
3
3 Tables Use a … element for each row Use a … element for each column Tables may begin with table header element: … Tables may end with table footer element: … Use … element for cells in the table header and footer Regular rows may be grouped in a table body element: …
4
4 Tables … … … … …
5
5 border attribute A border attribute in the tag specifies a border between the cell If border is set to "border", the browser’s default width border is used The border attribute can be set to a number as the border width in pixels Without the border attribute, the table will have no lines! Tables may be given titles with the tag, which can immediately follow Applications: to display a matrix as layout of the web page
6
6 Table With Caption See example caption.html Fruit Juice Drinks Apple Orange Pineapple Breakfast 0 1 0
7
2001 Prentice Hall, Inc. All rights reserved. Outline 7 Table1.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 A simple XHTML table 11 12 13 14 15 tag opens a table --> 16 <table border = "1" width = "40%" 17 summary = "This table provides information about 18 the price of fruit"> 19 20 tag summarizes the table's --> 21 22 Price of Fruit 23 24 is the first section of a --> 25 26 inserts a heading cell. --> 27 28 29 Fruit 30 Price 31 32 The border attribute gives the size in pixels of the table’s border. The width attribute gives the width of the table. The summary attribute describes the table’s contents. Text placed in a table header is rendered bold and centered in the cell.
8
2001 Prentice Hall, Inc. All rights reserved. Outline 8 Table1.html 33 34 35. inserts a table row. --> 36 37 38 39 Apple 40 $0.25 41 42 43 44 Orange 45 $0.50 46 47 48 49 Banana 50 $1.00 51 52 53 54 Pineapple 55 $2.00 56 57 58 59 60 61 Total 62 $3.75 63 64 65 66 The body of the table is placed between the tbody tags. Table rows are created using the tr element Data placed between td tags are placed in an individual cell. The table footer belongs at the bottom of the table. It formats text in a similar manner to a table header.
9
2001 Prentice Hall, Inc. All rights reserved. Outline 9 Table1.html Program Output 67 68 69 Table footer End of table body Start of table body Table header Table Caption
10
10 Non-uniform cells Usually every row has the same number of columns –Cells in same row have equal height –Cells in same column have equal width Sometimes we want a cell to span multiple rows and/or columns Use rowspan and colspan attributes
11
11 Using a Column Label instead of Caption A table may have two levels of column labels instead of a caption –Use a colspan attribute in the tag to specify that the top- level label span several columns Fruit Juice Drinks Orange Apple Pineapple
12
12 See example WOcaption.html If more than one row have labels and there is a spanning column label, the upper left corner cell must be made larger, using rowspan Fruit Juice Drinks Apple Orange Pineapple …
13
2001 Prentice Hall, Inc. All rights reserved. Outline 13 Table2.html 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 7 8 9 10 Internet and WWW How to Program - Tables 11 12 13 14 15 Table Example Page 16 17 18 Here is a more complex sample table. 19 20 and are used to --> 21 22 23 24 25 26 27 28 29 The align attribute is used to horizontally align data in a cell. The span attribute indicates width of the data cell in number of columns.
14
2001 Prentice Hall, Inc. All rights reserved. Outline 14 30 31 32 33 34 35 36 <img src = "camel.gif" width = "205" 37 height = "167" alt = "Picture of a camel" /> 38 39 40 41 42 Camelid comparison 43 Approximate as of 8/99 44 45 46 47 48 # of Humps 49 Indigenous region 50 Spits? 51 Produces Wool? 52 53 54 55 56 57 58 59 Camels (bactrian) 60 2 61 Africa/Asia 62 Llama 63 Llama 64 Table2.html The vertical alignment of data in a cell can be specified with the valign attribute. The value of the colspan attribute gives the amount of columns taken up by the cell. The value of the rowspan attribute gives the amount of rows taken up by the cell.
15
2001 Prentice Hall, Inc. All rights reserved. Outline 15 Table2.html Program Output 65 66 67 Llamas 68 1 69 Andes Mountains 70 71 72 73 74 75 76 77 Cell spanning the size of two rows. Cell spanning the size of four columns.
16
16 Missing and empty cells Rows may have different numbers of cells (without using colspan ) Missing cells and empty cells are not rendered To force rendering of a blank cell use for content
17
17 Attributes align and valign align attribute controls the horizontal placement of the contents in a table cell Values: left, right, and center (default) Use align attribute in,, and elements valign attribute controls the vertical placement of the contents of a table cell Values: top, bottom, and center (default) Use valign attribute in and elements See example cell_align.html
18
18 Attributes cellspacing and cellpadding Use cellspacing attribute of to specify the distance between neighboring cells in a table Use cellpadding attribute of to specify the spacing between the content of a cell and the inner walls of the cell See example space_pad.html
19
19 Another Example of spacing Mitten-shaped Michigan greets visitors... In America's Dairyland, there are lots of reasons … See example Michigan_Wisconsin.html
20
20 Table Sections A table may have header, body, and footer, which are the elements: thead, tbody, and tfoot See example table2.html of textbook A document may have multiple tbody elements
21
21
Similar presentations
