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:
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:
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:
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:
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:
Sideway
BICK BLOG from Sideway
