TechKnack Styles

Body.Help {background-color:#99FFCC;font-weight:normal;font-size:12;font-family:Times;border-style:outset;border-width:medium;border-color:#99CCFF;margin:0;padding:0;}

Body.Clear {background-color:#FFFFFF;font-weight:normal;font-size:12;font-family:Times;border-style:outset;border-width:medium;border-color:#FFFFFF;margin:0;padding:0;}

Table Replacement For Layout

See W3: The CSS table model.
Using tables for layout is frowned upon ("Table are for tabular data!").
The following are CSS replacements, usually used with div tags.
- Using display:table-cell changes the block setting of the div element to inline (i.e. no newlines added),
though could use span instead of div, or include e.g. display:inline-block.

display:table etc are not supported in IE7 and earlier. IE8 requires a !DOCTYPE, IE 9 is OK.
See msdn: http-equiv attribute | httpEquiv property.
Also see Fix Bad value X-UA-Compatible once and for all.

July 2013 Market Shares (based on number of users):
(-see w3schools.com: CSS display Property).
See thenextweb:

IE 10 15%, 9 10%, 8 24%, earlier 8%	57%
Firefox 22 11%, 21 2%, earlier 5%	18%
Chrome 28 9%, 27 6%, earlier 3%	18%
Safari	5%
Opera	2%

The CSS attributes are better than then the table tags because:
a) they can be specified externally in the .css files;
b) other tags can be interspaced or put in rows, without the display being shoved to the end of the table,
though any border-spacing in a parent tag will have no effect.

They are worse because:
a) there is no equivalent to colspan or rowspan,
so making a cell span more than one row or column is difficult.
- Must e.g. make sub-tables in every row for each group of cells that may be joined,
- though the sub table can be omitted round the cells that span the whole group.

1,1

1,2

1,3

2,1+2 and some text

2,3

- But if there are cell borders, the inner table borders
are approximately centred on the inner edges of the outer table borders.
Also border-collapse does not work across two tables.

Nt?, Nr?, and Nc? are equivalent to the table. row and cell elements.
By TechKnack convention only, Nt? and Nr?start in the same column, and Nc?elements are indented.

.Ttt {display:table;} just creates an internal table, when screen position already set by outer layers.

Can be used to define a column, where the data is more naturally specified a column at a time.

.Ttc {display:table; border-collapse:collapse;} - an internal table usually containing bordered cells.

.Ttv {display:table; margin:0 auto;} creates a central table. Start with this.

.Trp {display:table-row; background-color:lightblue;} creates a coloured box:

this colour

.Trh {display:table-row; text-align:center; font-weight:bold;} for column/table headings.

.Trm {display:table-row; text-align:center;} for centred column data.

.Trl {display:table-row; text-align:left;} for left aligned column data.

.Tcl {display:table-cell;}

.Tcb {display:table-cell; border:2px #000 solid;}

- cell with a border. Usually in a table with border-collapse:collapse; set (e.g. Ttc.

.Tcc {display:table-cell; border:2px #000 solid; background-color:#66FF99;}

- Putting the colour in an internal cell, e.g. Tcx2, only colours to the bottom of the text (in IE10, at least).

.Tcx2 {display:table-cell; height:40px;padding-left:10px;padding-right:10px;
text-align:center;vertical-align: middle; border: solid #000 2px;}

.Tad {text-align:center; width:100%; font-size:18pt; font-weight:bold;}

.Tam {margin:5px;}