Skip to content

Commit 0a6242d

Browse files
FremyCompanyFremyCompany
committed
[css-tables] Improved the HTML Table Formatting marshalling
1 parent 15d91b2 commit 0a6242d

File tree

1 file changed

+79
-89
lines changed

1 file changed

+79
-89
lines changed

‎css-tables-3/Overview.bs‎

Lines changed: 79 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -509,74 +509,96 @@ spec:css21; type:property; text:max-width
509509
<!--------------------------------------------------------------------------------->
510510
<h3 id="dimensioning-the-row-column-grid">Dimensioning the row/column grid</h3>
511511

512-
<p style="font-size: italic">
513-
This section explains how to decide how many rows and columns a table has.
514-
515512
<p>
516513
Like mentioned in the <a href="#table-structure">Table structure</a> section,
517-
the amount of rows and columns defined in a table can be determined from the
518-
table structure.
519-
520-
<p>
521-
Both dimensioning the row/column grid and assigning table-cells their slot(s) in that grid
522-
do require running the HTML Algorithms for tables.
523-
CSS Boxes that do not originate from HTML tables need to be converted to their equivalent
524-
before we can apply this algorithm.
514+
how many rows and columns a table has
515+
can be determined from the table structure.
516+
Both dimensioning the row/column grid and assigning table-cells their <nobr>slot(s)</nobr> in that grid
517+
do require running the HTML Algorithms for tables.
525518

526-
<h4 id="mapping-css-boxes-to-html-elements">Mapping CSS Boxes to HTML Elements</h4>
519+
<p class="note">
520+
CSS Boxes that do not originate from an HTML table element equivalent to their display type
521+
need to be converted to their HTML equivalent before we can apply this algorithm.
527522

528-
<p>
529-
In the following algorithm, "Mapping a |xyz| box to a HTML element if needed" means:
530-
531-
<ul><li>Let <code>&lt;|xyz|&gt;</code> be the HTML equivalent of |xyz| box 'display' type,
532-
as defined in <a href="#display-types">the display types list</a>:
533-
<ul class="compact" style="margin:0 !important">
534-
<li>If the |xyz| box originates from an HTML <code>&lt;|xyz|&gt;</code> element,
535-
<ul><li>Clone that element and its attributes (but not its descendants) and return it;</ul>
536-
<li>Else,
537-
<ul><li>Create a new HTML <code>&lt;|xyz|&gt;</code> element with no attribute and return it</ul>
523+
<div class="example">
524+
<xmp class="lang-markup">
525+
<ul class="table">
526+
<li><b>One</b><i>1</i></li>
527+
<li><b>Two</b><i>2</i></li>
528+
<li><b>Three</b><i>3</i></li>
538529
</ul>
530+
<style>
531+
ul.table { display: table; }
532+
ul.table > li { display: table-row; }
533+
ul.table > li > * { display: table-cell; }
534+
</style>
535+
</xmp>
536+
produces the same row/column grid as
537+
<xmp class="lang-markup">
538+
<table><tbody>
539+
<tr>
540+
<td></td>
541+
<td></td>
542+
</tr>
543+
<tr>
544+
<td></td>
545+
<td></td>
546+
</tr>
547+
<tr>
548+
<td></td>
549+
<td></td>
550+
</tr>
551+
</tbody></table>
552+
</xmp>
553+
</div>
539554

540-
<li>In both cases, save the relationship between the newly created <code>&lt;|xyz|&gt;</code> element and its |xyz| box,
541-
to be able to invert it to map the html results back to css boxes.
542-
</ul>
543-
544-
<h4 id="html-table-slot-assignation-algorithm">Detailed algorithm</h4>
545-
546-
<p>
547-
To find out how many columns and rows the row/column grid of a table contains,
548-
and where each cell element takes place in that grid, the user agent must
549-
convert the css table to its equivalent html markup, using the following algorithm:
550-
551-
<ol>
552-
<li>Map the <a>table-root</a> to a HTML element if needed
553-
554-
<li>While there is one, and in DOM order,
555-
map to a HTML element if needed
556-
every child box of the <a>table-root</a>,
557-
and append those to the &lt;table&gt; element.
558-
559-
<li>While there is one, and in DOM order,
560-
map to a HTML element if needed
561-
every non-mapped <a>table-internal</a> box of the <a>table-root</a>
562-
that is also a child of any already mapped box
563-
and append those to the element that was mapped to their parent box.
564-
</ol>
555+
<div class="example">
556+
<xmp class="lang-markup">
557+
<!-- built using dom api, as this would be fixed by the html parser -->
558+
<grid style="display: table">
559+
<row style="display: table-row">
560+
<th rowspan="2">1</th>
561+
<colgroup style="display: table-cell" span="2" colspan="2">2</colgroup>
562+
</row>
563+
<tr>
564+
<td>A</td>
565+
<td>B</td>
566+
<td>C</td>
567+
</tr>
568+
</grid>
569+
</xmp>
570+
produces the same row/column grid as
571+
<xmp class="lang-markup">
572+
<table>
573+
<tr>
574+
<th rowspan="2">1</th>
575+
<td>2</td>
576+
</tr>
577+
<tr>
578+
<td>A</td>
579+
<td>B</td>
580+
<td>C</td>
581+
</tr>
582+
</table>
583+
</xmp>
584+
Note how the second cell of the first row doesn't have ```colspan=2``` applied, because its originating element is not an HTML TD element.
565585

