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. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<caption> | </caption> | caption title, appears above table, in plain font. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<colgroup span=2 class=strawberry> | </colgroup> | Used two ways:
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.
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.
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 scrollingAll 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 |
http://mindprod.com/jgloss/htmltables.html | |
Optional Replicator mirror
|
J:\mindprod\jgloss\htmltables.html | |
Please read the feedback from other visitors,
or send your own feedback about the site. Contact Roedy. Please feel free to link to this page without explicit permission. | ||
Canadian
Mind
Products
IP:[65.110.21.43] Your face IP:[18.97.14.89] |
| |
Feedback |
You are visitor number | |