Sideway
output.to from Sideway



Draft for Information Only

Content

CSS Table Object
 HTML Table Object Tag
  CSS Table Objects
   Table-cell Object
   Table-cell Objects
   Empty Table-Row Object
   Table-Row Objects
   Table-caption Objects

CSS Table Object

Since display property can be assign to any HTML tag, tagged elements other than HTML table object tags can also be used to construct CSS table objects. .

HTML Table Object Tag

In HTML, a HTML table is usually rendered according to the HTML table tag elements because these tagged elements are well defined by default. User agents may ignore the 'display' property of a HTML table tag element if the HTML table is constructed by HTML table tag elements correctly. However, user agents will always take the 'display' property of other non-table tag elements as usual when rendering a HTML tagged element. In other words, other HTML tagged element can also be rendered a table objects when altering the 'display' properties of tagged element accordingly.

The relationships between 'display' property and HTML table tag are

  • 'display' inline-table: not defined in HTML and is used to specify an inline level table element
  • 'display' table: 'table' in HTML and is used to specify a block level table element
  • 'display' table-caption: 'caption' in HTML and is used to specify a table caption element
  • 'display' table-column-group: 'colgroup' in HTML and is used to specify a group of one or more columns of table cells element
  • 'display' table-column: 'col' in HTML and is a tagged element used to specify the properties of a column of table cesll
  • 'display' table-header-group: 'thead' in HTML and is used to specify a row of table cells element with the table header function
  • 'display' table-footer-group: 'tfoot' in HTML and is used to specify a row of table cells element with the table footer function
  • 'display' table-row-group: 'tbody' in HTML and is used to specify a group of one or more rows of table cells element
  • 'display' table-row: 'tr' in HTML and is used to specify a row of table cells element.
  • 'display' table-cell: 'td' in HTML and is used to specify a table data cell element

CSS Table Objects

CSS table objects are created by assigning those values of table construction related to the 'display' property. One typical example of using HTML tag for creating CSS table objectis is to modify the 'display' propertiey of '<b>', '<i>', and '<u>' tags. But the 'font-style', 'font-weight', and 'text-decoration:none' properties must be normalized accordingly. For examples,

Table-cell Object

Create a table cell with bold 'font-weight' property and use the table cell as a block

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,p,b {font-size:1em}
div {width:500px;background-color:cyan}
p {width:auto;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>".</p>
</div>
    </body>
</html>
HTML Web Page Embedded Output:

not support

Table-cell Objects

Create table cells with bold 'font-weight' property. When two sibling table cells are consecutive and with inline containing only white space, these two table cells will be tabulated as in a table.

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 next 'b' table cell</b>".</p>
</div>
    </body>
</html>
HTML Web Page Embedded Output:

not support

Empty Table-Row Object

Create empty table row objects and use the table rows as blocks only

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}
u {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>
</style>
<title>Sample Page</title>
    </head>
    <body>
<div>
<p>This is "<u>a 'u' table row</u>".</p>
<p><b>This is "<u>a 'u' table row</u>"nested in a "b" table cell.</b>
<b>This is "<u>a 'u' table row</u>"bounded by another "b" sibling table cell .</b></p>
</div>
    </body>
</html>
HTML Web Page Embedded Output:

not support

Table-Row Objects

Create  table row objects with or without table cell. When two or more sibling table rows are consecutive and with inline containing only white space, these consecutive table rows will be tabulated as in a table.

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}
u {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 "<u>a 'u' table row with <b>a "b" table cell</b>nested</u>".</p>
<p>This is "<u>a 'u' table row with <b>a "b" table cell</b><b>next "b" table cell</b>nested</u>
<u>another empty 'u' table row</u>
<u>another next 'u' table row with <b>another "b" table cell</b><b>another next "b" table cell</b>nested</u></p>
</div>
    </body>
</html>
HTML Web Page Embedded Output:

not support

Table-caption Objects

Create table captions. A table caption outside a table is used as a block. When two or more sibling table captions are consecutive and with inline containing only white space, these consecutive table captions will always be ignorted. A table caption nested in a table will be relocated as a caption outside the table. However the rendering of the caption is always affected by the tag container.

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,p,b {font-size:1em}
div {width:500px;background-color:cyan}
p {width:auto;background-color:lime;margin:0em 2em}
b {display:table-cell;background-color:silver;padding:0em 0.25em}
i {display:table-caption;background-color:gray;padding:0em 0.25em}
</style>
<title>Sample Page</title>
    </head>
    <body>
<div>
<p>This is a "p" paragraph.</p>
<p style="display:table-caption">This is a "p" paragraph with table caption 'display' property.</p>
<i>This is a "i" tag with table caption 'display' property.</i>
<p>This is <i>a "i" tag with table caption 'display' property </i>nested in a "p" paragraph.</p>
<p style="display:table">This is a "p" tag table used to nest a table caption {-- <i>This is a "i" tag with table caption 'display' property nested in a 'p' tag table</i> <i>This is another "i" tag with table caption 'display' property</i> --} witho no table row or tabale cell.</p>
</div>
    </body>
</html>
HTML Web Page Embedded Output:

not support


©sideway
close

References

  1. http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999
close

ID: 180300001 Last Updated: 2018/3/1 Revision: Ref:

IMAGE

Home (5)

Business

Management

HBR (3)

Information

Recreation

Hobbies (7)

Culture

Chinese (1097)

English (336)

Reference (66)

Computer

Hardware (149)

Software

Application (187)

Digitization (24)

Numeric (19)

Programming

Web (648)new

CSS (SC)

ASP.NET (SC)

Regular Expression (SC)

HTML

Knowledge Base

Common Color (SC)

Html Entity (Unicode) (SC)

Html 401 Special (SC)

OS (389)

MS Windows

Windows10 (SC)

.NET Framework (SC)

DeskTop (7)

Knowledge

Mathematics

Formulas (8)

Number Theory (206)

Algebra (20)

Trigonometry (18)

Geometry (18)

Calculus (67)

Complex Analysis (21)

Engineering

Tables (8)

Mechanical

Mechanics (1)

Rigid Bodies

Statics (92)

Dynamics (37)

Fluid (5)

Fluid Kinematics (5)

Control

Process Control (1)

Acoustics (19)

FiniteElement (2)

Biology (1)

Geography (1)


Copyright © 2000-2019 Sideway . All rights reserved Disclaimers last modified on 10 Feb 2019