[css-tables] editorial

Author: FremyCompany

css-tables-3/Overview.bs

@@ -606,35 +606,6 @@ spec:filter-effects-1; type:property; text:filter
 					to make it easier to understand.
 			</p>
 			<img src="images/CSS-Tables-Layout-Merged.svg" style="width: 100%" />
-			<details style="border: 3px solid silver">
-				<summary style="background:silver">Legend</summary>
-				<div>
-
-					<b>Sizing algorithms: </b>
-					Each drawing of the table represents a way of sizing the columns.
-					The four cases on the left are the sizing-guesses described above in the spec: 
-						<a href="#min-content-sizing-guess">min-content</a>, 
-						<a href="#min-content-percentage-sizing-guess">min-content-percentage</a>, 
-						<a href="#min-content-specified-sizing-guess">min-content-specified</a>, and 
-						<a href="#max-content-sizing-guess">max-content</a>.
-					The cases on the right are interpolations required for available sizes that do not match exactly one of the four sizing-guesses.
-
-					<b>Choice of sizing method: </b>
-					The sizing method selection always starts at the min-content sizing-guess (top left), 
-						and then proceeds by comparing the available width and the width consumed by the method currently in use.
-					Green arrows indicate the direction you should follow 
-						if you have extra space to distribute after applying the current method.
-					Red arrows indicate the direction you should follow 
-						if you have distributed too much space by applying the current method and need to backtrack.
-
-					<b>Columns types: </b>
-					Each type of column (auto, px, %) has its own color in the schema (yellow, blue, orange).
-					In an interpolation: 
-						columns that get shrinked down from their size in previous sizing-guess are repainted red, and 
-						columns that get expanded from their size in previous sizing-guess are repainted green.
-
-				</div>
-			</details>
 			<figcaption>Overview of the table layout algorithm. Not normative.</figcaption>
 		</figure>
 
@@ -1763,6 +1734,35 @@ spec:filter-effects-1; type:property; text:filter
 					to make it easier to understand.
 			</p>
 			<img src="images/CSS-Tables-Column-Width-Assignment.svg" style="width: 100%" />
+			<details style="border: 3px solid silver; text-align: left;">
+				<summary style="background: silver">Legend</summary>
+				<div>
+
+					<b>Sizing algorithms: </b>
+					Each drawing of the table represents a way of sizing the columns.
+					The four cases on the left are the sizing-guesses described above in the spec: 
+						<a href="#min-content-sizing-guess">min-content</a>, 
+						<a href="#min-content-percentage-sizing-guess">min-content-percentage</a>, 
+						<a href="#min-content-specified-sizing-guess">min-content-specified</a>, and 
+						<a href="#max-content-sizing-guess">max-content</a>.
+					The cases on the right are interpolations required for available sizes that do not match exactly one of the four sizing-guesses.
+
+					<b>Choice of sizing method: </b>
+					The sizing method selection always starts at the min-content sizing-guess (top left), 
+						and then proceeds by comparing the available width and the width consumed by the method currently in use.
+					Green arrows indicate the direction you should follow 
+						if you have extra space to distribute after applying the current method.
+					Red arrows indicate the direction you should follow 
+						if you have distributed too much space by applying the current method and need to backtrack.
+
+					<b>Columns types: </b>
+					Each type of column (auto, px, %) has its own color in the schema (yellow, blue, orange).
+					In an interpolation: 
+						columns that get shrinked down from their size in previous sizing-guess are repainted red, and 
+						columns that get expanded from their size in previous sizing-guess are repainted green.
+
+				</div>
+			</details>
 			<figcaption>Overview of the width distribution algorithm. Not normative.</figcaption>
 		</figure>