output.to from Sideway

`-=[]⟨⟩\;',./~!@#$%^&*()_+{}|:"<>? 𝑎𝑏𝑐𝑑𝑒𝑓𝑔ℎ𝑖𝑗𝑘𝑙𝑚𝑛𝑜𝑝𝑞𝑟𝑠𝑡𝑢𝑣𝑤𝑥𝑦𝑧 Å − × ⋅∓±∘꞊﹦∗∙ ℯ 𝔸𝔹ℂ𝔻𝔼𝔽𝔾ℍ𝕀𝕁𝕂𝕃𝕄ℕ𝕆ℙℚℝ𝕊𝕋𝕌𝕍𝕎𝕏𝕐ℤ𝐴𝐵𝐶𝐷𝐸𝐹𝐺𝐻𝐼𝐽𝐾𝐿𝑀𝑁𝑂𝑃𝑄𝑅𝑆𝑇𝑈𝑉𝑊𝑋𝑌𝑍 ∼∽∾≁≂≃≄≅≆≇≈≉≌≐≠≡ ≤≥≦≧≨≩≪≫ ∈∉∊∋∌∍ ⊂⊃⊄⊅⊆⊇ 𝛼𝛽𝛾𝛿𝜀𝜁𝜂𝜃𝜄𝜅𝜆𝜇𝜈𝜉𝜊𝜋𝜌𝜎𝜏𝜐𝜑𝜒𝜓𝜔 ∀∂∃∅⦰∆∇∎∞∝∴∵ ∏∐∑⋀⋁⋂⋃ ∧∨∩∪ ∫∬∭∮∯∰∱∲∳ ∥⋮⋯⋰⋱ ‖ ′ ″ ‴ ⁄ ⁗ ʹ ʺ ‵ ‶ ‷ ﹁﹂﹃﹄︹︺︻︼ ︗ ︘ ︿﹀︽︾﹇﹈︷︸ ⏜ ⏝ ⎴ ⎵ ⏞ ⏟ ⏠ ⏡ ←↑→↓↤↦↥↧↔↕↖↗↘↙▲▼◀▶↺↻⟲⟳ ↼↽↾↿⇀⇁⇂⇃⇄⇅⇆⇇ ⇐⇑⇒⇓⇔⇌⇍⇏⇕⇖⇗⇘⇙⇙⇳⥢⥣⥤⥥⥦⥧⥨⥩⥪⥫⥬⥭⥮⥯

Draft for Information Only

Content

CSS Tabular Form
 CSS Table Object 
 Examples of Simple CSS Tabular Forms
  Columns of Same Height in a Row of Blocks
  Row Headers of Same Columns Width in Rows of Blocks

CSS Tabular Form

Instead of using HTML table elements to construct a table for the presentation of information, simple tabular information can also be rendered in form of CSS table by CSS table objects for most modern UA.

CSS Table Object

The CSS table objects needed to created CSS tabular form are CSS table-row and table-cell objects. When there are two or more sibling CSS table-row or table-cell objects of the same type with only white space in between, these CSS table objects will be rendered as CSS tabular form by modern UA.

Examples of Simple CSS Tabular Forms

The most common examples are presentation columns of same height, and item list header with fixed column width.

Columns of Same Height in a Row of Blocks

All sibling table cells with only white space in between will be rendered as CSS tabular form of same column height by modern UA.

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<style type="text/css">
div,b {font-size:1em}
div {width:500px;background-color:cyan}
p {width:60px;background-color:lime;margin:0em 2em}
b {display:table-cell;background-color:silver;padding:0em 0.25em}
</style>
<title>Sample Page</title>
    </head>
    <body>
<div>
<p>This is "<b>a 'b' table cell</b>".
This is "<b>another 'b' table cell</b>
<b>another one 'b' table cell</b>".
This is "<b>another 'b' table cell</b>
<b>another one 'b' table cell</b>
<b>another two 'b' table cell</b>
<b>another three 'b' table cell........... ............. .......</b>".</p>
</div>
    </body>
</html>

HTML Web Page Embedded Output:

Row Headers of Same Columns Width in Rows of Blocks

In addition to sibling table cells, all sibling table cells with only white space in between will also be rendered as CSS tabular form in which table-cells whenever available will be rendered as in a table by modern UA.

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<style type="text/css">
div,b {font-size:1em}
div {width:500px;background-color:cyan}
p {width:auto;background-color:lime;margin:0em 2em}
i {display:table-row;text-decoration:none;background-color:yellow;padding:0em 0.25em}
b {display:table-cell;background-color:silver;padding:0em 0.25em}
</style>
<title>Sample Page</title>
    </head>
    <body>
<div>
<p>This is "<i>a 'i' table row with <b>a "b" table cell</b>nested</i>".</p>
<p>This is "<i>a 'i' table row with <b>a "b" table cell</b><b>next "b" table cell</b>nested</i>
<i>another empty 'i' table row</i>
<i>another next 'i' table row with <b>another "b" table cell</b><b>another next "b" table cell</b>nested</i>
<i>another next 'i' table row with <b>another "b" table cell</b>, and<b>another one "b" table cell</b> <b>another one "b" table cell</b>nested</i></p>
<p>This is a row header example:"<i><b>a "b" header table cell</b>and other details</i>
<i><b>another "b" header table cell</b>and another details .........</i>
This is another row header example:<i>row a <b>"b" header a table cell</b>details of row a</i>
<i>row b <b>"b" header b table cell</b>details of row b ............ .....</i>
<i>row c <b>"b" header 'c' table cell</b>details of row c</i></p>
</div>
    </body>
</html>

HTML Web Page Embedded Output:

©sideway

ID: 180300003 Last Updated: 3/3/2018 Revision: 0 Ref: