Reference:
Formatting Tables in HTML 4.0 at ZDNET.
The TABLE element at W3C.
Table: <table> [contains only Caption, TR, TD and TH elements (no bare text and empty TD elements may be rendered differently] </table>
Data tables represent logical relationships among data (called tabular data) in a two-dimensional grid format much like a spreadsheet. Layout tables are used to format text and images.
Caption: <caption> Caption text </caption>
By default, the caption displays directly above the table, like a title.
Row: <tr> [contains TD or TH elements, no text] </tr>
Cell: <td> Cell text/image/etc (don't leave it empty; use a non-breaking space) </td>
Header cell: <th>Column Header Text</th> instead of <td>text</td> gives centered and bold text
An example of a Table code, indented for clarity. For compactness, it could all be on one line, but for seeing the structure and finding and correcting problems, the expanded format is helpful. Note how the table format allows control of white space, simulating Tabs. This is quite visible when the border is turned on. Note also that all text must be between the cell data (<td></td>) tags. If not, the text will often appear above the table, or disappear entirely.
| <table> | | ||
| <caption>Caption</caption> | |||
| <tr> | |||
| <th> | |||
| column header text | |||
|---|---|---|---|
| </th> | |||
| </tr> | |||
| <tr> | |||
| <td> | |||
| normal table text | |||
| </td> | |||
| </tr> | |||
| </table> | |||
Avoid nesting tables if at all possible. Nested tables dramatically increase rendering time. If you must nest tables, be sure to use the height and width attributes, at least on the inner table. A much better way is to use sequential tables - that way, the top ones are visible while the bottom ones are still loading.
<table
caption="text"
frame= attribute specify which sides of the table will be visible: "[void no sides (this is the default)|above top side only|below bottom side only|hsides top and bottom sides only|vsides right and left sides only|lhs left-hand side only|rhs right-hand side only|box all four sides|border all four sides (included for backward compatibility)]"
rules= attribute specifies what lines appear between cells within a table: "[none no rules (this is the default)|groups rules between row groups and column groups only|rows rules between rows only|cols rules between columns only|all rules between all rows and columns]"
align="top|middle|bottom|left|right"
bgcolor="color"
border="#pixels"
cellpadding="#length"
cellspacing="#length"
summary="Text - (SUMMARY isn't rendered by browser; screen readers will speak the content)"
width="#length" (optional–set td widths instead) >
[no bare text, only tr and td elements between table tags
</table>
To hide a row or column in a table while keeping the overall appearance of a table, CSS2 adds a new keyword value to the visibility property. For all other elements, visibility accepts the visible and hidden keywords. Additionally within tables, the tr, thead, tbody, tfoot, col, and colgroup tags allow style="visibility: collapse" to be used to hide the entire row or column. Note a browser that doesn't support CSS2 will show the row or column.
The column group tag may allow better control of column widths and formatting. Use it immediately after the TABLE tag (or CAPTION tag, if present), either with span=n to encompass n columns, or one COL element for each column or span of columns affected.
COLGROUP takes attributes SPAN (how many columns are affected) and WIDTH (how many pixels|%|relative|0* wide). ("0*" (zero asterisk) means that the width of the each column in the group should be the minimum width necessary to hold the column's contents.)
COL takes attributes SPAN (default=1, or how many columns are affected) and WIDTH (how many pixels|%|relative|0* wide), which overrides any COLGROUP width. Note COL end tag is forbidden.
<colgroup>
<col width="col1 xpixels">
<col width="col2 ypixels">
<col width="coln zpixels">
</colgroup>
Use the TH element to define cells that contain header information, TD for data. To enhance accessibility, name each header cell using the ID="" attribute. Include the ABBR="" attribute with any long ID attributes. Screen readers will say the entire title aloud the first time, but use the abbreviation on all subsequent rows.
The most important attributes are bold. Try to use width only in the top row, since the browser uses this row to set the column widths for all the other rows. Use height if you use CSS to control the font size of the cell; otherwise, different browsers could render other font sizes.
It would be good to consult a reference if you don't know what all these tags do, so you can think about how to use them to do what you want. The online references are good, or use printed books - whatever works best. Then try constructing some tables with different numbers of rows and columns, colors, borders, etc. If you are really ambitious, try "nesting" one table inside another. For an example, see my Foothil assignment.
HEIGHT and WIDTH attributes for your TABLE and TD tags are just as important as for images, for exactly the same reason. These attributes tell the browser how much space to allocate for each table cell. Without them, the browser waits until all the table's contents have been loaded before rendering any of its contents. A caution: Netscape interprets the TD WIDTH attribute as the minimum width of the table column; the cell's actual width is determined by a complex algorithm. The results are…well, unpredictable. The bottom line: you can't trust Netscape's column width algorithm. To get predictable column width, you have three options:
The last of these approaches requires you to put an invisible GIF inside each column, with the image's WIDTH attribute set to whatever minimum column width with you want; here, the minimum column width will be 100 pixels, and minimum height will be 150 pixels. Note no TABLE height/width attributes, only TD, and the use of hspace and vspace to determine cell height and width - if the cell is empty, this is more efficient than adjusting width and height of the pixel.
<table border="1">
<tr>
<td bgcolor="red" >
col 1, img src="../images/space.gif" <br>width="2" height="2" hspace="179" vspace="2"
<br>
<img src="../images/space.gif" width="2" height="2" hspace="179" vspace="2">
</td>
<td bgcolor=green >
col 2, width="2" height="2" <br>hspace="129" vspace="2"<br><img src="../images/space.gif" width="2" height="2" hspace="129" vspace="2">
</td>
</tr>
</table>
gives the following result, note the attributes of the image always use height and width "2" and vary hspace and vspace:
|
col 1, img src="../images/space.gif" width="2" height="2" hspace="179" vspace="2"
|
col 2, width="2" height="2" hspace="129" vspace="2"
|
Here are a few rules of thumb: Use the WIDTH attribute for all your table cells. If possible, try to use the HEIGHT attribute for table cells. But be careful with this attribute as explained below. Avoid nesting tables if at all possible. Nested tables can dramatically increase your rendering time. Instead of nested tables, use multiple tables (TABLE ALIGN=left|right|center to place tables beside one another). If you must nest tables, be sure to use the HEIGHT and WIDTH attributes, at least on the inner table.
Setting the WIDTH attribute for a table is most important in the first row, since the browser uses this row to set the column widths for all the other rows. Likewise setting the HEIGHT attribute is most important for the first cell within each table row, since this sets the height for the rest of that row.
Use of the HEIGHT attribute for tables and table cells is a bit risky, since you don't know the size of the browser's default font. If you plan your table layout assuming everyone is using a font size of 12 points, your page may not be rendered correctly for visitors who've changed their default font. Visitors who've set their browser font to 14 points may see text spill over from one cell to another because the text can't fit into the space you allocated.
There are two ways around this:
Test your page with your browser's default font set to a larger value. Use the FONT tag and SIZE attribute to set the font size for each table cell.
Use absolute values, such as SIZE="2" not relative values, like SIZE="-1".
If you follow these rules, the HEIGHT attribute should be safe to use.
Pull quotes are easy to code. All you're doing is wrapping text around a single cell table (much like you can wrap text around images). Unlike text around images though, you have to do some extra formatting to achieve the desired effect in your pull quote.
Differentiate the font: use a different size and/or style font for your pull quote; put it in italics or in bold face type; make the table stand out. Consider using a background color for emphasis inside the pull quote table. Be careful with color though: make sure it complements the rest of the site and provides good contrast. If you're quoting directly from the text, use quotation marks.
Once you have your quotation selected and formatted in HTML, put it inside a single cell table.
The key to text wrapping is to always include the ALIGN attribute inside your opening TABLE tag. Set the value to either left or right to indicate where you want the pull quote placed in relation to the other text. Note: if you set ALIGN="center", that won't allow text to flow around the table.
<table width="125" height="150" align="right" border="0">
<tr>
<td width="100%" bgcolor="#000080">
<font color = "#FFFFFF" size="4">
<b>"Catch and hold visitors' interest with pull quotes."</b>
</font>
</td>
</tr>
</table>
Place that table inside the rest of your text wherever you want the pull quote. You can use nested tables or merely include it inside a paragraph tag. Experiment some to find the best layout effect.
Here is an excerpt (from Larisa Thomason, NetMechanic) of a few sample lines of a table that highlights individual rows in your data table when you move the mouse over them. JavaScript events create the highlight effect (note the onmouseover/out JavaScript is not compatible with older browsers):
| Mauritania | 21N | 24N | ||
| Myanmar | M TBA | M TBA | ||
| Nepal | M TBA |
And here's a line of the code that does it;
<tr bgcolor="#FFFFFF" onMouseOver="this.bgColor='gold';" onMouseOut="this.bgColor='#FFFFFF';">
<td>Mauritania</td>
<td>21N</td>
<td>24N</td>
<td> </td>
<td> </td>
</tr>
All you do is include onMouseOver and onMouseOut events inside your TR tags. It's basically the same technique you use to create image rollovers, only you're changing the appearance of a table row instead of an image. Since some of the tags are empty, inserte a non-breaking space ( in HTML) to hold the cell open. Otherwise, you'd have a browser incompatibility problem because Netscape browsers collapse empty cells. If you'd like to highlight individual cells instead of entire rows, include the JavaScript events inside your TD tags instead of the TR tags. These JavaScript events don't break your page; visitors with non-compliant browsers see just a standard table.
Although TABLE tags are always inside the BODY tag, some Netscape browser versions don't apply the BODY style declarations inside tables. When you set your style properties for the BODY of the document, include TR and TD in that declaration like this:
<STYLE>BODY, TR, TD {font-family:verdana; color:blue}</STYLE>, or if using a style sheet, like this:
body, tr, td {color:black; background:#ccdede; margin-left:25px;}
Use the TBODY attribute to format a single row or groups of rows in a table with a single line of code. Place the TBODY tag immediately before the opening TR that you want to format and be sure to close it outside the closing /TR tag. Your tables can contain multiple TBODY statements. You can also use THEAD to create a table header cell and TFOOT for a footer cell, but browser support isn't as complete. You can usually achieve the same effects with TBODY. Here's an example:
<TABLE border="1" cellpadding="3" cellspacing="0" width="50%">
<tbody align="center" style="font-weight:bold; font-family:verdana; color:purple; background-color:yellow">
<tr><td width="33%">1st Cell</td><td width="33%">2nd Cell</td></tr>
</tbody>
<tbody align="center" style="font-family:'times new roman'; color:blue">
<tr><td width="33%">2nd row</td><td width="33%">2nd row</td></tr>
<tr><td width="33%">3rd row</td><td width="33%">3rd row</td></tr>
</tbody>
</table>
gives the following table:
| 1st Cell | 2nd Cell |
| 2nd row | 2nd row |
| 3rd row | 3rd row |
See the articles at webreview.com by Chuck Musciano The display Property, Controlling Table Layout with CSS2, Caption Control, Savvy Table Tricks with CSS.
Table cells (both <td> and <th>) honor the text-align property that controls how the flow is formatted. For most HTML elements, you can specify style="text-align:left|right|center|justify|ã.ä" as values for the text-align property to get the desired text alignment effect. The ã.ä is a string value on which to center the data, like a decimal point.
To hide a row or column in a table while keeping the overall appearance of a table, CSS2 adds a new keyword value to the visibility property. For all other elements, style="visibility: visible|hidden" are available. Additionally within tables, the tr, thead, tbody, tfoot, col, and colgroup tags allow style="visibility: collapse" to be used to hide the entire row or column. Note a browser that doesn't support CSS2 will show the row or column.
You can use a different model for different tables in your documents, depending on the kind of border effects you hope to achieve. To define the border model to be used for a table, you use the border-collapse property. This property accepts one of two keyword values, either collapse or separate. If you do not specify this property for a table, it defaults to collapse, matching the border model generally supported by most current browsers. See the continuing discussion on Competing Border Models By Chuck Musciano, starting February 23 for a full discussion.
