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

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

close

References

  1. http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999
close
Latest Updated LinksValid XHTML 1.0 Transitional Valid CSS!Nu Html Checker Firefox53 Chromena IExplorerna
 IMAGE

Home 5

Business

Management

HBR 3

Information

Recreation

Hobbies 8

Culture

Chinese 1097

English 339

Travel 18

Reference 79

Hardware 23new

Computer

Hardware 259

Software

Application 213

Digitization 37

Latex 52

Manim 205

KB 1

Numeric 19

Programming

Web 289

Unicode 504

HTML 66

CSS 65

SVG 46

ASP.NET 270

OS 431

DeskTop 7

Python 72

Knowledge

Mathematics

Formulas 8

Set 1

Logic 1

Algebra 84

Number Theory 206

Trigonometry 31

Geometry 34

Coordinate Geometry 2

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

Natural Sciences

Matter 1

Electric 27

Biology 1

Geography 1

Copyright © 2000-2025 Sideway . All rights reserved Disclaimers last modified on 06 September 2019