Sideway
output.to from Sideway



Draft for Information Only

Content

CSS Table Rendering
 HTML Table
  Elements of HTML Table
  Structure of HTML Table
  Rendering of HTML Table
 CSS Table Object

CSS Table Rendering

CSS table rendering is the using of a group of CSS rendering properties to construct a table. But in general, CSS table rendering can be divided into two groups, the rendering of HTML tags of table elements (HTML table), and the rendering of HTML tags of non-table elements (CSS table).

HTML Table

A HTML table is a table with pre-defined HTML tag elelemts of default CSS properites.

Elements of HTML Table

The HTML tagged element system of HTML table is basically an analogy of a practical table design. The four elements of HTML table are named "<caption>", "<thead>", "<tbody>", and "<tfoot>".  However, the arrangement of HTML tag elemens should be arranged as " <table> "<caption></caption>"; "<colgroup></colgroup>"; "<thead></thead>"; "<tfoot></tfoot>"; "<tbody></tbody>" </table>".  These CSS properties are UA dependant. For example in HTML 4.01

HTML Document Input:
<div style="outline:1px solid blue">
<table border="1" style="table-layout:fixed; border-collapse:collapse;outline:1px solid cyan">
   <caption>Table Caption</caption>
   <colgroup>
       <col style="border-style: none solid" />
       <col style="background: yellow" />
       <col style="visibility:collapse" />
       <col style="width:10em;background: cyan" />
   </colgroup>
   <thead>
       <tr>
           <th>rowhead_c1</th>
           <th>rowhead_c2</th>
           <th>rowhead_c3</th>
           <th>rowhead_c4</th>
       </tr>
   </thead>
   <tfoot>
       <tr>
           <th>rowfoot_c1</th>
           <th>rowfoot_c2</th>
           <th>rowfoot_c3</th>
           <th>rowfoot_c4</th>
       </tr>
   </tfoot>
   <tbody>
       <tr>
           <td>row1_c1</td>
           <td>row1_c2</td>
           <td>row1_c3</td>
           <td>row1_c4</td>
       </tr>
       <tr>
           <td>row2_c1</td>
           <td>row2_c2</td>
           <td>row2_c3</td>
           <td>row2_c4</td>
       </tr>
   </tbody>
</table>
</div>
HTML Web Page Embedded Output:

not support

Structure of HTML Table

A HTML table is constructed by manipulating the HTML tagged element section row-wisely.

  • A "<caption>" tag element is the only table caption section in the table.
  • A "<colgroup>" tag element is the only table colgroup section in the table to specify the column rendering properties of each column with the "<col>" tag element before rendering any rows of a table. However, the source data cells are descendants of rows, not of columns.  
  • A "<thead>" tag element is the only table header section in the table to specify the table header of each column used a table in row form with the "<tr>" tag element before start rendering other rows of a table.
  • A "<tfoot>" tag element is the only table footer section in the table to specify the table footer of each column used a table in row form with the "<tr>" tag element after the "<thead>" tag element and before start rendering other rows of a table.
  • A "<tbody>" tag element is equivalent to a rowgroup in nature and more than one "<tbody>" tag are allowed within "<table> tag. Unlik the "<colgroup>" tag element, a "<tbody>" tag element is used to specify the row rendering properties of each rowgroup  and to specify the row rendering properties of each row with the "<tr>" tag element.
  • A "<tr>" tag element is the basic table data row unit of a table and is used to specify the row rendering properties of each table row.
  • A "<th>" tag element and  "<td>" tag element is basic table data cell unit of a table and is used to specify the cell rendering properties of each table row. In general, the "<th>" tag has the rendering properties {font-weight: bold; text-align: center;} by default. While the "<td>" tag has the rendering properties {font-weight: normal; text-align: left;} by default, 

Rendering of HTML Table

When rendering a HTML table, a 'table' element is rendered as a rectangular block of block level or inline level context.

Both the 'table-header-group' and 'table-footer-group' elements are for the visual formatting of a table. The 'table-header-group' element is the first row of a table, while the 'table-fooder-group' element is the last row of a table. In practice, only the first 'table-header-group' and 'table-footer-group' elements are rendered as a header and footer of a table, ther others are treated as an ordinary 'table-row group' element. For print user agents,  the printer may repeat the 'table-header-group' and 'table-footer-group' elements on each page spanned.

Besides, a 'table-caption' element are always rendered as a table-caption as a child of a table.

However the rendering of a HTML table is usually rendered according to the UA rendering engine. The major different in rendering is

  •  The boundary of a HTML table may be different with each UA. Sometimes, the caption section may be located outside the boundary of the whole table body as an addition caption to the table.e.
  • The mechanism to handle conflicting table cell rendering

CSS Table Object

Besides formal HTML table, CSS table also support non-formal CSS table objects which are loosely organized anonymous table objects. The defined terms for constructing CSS table objects are 

  • row group box : A 'table-row-group', 'table-header-group', or 'table-footer-group'
  • proper table child: A 'table-row' box, row group box, 'table-column' box, 'table-column-group' box, or 'table-caption' box.
  • proper table row parent: A 'table' or 'inline-table' box or row group box
  • internal table box: A 'table-cell' box, 'table-row' box, row group box, 'table-column' box, or 'table-column-group' box.
  • tabular container: A 'table-row' box or proper table row parent
  • consecutive: Two sibling boxes are consecutive if they have no intervening siblings other than, optionally, an anonymous inline containing only white spaces. A sequence of sibling boxes is consecutive if each box in the sequence is consecutive to the one before it in the sequence.  

©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: 180200042 Last Updated: 2018/2/28 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