208 lines
26 KiB
JavaScript
208 lines
26 KiB
JavaScript
module.exports = {
|
|
id: 'tables',
|
|
title: 'Tables',
|
|
keywords: [`table`, `caption`, `thead`, `tbody`, `tr`, `th`, `td`, `horizontal`, `striped`, `hoverable`],
|
|
description: `<p>Tables are styled in a minimal, modern and responsive manner, allowing users on all devices to easily browse tabular data, taking advantage of the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank">Flexbox layout</a>'s capabilities. To make tabular data properly display on mobile devices, remember to specify a <code>data-label</code> attribute for each <code><></code> element (usually same as the heading of the column).</p>`,
|
|
example: `<h6 style="text-align:center">Desktop view</h6>
|
|
<table class="doc"><caption class="doc">People</caption>
|
|
<thead class="doc"><tr class="doc"><th class="doc">Name</th><th class="doc">Surname</th><th class="doc">Alias</th></tr></thead>
|
|
<tbody class="doc">
|
|
<tr class="doc"><td data-label="Name" class="doc">Chad</td><td data-label="Surname" class="doc">Wilberts</td><td data-label="Alias" class="doc">MrOne</td></tr>
|
|
<tr class="doc"><td data-label="Name" class="doc">Adam</td><td data-label="Surname" class="doc">Smith</td><td data-label="Alias" class="doc">TheSmith</td></tr>
|
|
<tr class="doc"><td data-label="Name" class="doc">Sophia</td><td data-label="Surname" class="doc">Canderson</td><td data-label="Alias" class="doc">Candee</td></tr>
|
|
<tr class="doc"><td data-label="Name" class="doc">Nick</td><td data-label="Surname" class="doc">Thomson</td><td data-label="Alias" class="doc">NickThom</td></tr>
|
|
<tr class="doc"><td data-label="Name" class="doc">Mark</td><td data-label="Surname" class="doc">Gerkis</td><td data-label="Alias" class="doc">Markie</td></tr>
|
|
<tr class="doc"><td data-label="Name" class="doc">John</td><td data-label="Surname" class="doc">Fergusson</td><td data-label="Alias" class="doc">Fergujohn</td></tr>
|
|
<tr class="doc"><td data-label="Name" class="doc">Sylvia</td><td data-label="Surname" class="doc">Pouleau</td><td data-label="Alias" class="doc">Sylver</td></tr>
|
|
<tr class="doc"><td data-label="Name" class="doc">Norman</td><td data-label="Surname" class="doc">Jones</td><td data-label="Alias" class="doc">NormalJones</td></tr>
|
|
<tr class="doc"><td data-label="Name" class="doc">Trevor</td><td data-label="Surname" class="doc">Heidel</td><td data-label="Alias" class="doc">Heidi</td></tr>
|
|
</tbody>
|
|
</table><br/><h6 style="text-align:center">Mobile view</h6>
|
|
<table class="doc cardized"><caption class="doc">People</caption>
|
|
<thead class="doc"><tr class="doc"><th class="doc">Name</th><th class="doc">Surname</th><th class="doc">Alias</th></tr></thead>
|
|
<tbody class="doc">
|
|
<tr class="doc"><td data-label="Name" class="doc">Chad</td><td data-label="Surname" class="doc">Wilberts</td><td data-label="Alias" class="doc">MrOne</td></tr>
|
|
<tr class="doc"><td data-label="Name" class="doc">Adam</td><td data-label="Surname" class="doc">Smith</td><td data-label="Alias" class="doc">TheSmith</td></tr>
|
|
<tr class="doc"><td data-label="Name" class="doc">Sophia</td><td data-label="Surname" class="doc">Canderson</td><td data-label="Alias" class="doc">Candee</td></tr>
|
|
</tbody>
|
|
</table>`,
|
|
samples: [`<pre><span class="code-line"><span class="highlight-a"><table></span></span>
|
|
<span class="code-line"><span class="highlight-a"> <caption></span>People<span class="highlight-a"></caption></span></span>
|
|
<span class="code-line"><span class="highlight-a"> <thead></span></span>
|
|
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><th></span>Name<span class="highlight-a"></th></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><th></span>Surname<span class="highlight-a"></th></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><th></span>Alias<span class="highlight-a"></th></span></span>
|
|
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
|
<span class="code-line"><span class="highlight-a"> </thead></span></span>
|
|
<span class="code-line"><span class="highlight-a"> <tbody></span></span>
|
|
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Chad<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Wilberts<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>MrOne<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
|
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Adam<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Smith<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>TheSmith<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
|
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Sophia<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Canderson<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>Candee<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
|
<span class="code-line"><span class="highlight-a"> </tbody></span></span>
|
|
<span class="code-line"><span class="highlight-a"></table></span></span></pre>`],
|
|
notes: [`Remember to always specify a <code>data-label</code> attribute for all of your <code><td></code> elements, otherwise they will not display properly on mobile.`,
|
|
`Due to the way tables are displayed, the <code><tfoot></code> element is not supported.`,
|
|
`Tables are vertically scrollable by default, with a <code>max-height</code> property of <code>400px</code>.`],
|
|
customization: [
|
|
`Text color for <code><th></code> and <code><td></code> elements can be changed by changing the values of the <code>--table-head-fore-color</code> and <code>--table-body-fore-color</code> variables respectively.`,
|
|
`Background color for <code><th></code> and <code><td></code> elements can be changed by changing the values of the <code>--table-head-back-color</code> and <code>--table-body-back-color</code> variables respectively.`,
|
|
`Border color for tables can be changed by changing the value of the <code>--table-border-color</code> variable.`,
|
|
`Border color for the separator between a table's heading and a table's body can be changed by changing the value of the <code>--table-border-separator-color</code> variable.`,
|
|
`Alternative background color for <code><td></code> elements in striped tables can be changed by changing the value of the <code>--table-body-alt-back-color</code> variable.`,
|
|
`Hover background color for <code><tr></code> elements in hoverable tables can be changed by changing the value of the <code>--table-body-hover-back-color</code> variable.`,
|
|
`Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.`,
|
|
`Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.`,
|
|
`Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.`
|
|
],
|
|
modifiers: [
|
|
{
|
|
title : 'Horizontal tables',
|
|
description: `<p>You can create horizontal tables (<code>.horizontal</code>), by applying the appropriate class.</p>`,
|
|
example: `<table class="doc horizontal"><caption class="doc">People</caption>
|
|
<thead class="doc"><tr class="doc"><th class="doc">Name</th><th class="doc">Surname</th><th class="doc">Alias</th></tr></thead>
|
|
<tbody class="doc">
|
|
<tr class="doc"><td data-label="Name" class="doc">Chad</td><td data-label="Surname" class="doc">Wilberts</td><td data-label="Alias" class="doc">MrOne</td></tr>
|
|
<tr class="doc"><td data-label="Name" class="doc">Adam</td><td data-label="Surname" class="doc">Smith</td><td data-label="Alias" class="doc">TheSmith</td></tr>
|
|
<tr class="doc"><td data-label="Name" class="doc">Sophia</td><td data-label="Surname" class="doc">Canderson</td><td data-label="Alias" class="doc">Candee</td></tr>
|
|
</tbody>
|
|
</table>`,
|
|
samples: [`<pre><span class="code-line"><span class="highlight-a"><table</span> <span class="highlight-b">class</span>=<span class="highlight-c">"horizontal"</span><span class="highlight-a">></span></span>
|
|
<span class="code-line"><span class="highlight-a"> <caption></span>People<span class="highlight-a"></caption></span></span>
|
|
<span class="code-line"><span class="highlight-a"> <thead></span></span>
|
|
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><th></span>Name<span class="highlight-a"></th></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><th></span>Surname<span class="highlight-a"></th></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><th></span>Alias<span class="highlight-a"></th></span></span>
|
|
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
|
<span class="code-line"><span class="highlight-a"> </thead></span></span>
|
|
<span class="code-line"><span class="highlight-a"> <tbody></span></span>
|
|
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Chad<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Wilberts<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>MrOne<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
|
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Adam<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Smith<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>TheSmith<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
|
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Sophia<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Canderson<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>Candee<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
|
<span class="code-line"><span class="highlight-a"> </tbody></span></span>
|
|
<span class="code-line"><span class="highlight-a"></table></span></span></pre>`]
|
|
},
|
|
{
|
|
title : 'Striped tables',
|
|
description: `<p>You can create striped tables (<code>.striped</code>), by applying the appropriate class.</p>`,
|
|
example: `<table class="doc striped"><caption class="doc">People</caption>
|
|
<thead class="doc"><tr class="doc"><th class="doc">Name</th><th class="doc">Surname</th><th class="doc">Alias</th></tr></thead>
|
|
<tbody class="doc">
|
|
<tr class="doc"><td data-label="Name" class="doc">Chad</td><td data-label="Surname" class="doc">Wilberts</td><td data-label="Alias" class="doc">MrOne</td></tr>
|
|
<tr class="doc"><td data-label="Name" class="doc">Adam</td><td data-label="Surname" class="doc">Smith</td><td data-label="Alias" class="doc">TheSmith</td></tr>
|
|
<tr class="doc"><td data-label="Name" class="doc">Sophia</td><td data-label="Surname" class="doc">Canderson</td><td data-label="Alias" class="doc">Candee</td></tr>
|
|
</tbody>
|
|
</table>`,
|
|
samples: [`<pre><span class="code-line"><span class="highlight-a"><table</span> <span class="highlight-b">class</span>=<span class="highlight-c">"striped"</span><span class="highlight-a">></span></span>
|
|
<span class="code-line"><span class="highlight-a"> <caption></span>People<span class="highlight-a"></caption></span></span>
|
|
<span class="code-line"><span class="highlight-a"> <thead></span></span>
|
|
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><th></span>Name<span class="highlight-a"></th></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><th></span>Surname<span class="highlight-a"></th></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><th></span>Alias<span class="highlight-a"></th></span></span>
|
|
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
|
<span class="code-line"><span class="highlight-a"> </thead></span></span>
|
|
<span class="code-line"><span class="highlight-a"> <tbody></span></span>
|
|
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Chad<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Wilberts<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>MrOne<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
|
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Adam<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Smith<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>TheSmith<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
|
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Sophia<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Canderson<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>Candee<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
|
<span class="code-line"><span class="highlight-a"> </tbody></span></span>
|
|
<span class="code-line"><span class="highlight-a"></table></span></span></pre>`]
|
|
},
|
|
{
|
|
title : 'Hoverable tables',
|
|
description: `<p>You can create hoverable tables (<code>.hoverable</code>), by applying the appropriate class.</p>`,
|
|
example: `<table class="doc hoverable"><caption class="doc">People</caption>
|
|
<thead class="doc"><tr class="doc"><th class="doc">Name</th><th class="doc">Surname</th><th class="doc">Alias</th></tr></thead>
|
|
<tbody class="doc">
|
|
<tr class="doc"><td data-label="Name" class="doc">Chad</td><td data-label="Surname" class="doc">Wilberts</td><td data-label="Alias" class="doc">MrOne</td></tr>
|
|
<tr class="doc"><td data-label="Name" class="doc">Adam</td><td data-label="Surname" class="doc">Smith</td><td data-label="Alias" class="doc">TheSmith</td></tr>
|
|
<tr class="doc"><td data-label="Name" class="doc">Sophia</td><td data-label="Surname" class="doc">Canderson</td><td data-label="Alias" class="doc">Candee</td></tr>
|
|
</tbody>
|
|
</table>`,
|
|
samples: [`<pre><span class="code-line"><span class="highlight-a"><table</span> <span class="highlight-b">class</span>=<span class="highlight-c">"hoverable"</span><span class="highlight-a">></span></span>
|
|
<span class="code-line"><span class="highlight-a"> <caption></span>People<span class="highlight-a"></caption></span></span>
|
|
<span class="code-line"><span class="highlight-a"> <thead></span></span>
|
|
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><th></span>Name<span class="highlight-a"></th></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><th></span>Surname<span class="highlight-a"></th></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><th></span>Alias<span class="highlight-a"></th></span></span>
|
|
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
|
<span class="code-line"><span class="highlight-a"> </thead></span></span>
|
|
<span class="code-line"><span class="highlight-a"> <tbody></span></span>
|
|
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Chad<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Wilberts<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>MrOne<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
|
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Adam<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Smith<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>TheSmith<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
|
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Name"</span><span class="highlight-a">></span>Sophia<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Surname"</span><span class="highlight-a">></span>Canderson<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Alias"</span><span class="highlight-a">></span>Candee<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
|
<span class="code-line"><span class="highlight-a"> </tbody></span></span>
|
|
<span class="code-line"><span class="highlight-a"></table></span></span></pre>`]
|
|
}
|
|
],
|
|
dos: [],
|
|
donts: [
|
|
{
|
|
description: `Avoid placing <code><td></code> elements in the <code><thead></code> of your tables, as well as placing <code><th></code> elements in the <code><tbody></code>.`,
|
|
sample: `<pre><span class="code-line"><span class="highlight-a"><table></span></span>
|
|
<span class="code-line"><span class="highlight-a"> <caption></span>People<span class="highlight-a"></caption></span></span>
|
|
<span class="code-line"><span class="highlight-a"> <thead></span></span>
|
|
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><td></span>Bad idea<span class="highlight-a"></td></span></span>
|
|
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
|
<span class="code-line"><span class="highlight-a"> </thead></span></span>
|
|
<span class="code-line"><span class="highlight-a"> <tbody></span></span>
|
|
<span class="code-line"><span class="highlight-a"> <tr></span></span>
|
|
<span class="code-line"> <span class="highlight-a"><th</span> <span class="highlight-b">data-label</span>=<span class="highlight-c">"Bad"</span><span class="highlight-a">></span>Also bad idea<span class="highlight-a"></th></span></span>
|
|
<span class="code-line"><span class="highlight-a"> </tr></span></span>
|
|
<span class="code-line"><span class="highlight-a"> </tbody></span></span>
|
|
<span class="code-line"><span class="highlight-a"></table></span></span></pre>`
|
|
}
|
|
]
|
|
}
|