docs(columns): mention col/colgroup

ffoodd · Oct 3, 2023 · cf6b6d5 · cf6b6d5
1 parent b92e427
commit cf6b6d5
Show file tree

Hide file tree

Showing 20 changed files with 380 additions and 339 deletions.
diff --git a/_site/templates/column-charts.njk b/_site/templates/column-charts.njk
@@ -63,8 +63,12 @@
 			—&nbsp;its background color also depending on its value;
 		</li>
 		<li>
-			and finally its text value —&nbsp;wrapped in a <code>&lt;span&gt;</code> element&nbsp;—
-			is positioned at the top of the column using the same trick as in the bar chart.
+			its text value —&nbsp;wrapped in a <code>&lt;span&gt;</code> element&nbsp;—
+			is positioned at the top of the column using the same trick as in the bar chart;
+		</li>
+		<li>
+			and finally <code>&lt;colgroup&gt;</code> and <code>&lt;col&gt;</code> elements are used to display
+			a light background for each column, which becomes more visible on <code>:hover</code>.
 		</li>
 	</ol>
 
@@ -146,7 +150,7 @@
 				</li>
 				<li>
 					remember to add <code>colspan="2"</code> on the first row's header cell
-					to match the new table layout;
+					to match the new table layout— and a <code>span="2"</code> on <code>&lt;col&gt;</code>s;
 				</li>
 				<li>
 					and finally add an <strong>identifier</strong> to each header cell
@@ -169,7 +173,7 @@
 				</li>
 				<li>
 					but no! Thus, a <var>--span</var> custom property is added on <code>&lt;table&gt;</code>,
-					and must match the <code>colspan</code> attributes values mentionned earlier:
+					and must match the <code>colspan</code> attributes values mentioned earlier:
 					it is therefore used to extend the first level headers to the appropriate number of columns.
 				</li>
 				<li>

diff --git a/_site/templates/includes/_bar-markup.njk b/_site/templates/includes/_bar-markup.njk
@@ -1,18 +1,18 @@
 <pre class="scrollable-container"><code class="language-markup">&lt;table class="chaarts bar" style="--scale: 3000"&gt;
-  &lt;caption id="caption-1"&gt;[…]&lt;/caption&gt;
-  &lt;thead class="sr-only"&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;/td&gt;
-      &lt;th scope="col"&gt;[…]&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;th scope="row"&gt;[…]&lt;/th&gt;
-      &lt;td style="--value: 4"&gt;
-        &lt;span&gt;[…]&lt;/span&gt;
-      &lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;[…]&lt;/tr&gt;
-  &lt;/tbody&gt;
+	&lt;caption id="caption-1"&gt;[…]&lt;/caption&gt;
+	&lt;thead class="sr-only"&gt;
+		&lt;tr&gt;
+			&lt;td&gt;&lt;/td&gt;
+			&lt;th scope="col"&gt;[…]&lt;/th&gt;
+		&lt;/tr&gt;
+	&lt;/thead&gt;
+	&lt;tbody&gt;
+		&lt;tr&gt;
+			&lt;th scope="row"&gt;[…]&lt;/th&gt;
+			&lt;td style="--value: 4"&gt;
+				&lt;span&gt;[…]&lt;/span&gt;
+			&lt;/td&gt;
+		&lt;/tr&gt;
+		&lt;tr&gt;[…]&lt;/tr&gt;
+	&lt;/tbody&gt;
 &lt;/table&gt;</code></pre>
diff --git a/_site/templates/includes/_column-markup.njk b/_site/templates/includes/_column-markup.njk
@@ -1,17 +1,26 @@
 <pre class="scrollable-container"><code class="language-markup">&lt;table class="chaarts column" id="column" style="--y: 7;"&gt;
