HTML Tables : Java Glossary

home page go to the Java Glossary Home go to the Computer Buyer’s Glossary up jump to foot of page Google search web for more information on this topic Pinterest pin button
* 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)
©1996-2017 2008-03-30 Roedy Green of Canadian Mind Products

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>

In HTML5 (Hypertext Markup Language v 5) use a style option and caption tag and remove cellspacing, cellpadding, bgcolour and summary.

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. The use of summary is now deprecated for no good reason. You now use <caption>…<caption>. The advantage of the new way is your description can contain tags. See Other ways to describe tables.

<caption> </caption> caption title, appears above table, in plain font.
<colgroup span=2 class=strawberry> </colgroup> Used two ways:
  1. <colgroup span=2 class=strawberry> </colgroup>
    gives two columns an attribute.
  2. <colgroup class=strawberry>
    <col align=center>
    <col align=right> (better with css float:align)
    </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 59.0.3
Chrome 53.0.2785.92
Opera 48.0.2685.52
SeaMonkey 2.49.2
Safari 5.1.7
Avant 2018:1
Edge 25,10586.0.0
IE 11 11.0.9600.17239
IE 10 10.02.9200.16521
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. 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 left hand Style Test column are the same colour, then your browser (the one you are using now to view this page) supports <col class=.

If both cells in the right hand 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: 2018-05-06

<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 (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 valign=baseline> </tr> table row valign can be top, middle, bottom, baseline. Variant middle is not part of the standard, but is supported in most browsers. valign can also occur on caption, tr and td. (better done with css vertical-align:top). valign is deprecated and does not work at all in HTML5.
<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=horizontal>   can also be vertical or block.
<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

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.

In HTML 5, you are not supposed to use tables to do layout, only use them for tabular data.

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. Search for techniques to stop your table headers from scrolling

All these solutions are hopelessly complicated and usually fail under some conditions or in some browsers. People love concocting new variations that don’t work properly. The sensibse solution would to to invent a style option you can apply to a <thead to make it freeze and a <tbody to make it scroll. A problem this simple does not deserve a rocket science solution. In the meantime, W3C (World Wide Web Consortium) should endorse some kludge.

This page is posted
on the web at:

 http://mindprod.com/jgloss/htmltables.html

Optional Replicator mirror
of mindprod.com
on local hard disk J:

 J:\mindprod\jgloss\htmltables.html
Canadian Mind Products
Please the feedback from other visitors, or your own feedback about the site.
Contact Roedy. Please feel free to link to this page without explicit permission.

IP:[65.110.21.43]
Your face IP:[3.128.94.112]
You are visitor number