[css-tables] Added: figure explaining table layout

Author: FremyCompany

css-tables-3/Overview.bs

@@ -653,55 +653,65 @@ spec:css21; type:property; text:max-width
 
 		<p>To layout a table, user agents must apply the following actions:
 			<ol>
-				<li><b>Determine the amount of rows/columns the table requires.</b>
-					This is done by executing the steps described in [[#dimensioning-the-row-column-grid]].
-				
-				<li><b>If the table has at least one caption, compute their minimum width.</b>
-					This is done by computing their min-content width (including margins and paddings) 
+				<li><b>If the table has at least one caption, compute their minimum width.</b><br/>
+					This is done by computing their min-content width (including margins, borders and paddings) 
 					under the assumption their parent has a zero width and overflow:visible.
 					The largest such width will be known as <a href="#capmin">CAPMIN</a>.
-					
+
+				<li><b>Determine the amount of rows/columns the table requires.</b><br/>
+					This is done by executing the steps described in [[#dimensioning-the-row-column-grid]].
+				
 				<li><b>If the table has at least one cell:</b>
 					<ol>
-						<li><b>Apply [[#missing-cells-fixup]] to occupy each slot.</b>
+						<li><b>Ensure each cell slot is occupied by at least one cell.</b><br/>
+							This is done by executing the steps described in [[#missing-cells-fixup]].
 
-						<li><b>Compute the minimun width of each row/column.</b>
+						<li><b>Compute the minimun width of each row/column.</b><br/>
 							This is done by executing the steps described in [[#content-measure]].
 
-						<li><b>Compute the width of the table.</b>
+						<li><b>Compute the width of the table.</b><br/>
 							This is done by executing the steps described in [[#computing-the-table-width]].
 
-						<li><b>Distribute the width of the table among columns.</b>
+						<li><b>Distribute the width of the table among columns.</b><br/>
 							This is done by executing the steps described in [[#width-distribution-algorithm]].
 
-						<li><b>Compute the height of the table.</b>
+						<li><b>Compute the height of the table.</b><br/>
 							This is done by executing the steps described in [[#computing-the-table-height]].
 
-						<li><b>Distribute the height of the table among rows.</b>
+						<li><b>Distribute the height of the table among rows.</b><br/>
 							This is done by executing the steps described in [[#height-distribution-algorithm]].
 
 					</ol>
 
 					<b>Else, if the table is empty:</b>
 					<ol>
-						<li><b>Compute the width of the table.</b>
+						<li><b>Compute the width of the table.</b><br/>
 							This is done by returning the largest value of <a href="#capmin">CAPMIN</a> 
-							and the computed width of the table box (including paddings)
-								if it is different definite (zero otherwise).
+							and the computed width of the table box (including borders and paddings)
+								if it is definite (use zero otherwise).
 
-						<li><b>Compute the height of the table.</b>
+						<li><b>Compute the height of the table.</b><br/>
 							This is done by returning the sum of all table-caption heights
 								(their width being set to the table width, 
 								with margins taken into consideration appropriately)
-							and the computed height of the table box (including paddings)
-								if it is different definite (zero otherwise).
+							and the computed height of the table box (including borders and paddings)
+								if it is definite (use zero otherwise).
 
 					</ol>
 
-				<li><b>Assign to each table-caption and table-cell their position and size.</b>
+				<li><b>Assign to each table-caption and table-cell their position and size.</b><br/>
 					This is done by running the steps of [[#bounding-box-assignment]].
 
 			</ol>
+			
+		<figure>
+			<p class="advisement">
+				The following schema describes the algorithm in a different way,
+					to make it easier to understand.
+			</p>
+			<img src="images/CSS-Tables-Layout-Merged.svg" style="width: 100%" />
+			<figcaption>Overview of the table layout algorithm. Not normative.</figcaption>
+		</figure>
 
 	<!--------------------------------------------------------------------------------->
 	<h3 id="dimensioning-the-row-column-grid">Dimensioning the row/column grid</h3>