-  &lt;caption id="caption-7"&gt;[…]&lt;/caption&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th scope="row"&gt;[…]&lt;/th&gt;
-      &lt;th scope="col" style="--value: 62;"&gt;Chrome&lt;/th&gt;
-      &lt;th scope="col" style="--value: 15;"&gt;Firefox&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;th scope="row"&gt;[…]&lt;/th&gt;
-      &lt;td style="--value: 62;"&gt;&lt;span&gt;62%&lt;/span&gt;&lt;/td&gt;
-      &lt;td style="--value: 15;"&gt;&lt;span&gt;15%&lt;/span&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
+	&lt;caption id="caption-7"&gt;[…]&lt;/caption&gt;
+	&lt;colgroup&gt;
+		&lt;col&gt;
+		&lt;col&gt;
+		&lt;col&gt;
+		&lt;col&gt;
+		&lt;col&gt;
+		&lt;col&gt;
+		&lt;col&gt;
+	&lt;/colgroup&gt;
+	&lt;thead&gt;
+		&lt;tr&gt;
+			&lt;th scope="row"&gt;[…]&lt;/th&gt;
+			&lt;th scope="col" style="--value: 62;"&gt;Chrome&lt;/th&gt;
+			&lt;th scope="col" style="--value: 15;"&gt;Firefox&lt;/th&gt;
+		&lt;/tr&gt;
+	&lt;/thead&gt;
+	&lt;tbody&gt;
+		&lt;tr&gt;
+			&lt;th scope="row"&gt;[…]&lt;/th&gt;
+			&lt;td style="--value: 62;"&gt;&lt;span&gt;62%&lt;/span&gt;&lt;/td&gt;
+			&lt;td style="--value: 15;"&gt;&lt;span&gt;15%&lt;/span&gt;&lt;/td&gt;
+		&lt;/tr&gt;
+	&lt;/tbody&gt;
 &lt;/table&gt;</code></pre>
diff --git a/_site/templates/includes/_columns-markup.njk b/_site/templates/includes/_columns-markup.njk
@@ -1,21 +1,28 @@
 <pre class="scrollable-container"><code class="language-markup">&lt;table class="chaarts column-multiple" id="column-multiple" style="--y: 11; --span: 2;"&gt;
-  &lt;caption id="caption-8"&gt;[…]&lt;/caption&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th scope="row" id="browser"&gt;[…]&lt;/th&gt;
-      &lt;th scope="col" colspan="2" id="chrome"&gt;Chrome&lt;/th&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;th scope="row" id="year"&gt;[…]&lt;/th&gt;
-      &lt;th scope="col" id="chrome-2018"&gt;2018&lt;/th&gt;
-      &lt;th scope="col" id="chrome-2019"&gt;2019&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;th scope="row" id="parts"&gt;[…]&lt;/th&gt;
-      &lt;td style="--value: 50;" headers="browser chrome year chrome-2018"&gt;&lt;span&gt;49.6%&lt;/span&gt;&lt;/td&gt;
-      &lt;td style="--value: 57;" headers="browser chrome year chrome-2019"&gt;&lt;span&gt;57%&lt;/span&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
+	&lt;caption id="caption-8"&gt;[…]&lt;/caption&gt;&lt;colgroup&gt;
+		&lt;col&gt;
+		&lt;col span="2"&gt;
+		&lt;col span="2"&gt;
+		&lt;col span="2"&gt;
+		&lt;col span="2"&gt;
+		&lt;col span="2"&gt;
+	&lt;/colgroup&gt;
+	&lt;thead&gt;
+		&lt;tr&gt;
+			&lt;th scope="row" id="browser"&gt;[…]&lt;/th&gt;
+			&lt;th scope="col" colspan="2" id="chrome"&gt;Chrome&lt;/th&gt;
+		&lt;/tr&gt;
+		&lt;tr&gt;
+			&lt;th scope="row" id="year"&gt;[…]&lt;/th&gt;
+			&lt;th scope="col" id="chrome-2018"&gt;2018&lt;/th&gt;
+			&lt;th scope="col" id="chrome-2019"&gt;2019&lt;/th&gt;
+		&lt;/tr&gt;
+	&lt;/thead&gt;
+	&lt;tbody&gt;
+		&lt;tr&gt;
+			&lt;th scope="row" id="parts"&gt;[…]&lt;/th&gt;
+			&lt;td style="--value: 50;" headers="browser chrome year chrome-2018"&gt;&lt;span&gt;49.6%&lt;/span&gt;&lt;/td&gt;
+			&lt;td style="--value: 57;" headers="browser chrome year chrome-2019"&gt;&lt;span&gt;57%&lt;/span&gt;&lt;/td&gt;
+		&lt;/tr&gt;
+	&lt;/tbody&gt;
 &lt;/table&gt;</code></pre>
