HTML Tables : Java Glossary

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>

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 title, appears above table, in plain font.

</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.

What are they for? HTML (Hypertext Markup Language) 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.

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.

Internet Explorer lets you put them inside <thead> and <tbody>, which is more logical than the W3 rules, but incompatible with other browsers.

Browser Colgroup Support
browser	version	col class supported	col align supported	HTML5 entities supported
Firefox	10.0.1
SeaMonkey	2.7.1
Safari	5.1.1
Chrome	16.0.912.75
Avant	2012:21
Opera	11.61
IE 9	9.0.8112.16421
IE 8	8.0.7601.17514
IE 7	7.0.6000

Those browsers marked with an x all have a bug. They will not render <col class="xxxx">s correctly. The ones with a tick render 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. In addition Firefox, SeaMonkey, Safari and Flock also ignore the <col align attribute. Opera and IE render it properly.

Firefox, SeaMonkey and Opera support almost all the HTML5 entities. Oddly Opera sometimes supports entities and sometimes does not. It appears to be random. Chrome and Safari support many of them.

Colgroup Test
	Style Test	Alignment Test
On Every row	style	alignment
Using Colgroup	style	alignment

If both cells in the lefthand Style Test column arethe same colour, then your browser (the one you are using now to view this page) supports <col class=.

If both cells in the righthand Alignment Test column right-align, then your browser supports <col align= correctly.

Dreamweaver lets you apply a css style to all rows individually. Last revised/verified: 2012-02-11

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 (Cascading Style Sheets) 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>

table row valign can be top, middle, bottom, baseline. valign can also occur on caption, tr and td.

</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>

data item, also left, center, right, justify

</th>

header spanning two rows

</td>

data item spanning two rows

</th>

header spanning two columns

</td>

data item spanning two columns

</td>

align data in this cell at the : char

</td>

may not break lines in cell

</td>

hints on how to compute column widths

can also be vertical or block. Netscape appears to ignore spacers.

size in pixels

horizontal size in pixels

vertical size in pixels

also right and center

If you producing a complex table with cells that span more than one row or column, turn on the gridlines, and after you have table debug, remove them.

If you are generating HTML table code with Java, create the table manually, then make a screen snapshot of the rendering. Then use the manual code and your snapshot to guide you in producing the Java code. That way, you don’t need to visualise the big picture, just concentrate on producing the code for the individual pieces.

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 are a number of tricks you can use in CSS to get the effect of non-scrolling fixed header they way you have in a spreadsheet. See mindprod.css xxx.spreadsheet for how it is done and regex for what it looks like.

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

	You can get the freshest copy of this page from:	or possibly from your local J: drive (Java virtual drive/mindprod.com website mirror)
	http://mindprod.com/jgloss/htmltables.html	J:\mindprod\jgloss\htmltables.html
	Please email your feedback for publication, letters to the editor, errors, omissions, typos, formatting errors, ambiguities, unclear wording, broken/redirected link reports, suggestions to improve this page or comments to Roedy Green : If you want your message kept confidential, not considered for posting, please explicitly specify that.
	Canadian Mind Products
	mindprod.com IP:[65.110.21.43]
view Blog	Your face IP:[38.107.179.213]
Feedback	You are visitor number 11.