THIS IS DOC ON TABLES:  HTML FIRST, LAYOUT SECOND, CSS LAST IF AT ALL.
==========================================================
http://css-tricks.com/complete-guide-table-element/
http://www.w3.org/TR/CSS21/tables.html
http://www.quirksmode.org/css/css2/columns.html

HTML
=====================
Normal <TR>s, (rows) are wrapped by <TBODY>: browser adds them if you don't.
Outside TBODY you can have <CAPTION>, <THEAD>, <TFOOT>.
CAPTION:  can have only one.  Must be decl. immed. after <TABLE>, but a css
property can get it rendered on any side.
<TD scope="row">:  has no effect on visual layout, only semantic/screen-readers

TFOOT: must be decl before TBODY, yet is rendered (printed) after TBODY.
Is there any point in using these?
Pro1: these are "semantic" markup.
In fact in "mystudents.php" pic gallry of my students, I have designed the
tables to have a row at the top with a menu and spanning all cols; and a row
at the bottom with many buttons, and spanning the cols.
So yes: I spontaneously in fact had a row diff. for the main rows in both top
and bot.  So semantic diff. is a common one.
Pro2: and in that file, I have a coding problem of how to get some CSS and JS
code to treat those rows differently.
Con1: But even if I used TFOOT etc. I would still have to write all the code
to pick them out etc.: so it in fact would just be extra work, no gain.
Pro3: Only strong case would be if I had a lot of diff. tables which all had
the same style treating the top/bot rows differently from other rows, but the
same in each table.  Then and only then would it be possible to write code in
one place but active in many.
------------
COLs:  <COL>  <COLGROUP>
You add redundant spec. of cols by <COLGROUP><COL> ...
Can not tell the truth about how many cols; use [col]span just to ctrl several
together. If you don't put in enough <cols> they are omitted from effects from
colgroup.  Can hardly do anything with them, but:
1) For bg colour: spec css in <COL>, in <COLSPAN>, in css
	e.g. col:nth-child(2) {background:#ffa; }
col, colgroup won't take :hover; will take :nth-child(5)
However it's not clear that <COL> is any better than using nth-child() on TD
It has btn-row bug for col.1

2) visiblity: collapse; will hide that col. But it doesn't work right on Safari.
3) width: will supposedly fix width of a col.
	Not supported in HTML5: so ignore?

CSS
=====================
table-layout:  auto | fixed | inherit
	fixed -- supposed to use the simpler algo, ignore cell contents in
	fixing widths

LAYOUT
=====================

(Coyler says): Table (and cells) will bust out of their container (window?) if:
	Text is no-wrap [white-space: nowrap;]
	Too many cells to fit

WHAT DETERMINES COL WIDTHs?
One algo is what each col needs e.g. longest word in any row determines it, if
wrapping is happening.
If table-layout: fixed; then supposedly it only looks at width: specs, and
the first row, and otherwise enforces equal-width cols.
Should look at any width: def. in <COL>, then in row1 <TD>, then divide width
equally over cols.



WHAT DETERMINES TABLE SIZE (WIDTH)?
It prefers not to wrap text in cells.
	(word-break: and display: and white-space: can affect this,
		preventing wrap anyway or forcing wrap)
It prefers IMGs full/natural size but no more??
It prefers to fit table into 100% of window / container.
Set widths
set max-widths
word-breaking.
	Including not being able to break single words that are too long.
Overflow: setting -- apparently not an influence


W/o IMG max-width:100%, the table goes over 100%
But doing this on FORM for btn row don't work. 
	[diff. issue: <100% / 100% / >100%]