jqjacobs.net/web
Creating Tables
|
Text Tables | Graphical Tables | Controlling Page Layout | Links Tables are one of the primary design tool for HTML documents. Tables serve several functions. Tables allow for greater control over page layout, allowing creation of more visually interesting pages. Pages with grid or columnar layout use tables, often invisible, to control page layout. Tables are also used to set apart sections of documents, such as in sidebars, navigation bars, or framing images and their titles and captions. There are still some differences in table support by browsers, especially with HTML 4.0 table enhancement tags, but tables are sufficiently supported to justify their position as the most popular design method. There are two ways to make a table in an HTML document. Text tables are created using preformatted fonts. In HTML a series of spaces, tabs or empty lines in the code will be condensed to one space unless the font is formatted to <pre> preformatted, or typewriter font. This is why there is usually only one space between sentences in Web documents. To use two spaces, or more, in a row without the <pre> format a non-breaking space(s) ( ) needs to be added. Preformatted fonts are fixed-width fonts and, unlike proportional fonts, use the same amount of space for each character irrespective of its actual width, allowing control of column alignment. Some text-based browsers can only display text tables. Graphical tables are created using special tags, as described below. Graphical tables allow use of special attributes, such as borders, colors, shading, backgrounds, frames, spacing and padding, attributes that control the visual aspects of the table. Attributes of the table, of its rows and its cells control the height and width, alignments, spanning of rows and/or columns. Tables can also be nested. Creating tables can be a complex design problem, and, in such cases, it is advisable to draw out the design before beginning coding. Text Tables -- Using Fixed-Width FontsAny text formatted with the <pre> tag retains the spaces, tabs and blank lines that are otherwise ignored by HTML. The <pre> tag displays text using fixed-width font, allowing easy alignment of text characters in columns. Here follows a simple text table and its code. Notice that they are nearly identical. Table --------------------------------- | column 1 | column 2 | ---------------------------------
<pre align="left"> Table
Text tables formatted with the <pre> tag will be displayed by all browsers. Also, the columns will remain aligned regardless of the font used by the browser. Creating Graphical TablesGraphical tables are composed of rows of cells. They require an opening <table> tag and the closing </table> tag. The table element attributes include summary, align, width (percent of page width or pixels), border (in pixels, controls frame width around table), frame (which parts of frame to render), rules (rulings between rows and cols), cellspacing (pixels, spacing between cells), and cellpadding (pixels, spacing within cells between contents and margin). The summary attribute is a text string that provides a summary of the table's purpose and structure for user agents rendering to non-visual media such as speech and Braille. The align attribute, now deprecated, specifies the position of the table (left, center, or right) with respect to the document. The width attribute specifies the width of the entire table. When pixels are specified the window retains the specified width irrespective of browser window width. When the value is a percentage, the value is relative to the browser window's horizontal space. In the absence of any width specification, table width is determined by the browser. Tables incorporate other elements. The <caption> element is only permitted immediately after the <table> start tag. A <table> element may only contain one <caption> element. The <caption> tag requires an </caption> closing tag. The table row <tr> element acts as a container for a row of cells. The end </tr> tag is not required, but it is needed for the table to display properly in all browsers. Columns provide additional structure. Column properties should be expressed at the start of a table definition if you wish to enable the browser to render the table incrementally. A Basic Table. Here follows, with the corresponding code, a simple table with one row <tr> and one cell <td> framing a graphic. Because the cellpadding is zero there is no space between the image and the cell margin. Notice the three closing tags.
Rows and Columns. The following simple table has two rows and three columns per row. This time there is cell padding and the border and cellspacing has increased to 4 pixels. Both the text and the table are browser default aligned. The cellpadding creates the space between the cell margin and the text.
Invisible Tables. To create an invisible table use zero for the border. This simple table has one row, three columns, and no visible border <border="0">.
Spanning Rows and Columns. Both rows and columns can be spanned by cells. Spanning rows and columns is accomplished using the <rowspan> and <colspan> attributes of the cell <td> element. In the following example the cell in the top row spans two columns <td colspan="2">, and the lower left cell spans two rows <td rowspan="2">. Notice that the third row code has only one cell because the previous row already filled the first column of the row.
Border Color, Wrapping Text, Space around Tables.
Table border color can be controlled with the <bordercolor> attribute
of the table element. Text can be wrapped around a table using the <align="left">
or <align=right"> attributes of the table element.
Aligning Cell Contents. Contents of cells can be aligned vertically and horizontally. By default cell contents are aligned in the middle vertically and to the left horizontally. Alignment attributes can be applied to table sections, rows, or cells using the <align> and <valign> tags for horizontal and vertical alignment respectively. Each cell in the following table has a different alignment. The height of a table can also be specified with the <height> attribute, also seen in the following example.
Cell Color and Background Images. Formatting cell color, or adding background images can add structure and visual organization to a table. Tables, rows or cells or group of cells can have background color <bgcolor> or background image <background> formatting.
Nesting Tables. As can be seen above, tables can be nested in the cells of other tables. The simple table with the two cells nested in the upper left corner cell has the following formatting. All the coding for the nested table is enclosed between the cell <td> and end cell </td> tags.
Column and Row Groups. Defining column or row groups can simplify formatting the contents of a complex table. Two distinct types of column groups are available, structural column groups (which employ the <colgroup> tag) and non-structural groups (which employ the column <col> tag). These tags are not supported by all browsers. Table rows may be grouped into a table head, table foot, and one or more table body sections, using the <thead>, <tfoot> and <tbody> elements, each of which must contain at least one <tr> element. Cells in the <thead> row are formatted centered and bold. When long tables are printed the table head and foot information may be repeated on each page. Borders. HTML 4 allows the page author to control which parts of the borders appear and where they appear. See the HTML 4.01 specification if you need to customize this attribute. Using Tables to Control Page Layout
A good way to examine the layout of such pages it to open them in Netscape, then use the FILE-EDIT PAGE menu command to open the page in Composer. The margins of the invisible tables then appear as checked lines. Or open the documents in an HTML editor such as Dreamweaver. Useful Links |
|||||||||||||||||||||||||||||||||
