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

ID: 180200042 Last Updated: 28/2/2018 Revision: 0 Ref:

close

References

  1. http://www.w3.org/TR/1999/REC-html401-1999, 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 7

Culture

Chinese 1097

English 337

Reference 67

Computer

Hardware 149

Software

Application 187

Digitization 24

Numeric 19

Programming

Web 761

CSS 1

ASP.NET 1

Regular Expression 1

HTML

Knowledge Base

Common Color 1

Html Entity (Unicode) 1

Html 401 Special 1

OS 389

MS Windows

Windows10 1

.NET Framework 1

DeskTop 7

Knowledge

Mathematics

Formulas 8

Algebra 20

Number Theory 206

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

Physics

Electric 11

Biology 1

Geography 1


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