XHTML Tables Tables can be used to present tabular data or serve as the foundation of page layouts Creating a table Tables are made up of rows of cells The number of cells in each row determines the table s shape To define a table use the table element To define rows within the table use the tr table row element To define cells within a row use the td table data element p Here s a table of how fun certain programming languages are p table tr td LANGUAGE td td HOW FUN td tr tr td Java td td 4 5 out of 5 td tr tr td Lisp td td 1 2 out of 5 td tr tr td C td td 3 8 out of 5 td tr table This is how the table may appear in the browser If you want an empty column you can write td Altering table appearance Controlling line breaks Unless you provide your own line breaking commands the browser will automatically divide lines of text within a cell once it decides on the height and width of each column and row Line breaks occur where there are spaces or certain punctuation characters in the text To keep text within a cell on a single line use nowrap nowrap in the td element To suppress a line break within text in which spaces are required use the non breaking space character entity reference nbsp NOTE The XHTML equivalent of the non breaking space is 160 To manually insert line breaks use the br element table tr td 1 td td 2 td tr tr td apple banana cantaloupe td td apple br banana br cantaloupe td tr table This is how the table may appear in the browser This example assumes that the browser window is not wide enough to accommodate a column that contains apple banana and cantaloupe on the same line Note how the browser placed a line break between banana and cantaloupe for the first column If the spaces in the first column of the second row were replaced with non breaking spaces apple 160 banana 160 cantaloupe the output would appear as follows If the browser window is not wide enough to accommodate the entire table a scrollbar will be added to the browser window Borders A border helps to distinguish the table from the rest of the page and to distinguish rows and columns from one another To display a border around the table and its cells set the border attribute within the table element where the value is the number of pixels for the border To prevent a border from being displayed use border 0 Borders can also be useful when first designing a page so that you can see how much space the table and its cells occupy table border 2 table This is how the table may appear in the browser Width By default a browser will automatically determine the width of the cells based on their content The width of any column is the width of that column s widest cell The width of the table is the sum of the column widths plus the size of the borders around the cells To set the width of a table use the width attribute for the table element Acceptable values are percentages i e percentage of the page width or the number of pixels Similarly to set the width of a cell use the width attribute for the td element When using percentages for cell widths the percentage is relative to the width of the table table border 1 width 40 tr td Section 1 td td Introduction td tr tr td Section 2 td td History of Programming td tr tr td Section 3 td td Why Programming is Fun td tr table Here is how the table may appear in the browser NOTE Some paragraph text was added below the table to demonstrate the proportions of the page width and the table width The red line is 40 of the page width and the blue line is the remaining 60 As an alternative suppose you want the columns to be equal sized table border 1 width 40 tr td width 50 Section 1 td td width 50 Introduction td tr tr td Section 2 td td History of Programming td tr tr td Section 3 td td Why Programming is Fun td tr table Here is how the table may appear in the browser The red line is the same length as the blue line indicating that the columns are equally sized A few other things to note about using widths When using percentages the size of the cell or table will adjust as the browser window is resized When using pixel based widths resizing the browser window will not affect the cell or table sizes If the table or cell widths are not large enough to accommodate the cells contents the browser will ignore the specified widths When specifying cell widths it is not necessary to define the width for every cell Horizontal alignment To align the table on the page use the align attribute for the table element Acceptable values are left center and right When left or right alignment is used the text outside the table will wrap around the right or left sides respectively table border 1 width 40 align right tr td Section 1 td td Introduction td tr tr td Section 2 td td History of Programming td tr tr td Section 3 td td Why Programming is Fun td tr table Here is how the table may appear in the browser Note that there is very little space between the left edge of the table and the adjacent paragraph text The best way to correct this is by using cascading style sheets However if you want to have the table right aligned and have the paragraph text displayed underneath the table use the br element with the clear attribute table border 1 width 40 align right table br clear right Here is how the table may appear in the browser Cell alignment By default a cell s contents are horizontally left aligned and vertically center aligned To control the horizontal alignment for a cell use the align attribute of the td element where acceptable values are left center and right To control the vertical alignment for a cell use the valign attribute of the td element where acceptable values are top middle bottom or baseline Suppose you want to add a footer to the bottom of your page with navigational links table border 1 width 100 tr td align left width 33 Previous td td align center width 33 Current td td align right Next td tr table Here is how the table may appear in the browser The markup below demonstrates how to use vertical alignment within a cell NOTE The image of the blue square was added to show the differences in vertical alignment types table border 1 width 100 tr td img src square png alt Square td td valign top Top td td valign middle Middle td td valign bottom …
View Full Document
Unlocking...