Creating a tableAltering table appearanceControlling line breaksBordersWidthHorizontal alignmentCell alignmentBackgroundControlling spaceNested tablesSpanningXHTML TablesTables can be used to present tabular data or serve as the foundation of page layouts.Creating a tableTables are made up of rows of cells. The number of cells in each row determines the table’s shape. To define a table, use thetable 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 appearanceControlling line breaksUnless you provide your own line breaking commands, the browser will automatically divide lines of text within a cell onceit 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 linebreak within text in which spaces are required, use the non-breaking space character entity reference . NOTE: The XHTML equivalent of the non-breaking space is  . 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 banana 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.BordersA 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.WidthBy 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 theproportions 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 alignmentTo 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 correctthis 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 alignmentBy 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"
View Full Document
Unlocking...