HTML Tables : Java Glossary

2008-03-30 by Roedy Green ©1996-2008 Canadian Mind Products
Go to : punctuation 0-9 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z (all)

Tables

The trick to understanding tables is to realise that the entire table must be contained in <table>…</table>, each row must be contained in <tr>…</tr>, each heading must be contained in <th>…</th>, each data cell must be contained in <td>…</td>. all the heading stuff should be contained in <thead>…</thead> and all the non-heading stuff should be contained in <tbody>… </tbody>.

Tables
Start Tag	End Tag	description
<table border="5" cellspacing="2" cellpadding="1" width="100" width="50%" bgcolor="#f0e68c" summary="Best places to buy toasters">	</table>	cellpadding is interior border of cell. cellspacing is border _between_ cells, the width of the horizontal and vertical lines separating cells. cellpadding will appear on left side of leftmost cell and right side of the rightmost cell; cellspacing will not. Summary does not display. It is used primarily to help visually disabled people navigate.
<caption>	</caption>	caption title, appears above table, in plain font.
<colgroup span="2" class="strawberry">	</colgroup>	Used two ways: <colgroup span="2" class="strawberry"> </colgroup> gives two columns an attribute. <colgroup class="strawberry"> <col align="center"> <col align="right"> </colgroup> gives two <col>s a common attribute, which in turn give an attribute to an entire column. Note, there is no such thing as a </col> tag. Must come before everything else. You’d think they would come either just before or after the <tbody> but they come right after the <table>. Note that the keyword is span not colspan. What are they for? HTML 4 lets you specify the attributes of an entire column. You don’t have to repeat them in every cell the way you do in regular HTML. See the <col> and <colgroup> elements. Have a look at the various examples ignoring the technobabble between them. You can also do a view source on this document and note how I have used them. Opera 9.27, Opera 9.50 beta, Firefox 2.0.0.14, Sea Monkey 1.1.9, Safari 3.1.1:525.17 and Flock 1.1.4 all have a “bug”. They will not render <col class="xxxx">s correctly. IE 7.0.6000 renders it correctly. The Opera people say this is a feature not a bug. The language lawyers claim the W3 spec says that the browser is supposed to ignore the color attribute from the <col class. Logically, I think the <col styles should apply to the entire column, but not to <th rows. Last revised 2008-05-14.
<col class="strawberry" align="center" span="2">		tells about entire column’s colour, alignment, class, span width="125" width="20%" etc. Note you put everything right in the <col> tag. There is no </col> tag. <col> must be nested inside a <colgroup>…</colgroup> Note the parameter is called span, not colspan.
<thead>	</thead>	encloses table header rows. The thead, tbody and tfoot tags let you group your table in three regions, so that if the table scrolls, the header and footer will always be visible. Just the middle part will scroll. Provides a hook to attach CSS styles to everything in the header.
<tfoot>	</tfoot>	Encloses table footer rows. This must come before the <tbody> so the browser can render the footer even before all the table body data has arrived. Provides a hook to attach CSS styles to everything in the footer.
<tbody>	</tbody>	encloses table body rows. Provides a hook to attach CSS styles to everything in the body.
<tr valign="baseline">	</tr>	table row valign can be top, middle, bottom, baseline. valign can also occur on caption, tr and td.
<th align="center">	</th>	header item, also left,center,right,justify. Internet Explorer is a brain damaged browser than cannot figure out sensible column widths on its own. To pander to its in competence, you can use width="100" etc. to set absolute pixel widths of columns. However, doing this will ruin the display for other browsers that automatically adjust column widths to screen size.
<td align="center">	</td>	data item, also left,center,right,justify
<th rowspan="2">	</th>	header spanning two rows
<td rowspan="2">	</td>	data item spanning two rows
<th colspan="2">	</th>	header spanning two columns
<td colspan="2">	</td>	data item spanning two columns
<td dp=":">	</td>	align data in this cell at the : char
<td nowrap="nowrap">	</td>	may not break lines in cell
<td width="50%">	</td>	hints on how to compute column widths
<spacer type=horizonal>		can also be vertical or block. Netscape appears to ignore spacers.
<spacer size="20">		size in pixels
<spacer width="20">		horizontal size in pixels
<spacer height="20">		vertical size in pixels
<spacer align="left">		also right and center

The problem with the conventional tables is the column headers scroll of the page. Further, if you print the page, there are headers only on the first page of a long table. There is a clever trick to avoid that without resorting to frames or JavaScript kludges.

CSS
FORMS
FORMS: specification
HTML 4.01 Specifications: current HTML Standard
HTML Cheat Sheet

	Please email your feedback for publication, errors, omissions, broken/redirected link reports and suggestions to improve this page to Roedy Green :
	Canadian Mind Products
	mindprod.com IP:[65.110.21.43]
	Your face IP:[38.103.63.16]	The information on this page is for non-military use only.
	You are visitor number 11.	Military use includes use by defence contractors.
	You can get a fresh copy of this page from:	or possibly from your local J: drive (Java virtual drive/Mindprod website mirror)
	http://mindprod.com/jgloss/htmltables.html	J:\mindprod\jgloss\htmltables.html