diff --git a/_site/templates/includes/_inclusive-toggle.njk b/_site/templates/includes/_inclusive-toggle.njk
@@ -1,13 +1,13 @@
 <pre class="scrollable-container"><code class="language-javascript">document.addEventListener("DOMContentLoaded", function() {
-  var switches = document.querySelectorAll('[role="switch"]');
+	var switches = document.querySelectorAll('[role="switch"]');
 
-  Array.prototype.forEach.call(switches, function(el, i) {
-    el.addEventListener('click', function() {
-      var checked = this.getAttribute('aria-checked') == 'true' || false;
-      this.setAttribute('aria-checked', !checked);
+	Array.prototype.forEach.call(switches, function(el, i) {
+		el.addEventListener('click', function() {
+			var checked = this.getAttribute('aria-checked') == 'true' || false;
+			this.setAttribute('aria-checked', !checked);
 
-      var chart = this.parentNode.nextElementSibling;
-      chart.classList.toggle('table-charts');
-    });
-  });
+			var chart = this.parentNode.nextElementSibling;
+			chart.classList.toggle('table-charts');
+		});
+	});
 });</code></pre>
diff --git a/_site/templates/includes/_line-markup.njk b/_site/templates/includes/_line-markup.njk
@@ -1,17 +1,17 @@
 <pre class="scrollable-container"><code class="language-markup">&lt;table class="chaarts line" style="--y: 32; --x: 13; --t-1: 'Jan.'; --t-2: 'Feb.'; […]"&gt;
-  &lt;caption id="caption-3"&gt;[…]&lt;/caption&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th scope="col"&gt;[…]&lt;/th&gt;
-      &lt;th scope="col"&gt;Jan.&lt;/th&gt;
-      &lt;th scope="col"&gt;[…]&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr style="--year: '2017'; --1: 8; --2: 6; --3: 9; --4: 12; --5: 15; --6: 21; --7: 24; --8: 25; --9: 22; --10: 19; --11: 14; --12: 9;"&gt;
-      &lt;th scope="row"&gt;2017&lt;/th&gt;
-      &lt;td&gt;8&nbsp;°C&lt;/td&gt;
-      &lt;td&gt;[…]&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
+	&lt;caption id="caption-3"&gt;[…]&lt;/caption&gt;
+	&lt;thead&gt;
+		&lt;tr&gt;
+			&lt;th scope="col"&gt;[…]&lt;/th&gt;
+			&lt;th scope="col"&gt;Jan.&lt;/th&gt;
+			&lt;th scope="col"&gt;[…]&lt;/th&gt;
+		&lt;/tr&gt;
+	&lt;/thead&gt;
+	&lt;tbody&gt;
+		&lt;tr style="--year: '2017'; --1: 8; --2: 6; --3: 9; --4: 12; --5: 15; --6: 21; --7: 24; --8: 25; --9: 22; --10: 19; --11: 14; --12: 9;"&gt;
+			&lt;th scope="row"&gt;2017&lt;/th&gt;
+			&lt;td&gt;8&nbsp;°C&lt;/td&gt;
+			&lt;td&gt;[…]&lt;/td&gt;
+		&lt;/tr&gt;
+	&lt;/tbody&gt;
 &lt;/table&gt;</code></pre>
diff --git a/_site/templates/includes/_pie-markup.njk b/_site/templates/includes/_pie-markup.njk
@@ -1,16 +1,16 @@
 <pre class="scrollable-container"><code class="language-markup">&lt;table class="chaarts pie"&gt;