566-
<p class="issue">Let's re-write this, the 'while there is one' feels redundant and
567-
we won't spend time on an element if there isn't one.
586+
<a class="hint" href="https://jsfiddle.net/eqrwaLyc/">Testcase</a>.
587+
<a class="hint" href="https://jsfiddle.net/eqrwaLyc/1/">!!Testcase</a>.
588+
<a class="hint" href="https://jsfiddle.net/sckxeLmh/2/">!Test case</a>.
589+
<a class="hint" href="https://jsfiddle.net/sckxeLmh/4/">!!Test case</a>.
590+
<a class="hint" href="https://jsfiddle.net/sckxeLmh/5/">!!Test case</a>.
568591

569-
<a class="hint" href="https://jsfiddle.net/eqrwaLyc/">Testcase</a>.
570-
<a class="hint" href="https://jsfiddle.net/eqrwaLyc/1/">!!Testcase</a>.
571-
<a class="hint" href="https://jsfiddle.net/sckxeLmh/2/">!Test case</a>.
572-
<a class="hint" href="https://jsfiddle.net/sckxeLmh/4/">!!Test case</a>.
573-
<a class="hint" href="https://jsfiddle.net/sckxeLmh/5/">!!Test case</a>.
592+
</div>
574593

575594
<p>
576-
Once this is done, apply the <a href="https://www.w3.org/TR/html5/tabular-data.html#forming-a-table">HTML5 Table Formatting algorithm</a>.
595+
Apply the <a href="https://www.w3.org/TR/html5/tabular-data.html#forming-a-table">HTML5 Table Formatting algorithm</a> on the HTMLified box tree,
596+
where boxes act like <a href="#display-types">the HTML element equivalent to their display type</a>,
597+
and use the attributes of their originating element only if it as an HTML element of the same type
598+
(otherwise, they act like if they didnt't have any attribute).
577599

578600
<p class="note">
579-
The HTML algorithms sometimes generates more tracks than necessary to layout the table properly.
601+
The HTML Table Formatting algorithm sometimes generates more tracks than necessary to layout the table properly.
580602
Those tracks have historically been ignored by user agents,
581603
so the next step just gets rid of them entirely to avoid dealing with them as exceptions later in the spec.
582604

@@ -595,46 +617,14 @@ spec:css21; type:property; text:max-width
595617
For tables <a>in fixed mode</a>, only rows are eligible to be merged that way; which means that every column is preserved.
596618

597619
<p>
598-
Finally, assign to the <a>table-root</a> element its correct amount of rows and columns (from its mapped element),
620+
Finally, assign to the <a>table-root</a> element its correct number of rows and columns (from its mapped element),
599621
and to each <a>table-cell</a> element its accurate table-row-start/table-column-start/table-row-span/table-column-span (from its mapped element).
600622

601623
<div class="issue">
602624
The HTML specification mentions that in some cases, two cells may occupy the same row/column location.
603625
We need to make sure this specification explains what happens in this case for layout/rendering.
604626
</div>
605627

606-
<div class="example">
607-
<xmp class="lang-markup">
608-
<ul class="table">
609-
<li><label>One</label><input /></li>
610-
<li><label>Two</label><input /></li>
611-
<li><label>Three</label><input /></li>
612-
</ul>
613-
<style>
614-
ul.table { display: table; }
615-
ul.table > li { display: table-row; }
616-
ul.table > li > * { display: table-cell; }
617-
</style>
618-
</xmp>
619-
produces the same row/column grid as
620-
<xmp class="lang-markup">
621-
<table><tbody>
622-
<tr>
623-
<td></td>
624-
<td></td>
625-
</tr>
626-
<tr>
627-
<td></td>
628-
<td></td>
629-
</tr>
630-
<tr>
631-
<td></td>
632-
<td></td>
633-
</tr>
634-
</tbody></table>
635-
</xmp>
636-
</div>
637-
638628
<!--------------------------------------------------------------------------------->
639629
<h3 id="missing-cells-fixup">Missing cells fixup</h3>
640630

0 commit comments

Comments
 (0)