Above allows you to alter the representation of the whole page.
The selectable fonts are all 'generic' –except for 'Script'– to give a general impression. Font size is only of value for initial setting as most browsers allow you to increase or decrease font size. Word spacing and letter spacing are rather obscure options; their value (fraction) is relative to the width of the letter 'm' and can be negative.
Table properties
top
right
bottom
left
margin: (size)
px
px
px
px
border-width:
px
px
px
px
border-style:
border-color:
padding: (size)
px
px
px
px
background-color:
CellSpacing:
px
CellPadding:
px
Border collapse:
Cell properties
top
right
bottom
left
margin: (size)
px
px
px
px
border-width:
px
px
px
px
border-style:
border-color:
padding: (size)
px
px
px
px
background-color:
color: (foreground)
Top text
Cell text
Bottom text
Outer block tag:
Inner block tag:
Remarks
This page demonstrates the use of 'block attributes' like margin, border (width/style/color), padding and foreground-/background-color. Colors are by default 'transparent'; however as the script needs a hex value, they are initialized with the page background color.
Demo 1: Table and Cells
A table has already a specific (browser default) layout which is slightly different than other blocks, but otherwise a good block structure. The defaults commonly are:
Background color: No color (transparent, i.e. page background color);
Border style: For the table default outset, for the cells default inset;
Border color: For the table due to table border style = outset the background color, with the top- and left borders a tat lighter and the right- and bottom borders a tat darker (to suggest hight). And cell border style = inset provides a similar effect but in reverse for the cell borders (to suggest depth).
These common defaults are provided here as initial values.
Padding is not applicable for a Table, and Margin is not applicable for Cells (but they are for other blocks).
CellPadding, CellSpacing and Border Collapse (style) are specific Table attributes (and not applicable for other blocks). Table attribute CellPadding acts as default value for all table cell top-, right-, bottom- & left-padding.
Demo 2: General
This consists of a nested block structure, where the attributes of the outer block correspond to the 'table'-attributes, and the inner block to 'cell'.
The default values selected for the table & cell structure are not always appropriate for the block structure.
You may select particular tags for the inner and outer block; initially they are both div. Any change causes a reset of the attributes of the General block structure; to apply the current attributes to the General block structure press the correspondingly marked button. However, in order to keep the layout, (Table & Cell) margins are not set ! Modifying (Table & Cell) margins will also change this block structure.
The attributes are not effectuated at (re-)load, so that layout is 'default' (so default layout can be achieved anytime by 'refresh'). When an attribute is changed, all attributes in the same line (top/right/bottom/left) will be set to both demos (Table/Cell & General).
Padding of the outer block has the same effect as Margin of the inner block.