-  &lt;caption id="caption-5"&gt;[…]&lt;/caption&gt;
-  &lt;thead class="sr-only"&gt;
-    &lt;tr&gt;
-      &lt;th scope="col"&gt;[…]&lt;/th&gt;
-      &lt;th scope="col"&gt;[…]&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr style="--color: var(--chaarts-purple); --term: 'HTML';"&gt;
-      &lt;th scope="row"&gt;HTML&lt;/th&gt;
-      &lt;td style="--value: 2; --start: 0;"&gt;2&nbsp;%&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;[…]&lt;/tr&gt;
-  &lt;/tbody&gt;
+	&lt;caption id="caption-5"&gt;[…]&lt;/caption&gt;
+	&lt;thead class="sr-only"&gt;
+		&lt;tr&gt;
+			&lt;th scope="col"&gt;[…]&lt;/th&gt;
+			&lt;th scope="col"&gt;[…]&lt;/th&gt;
+		&lt;/tr&gt;
+	&lt;/thead&gt;
+	&lt;tbody&gt;
+		&lt;tr style="--color: var(--chaarts-purple); --term: 'HTML';"&gt;
+			&lt;th scope="row"&gt;HTML&lt;/th&gt;
+			&lt;td style="--value: 2; --start: 0;"&gt;2&nbsp;%&lt;/td&gt;
+		&lt;/tr&gt;
+		&lt;tr&gt;[…]&lt;/tr&gt;
+	&lt;/tbody&gt;
 &lt;/table&gt;</code></pre>
diff --git a/_site/templates/includes/_pie-styles:44.njk b/_site/templates/includes/_pie-styles:44.njk
@@ -1,15 +1,15 @@
 <pre class="scrollable-container" data-line="8"><code class="language-css">td[style*="--value: 44;"]::before {
-  clip-path: polygon(
-    50% 50%,
-    50% 0%,
-    100% 0%,
-    100% 50%,
-    100% 100%,
-    95.2413525% 71.2889645%,
-    50% 50%,
-    50% 50%,
-    50% 50%,
-    50% 50%,
-    50% 50%
-  );
+	clip-path: polygon(
+		50% 50%,
+		50% 0%,
+		100% 0%,
+		100% 50%,
+		100% 100%,
+		95.2413525% 71.2889645%,
+		50% 50%,
+		50% 50%,
+		50% 50%,
+		50% 50%,
+		50% 50%
+	);
 }</code></pre>
diff --git a/_site/templates/includes/_pie-styles:64.njk b/_site/templates/includes/_pie-styles:64.njk
@@ -1,15 +1,15 @@
 <pre class="scrollable-container" data-line="10"><code class="language-css">td[style*="--value: 64;"]::before {
-  clip-path: polygon(
-    50% 50%,
-    50% 0%,
-    100% 0%,
-    100% 50%,
-    100% 100%,
-    100% 100%,
-    0% 100%,
-    11.474338% 81.8711995%,
-    50% 50%,
-    50% 50%,
-    50% 50%
-  );
+	clip-path: polygon(
+		50% 50%,
+		50% 0%,
+		100% 0%,
+		100% 50%,
+		100% 100%,
+		100% 100%,
+		0% 100%,
+		11.474338% 81.8711995%,
+		50% 50%,
+		50% 50%,
+		50% 50%
+	);
 }</code></pre>
diff --git a/_site/templates/includes/_pie-styles:88.njk b/_site/templates/includes/_pie-styles:88.njk
@@ -1,15 +1,15 @@
 <pre class="scrollable-container" data-line="12"><code class="language-css">td[style*="--value: 88;"]::before {
-  clip-path: polygon(
-    50% 50%,
-    50% 0%,
-    100% 0%,
-    100% 50%,
-    100% 100%,
-    100% 100%,
-    0% 100%,
-    0% 50%,
-    0% 0%,
-    15.7726445% 13.5515685%,
-    50% 50%
-  );
+	clip-path: polygon(
+		50% 50%,
+		50% 0%,
+		100% 0%,
+		100% 50%,
+		100% 100%,
+		100% 100%,
+		0% 100%,
+		0% 50%,
+		0% 0%,
+		15.7726445% 13.5515685%,
+		50% 50%
+	);
 }</code></pre>
