Thursday, March 28, 2024

Working with Anonymous Table Objects

Some document languages (such as XML) when displayed as a table pattern model, may not contain all the elements available immediately. As a kind of compensation for these cases, these elements must be assumed in the table model so that it works.

Due to the fact that other languages might not contain all the elements necessary to achieve the table structure model used by CSS, it is admitted that the elements necessary for the layout to function are missing. According to the CSS 2.1 specification, a table element will automatically generate the anonymous table objects around it (a table, a cell, or a row).

For example, consider this HTML:

 <table>
   <td>Name: </td>
   <td>input type="text"</td>
</table> 

As you can see, this two-cell table is defined in a single row, but structurally (house structure), there is no element to define a row (because the element <tr> is missing altogether).

When we want to cover such possibilities, CSS defines a mechanism for automatically inserting the missing table components as anonymous objects. For a basic example of how this works, let’s look at our HTML example. What actually happens is that an anonymous row of objects is inserted between the table element and the descending table cells.

 <table>
<!—anonymous table-row object begins-->
   <td>Name: </td>
   <td>input type="text"</td>
<!—anonymous table-row object ends-->
</table> 

Any element in a table will automatically generate the required anonymous table objects around it. There are at least three nested objects that fit an “inline-table,” “element” and “row” element table”. These missing items that we are talking about generate anonymous objects (such as anonymous boxes in the visual aspect of the table) according to the following rules:

  • 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
  • row group box: a ‘table-row-group’, ‘table-header-group’, or ‘table-footer-group’
  • tabular container: a ‘table-row’ box or proper table row parent
  • internal table box: a ‘table-cell’ box, ‘table-row’ box, row group box, ‘table-column’ box, or ‘table-column-group’ box
  • consecutive: two brother boxes are consecutive if these two boxes do not have any other brothers, except an optional anonymous inline that contains only white spaces.
  • a sequence of brother boxes is consecutive if each box in the sequence is consecutive to the previous one in the sequence

Anonymous table objects are a function of the user agent rendering engine, so no code changes are required.

Thus, in the case of a table, it displays values even if the equivalent row element is missing, at which point the browser automatically generates an anonymous row-table object between cells and the table level.

These missing items that are automatically generated when creating the table consist of at least three nested objects, elements that correspond to a table-row, a table-inline element and a table-cell.

The anonymous elements referred to in the lines above are elements generated through these steps:

1. Irrelevant boxes are removed:

  • All child boxes of a table-column parent are treated as if the display is set to none
  • When a box is an inline anonymous box, that only has a white space and is located between two brothers immediately (if any), each of which is either an internal table box or a table, it is treated as if it has not displayed any
  • When a child from a particular table container (parent box or row box) is an inline anonymous box containing only a white space, then the next brothers (if any) and the descendants of the table are either cassettes of the table are treated as if nope have been displayed
  • If a child from a parent group table-column is not a column-table box, it is treated as it was not set to any of them

2. Missing parents are generated:

  • For each child with table cells in a sequence of internal table and subtitle brothers, if the child’s parent is not a table-row, then an anonymous row of table will be generated around the child and all consecutive brothers of the child are table-cell boxes.
  • For every actual child in a sequence of consecutive table children, if the child is poorly parented, then an anonymous table or inline-table box will be generated around the child and all the consecutive brothers of the child, who are appropriate children for the table.

A row of the table is “mis-parented” if the parent is not a row group box, nor a table or table inline. A table-column box is mis-parented if the parent is not a tab group-column column, not table or inline table. A row group, table-column-group or subtitle table is mis-parented if the parent is either not an inline table box or there is no table box.

3. Missing child wrappers are generated:

  • When a child in a table, or inline table, is not a suitable child, then a random anonymous box will be generated around the child and all consecutive brothers of the child who are not appropriate table children.
  • When a child in a table row is not a table cell, then an anonymous table-cell box will be generated around the child’s consecutive brothers who are not table-cell boxes.
  • When a child in a row group box is not a table-row box, then an anonymous table-row box will be generated around the child and all consecutive child brothers that are not table-row boxes.

A “missing cell” is a cell in the table grid that is not taken by an element and missing cells are rendered as if an anonymous table-cell box takes their place in the grid.

In the following example, the first row contains six non-empty cells, the second row contains only three non-empty cells, the third row contains only one empty cell and the fourth row contains four empty cells. Notice that some cells spans into some rows. The HTML code below reveals how anonymous table object rules works:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
    <TITLE>Table example</TITLE>
    <STYLE type="text/css">
      TABLE  { background: #76D7C4; border: solid black; empty-cells: hide }
      TR.top { background: #900C3F}
      TD     { border: solid black }
    </STYLE>
  </HEAD>
  <BODY>
    <TABLE>
      <TR CLASS="top">
        <TD> 1 
        <TD> 2
        <TD rowspan="3"> 3 
        <TD rowspan="2"> 4 
	<TD> 5 
        <TD> 6
      <TR>
        <TD> 7
        <TD>
     <TR>
        <TD> 8
        <TD> 9
        <TD rowspan="2"> 10 
        <TD> 11
      <TR>
        <TD> 5
        <TD>
    </TABLE> 
  </BODY>
</HTML> 

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured