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

<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>

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.