diff --git a/_site/templates/includes/_radar-markup.njk b/_site/templates/includes/_radar-markup.njk
@@ -1,15 +1,15 @@
 <pre class="scrollable-container"><code class="language-markup">&lt;table class="chaarts radar" id="radar" style="--scale: 20; --step: 5; --items: 7; --1: 14; --2: 11; --3: 13; --4: 16; --5: 10; --6: 12; --7: 4; --8: var(--1);"&gt;
-  &lt;caption id="caption-9"&gt;[…]&lt;/caption&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th scope="col"&gt;[…]&lt;/th&gt;
-      &lt;th scope="col"&gt;[…]&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;span&gt;14&lt;/span&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;span&gt;11&lt;/span&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
+	&lt;caption id="caption-9"&gt;[…]&lt;/caption&gt;
+	&lt;thead&gt;
+		&lt;tr&gt;
+			&lt;th scope="col"&gt;[…]&lt;/th&gt;
+			&lt;th scope="col"&gt;[…]&lt;/th&gt;
+		&lt;/tr&gt;
+	&lt;/thead&gt;
+	&lt;tbody&gt;
+		&lt;tr&gt;
+			&lt;td&gt;&lt;span&gt;14&lt;/span&gt;&lt;/td&gt;
+			&lt;td&gt;&lt;span&gt;11&lt;/span&gt;&lt;/td&gt;
+		&lt;/tr&gt;
+	&lt;/tbody&gt;
 &lt;/table&gt;</code></pre>
diff --git a/_site/templates/includes/_radars-markup.njk b/_site/templates/includes/_radars-markup.njk
@@ -1,19 +1,19 @@
 <pre class="scrollable-container"><code class="language-markup">&lt;table class="chaarts radar-multiple" id="radar-multiple" style="--scale: 20; --step: 5; --items: 7; --areas: 2;"&gt;
-  &lt;caption id="caption-9"&gt;[…]&lt;/caption&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th scope="col"&gt;[…]&lt;/th&gt;
-      &lt;th scope="col"&gt;[…]&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr style="--color: var(--chaarts-purple); --1: 14; --2: 11; --3: 13; --4: 16; --5: 14; --6: 10; --7: 4; --8: var(--1);"&gt;
-      &lt;th scope="row"&gt;Gaël&lt;/th&gt;
-      &lt;td&gt;&lt;span&gt;14&lt;/span&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr style="-color: var(--chaarts-pink); --1: 18; --2: 10; --3: 11; --4: 16; --5: 10; --6: 12; --7: 11; --8: var(--1);"&gt;
-      &lt;th scope="row"&gt;Luc&lt;/th&gt;
-      &lt;td&gt;&lt;span&gt;18&lt;/span&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
+	&lt;caption id="caption-9"&gt;[…]&lt;/caption&gt;
+	&lt;thead&gt;
+		&lt;tr&gt;
+			&lt;th scope="col"&gt;[…]&lt;/th&gt;
+			&lt;th scope="col"&gt;[…]&lt;/th&gt;
+		&lt;/tr&gt;
+	&lt;/thead&gt;
+	&lt;tbody&gt;
+		&lt;tr style="--color: var(--chaarts-purple); --1: 14; --2: 11; --3: 13; --4: 16; --5: 14; --6: 10; --7: 4; --8: var(--1);"&gt;
+			&lt;th scope="row"&gt;Gaël&lt;/th&gt;
+			&lt;td&gt;&lt;span&gt;14&lt;/span&gt;&lt;/td&gt;
+		&lt;/tr&gt;
+		&lt;tr style="-color: var(--chaarts-pink); --1: 18; --2: 10; --3: 11; --4: 16; --5: 10; --6: 12; --7: 11; --8: var(--1);"&gt;
+			&lt;th scope="row"&gt;Luc&lt;/th&gt;
+			&lt;td&gt;&lt;span&gt;18&lt;/span&gt;&lt;/td&gt;
+		&lt;/tr&gt;
+	&lt;/tbody&gt;
 &lt;/table&gt;</code></pre>