Skip to content

Add in more classes (tables, lists) #397

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SteveLLamb merged 1 commit into from
Mar 19, 2026
Merged

Add in more classes (tables, lists) #397

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
125 changes: 68 additions & 57 deletions css/smpte.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -293,78 +293,79 @@ tbody {
text-align: left;
}

td.center-cell {
text-align: center;
}

table.col-1-center tr td:nth-child(1) {
text-align: center;
}

table.col-2-center tr td:nth-child(2) {
text-align: center;
}
/* cell alignment utilities */

table.col-3-center tr td:nth-child(3) {
text-align: center;
}
td.center-cell { text-align: center; }
td.right-cell { text-align: right; }
td.left-cell { text-align: left; }
td.top-cell { vertical-align: top; }

table.col-4-center tr td:nth-child(4) {
text-align: center;
}
/* column alignment utilities */

table.col-5-center tr td:nth-child(5) {
text-align: center;
}
/* center */

table.col-6-center tr td:nth-child(6) {
text-align: center;
}

table.col-7-center tr td:nth-child(7) {
text-align: center;
}

table.col-8-center tr td:nth-child(8) {
text-align: center;
}

/* column nowrap utilities */
table.col-1-center tr td:nth-child(1), table.col-2-center tr td:nth-child(2),
table.col-3-center tr td:nth-child(3), table.col-4-center tr td:nth-child(4),
table.col-5-center tr td:nth-child(5), table.col-6-center tr td:nth-child(6),
table.col-7-center tr td:nth-child(7), table.col-8-center tr td:nth-child(8) {
text-align: center;
}

table.col-1-nowrap tr td:nth-child(1), table.col-1-nowrap tr th:nth-child(1) {
white-space: nowrap;
}
/* right */

table.col-2-nowrap tr td:nth-child(2), table.col-2-nowrap tr th:nth-child(2) {
white-space: nowrap;
}
table.col-1-right tr td:nth-child(1), table.col-2-right tr td:nth-child(2),
table.col-3-right tr td:nth-child(3), table.col-4-right tr td:nth-child(4),
table.col-5-right tr td:nth-child(5), table.col-6-right tr td:nth-child(6),
table.col-7-right tr td:nth-child(7), table.col-8-right tr td:nth-child(8) {
text-align: right;
}

table.col-3-nowrap tr td:nth-child(3), table.col-3-nowrap tr th:nth-child(3) {
white-space: nowrap;
}
/* left */

table.col-4-nowrap tr td:nth-child(4), table.col-4-nowrap tr th:nth-child(4) {
white-space: nowrap;
}
table.col-1-left tr td:nth-child(1), table.col-2-left tr td:nth-child(2),
table.col-3-left tr td:nth-child(3), table.col-4-left tr td:nth-child(4),
table.col-5-left tr td:nth-child(5), table.col-6-left tr td:nth-child(6),
table.col-7-left tr td:nth-child(7), table.col-8-left tr td:nth-child(8) {
text-align: left;
}

table.col-5-nowrap tr td:nth-child(5), table.col-5-nowrap tr th:nth-child(5) {
white-space: nowrap;
}
/* top */

table.col-6-nowrap tr td:nth-child(6), table.col-6-nowrap tr th:nth-child(6) {
white-space: nowrap;
}
table.col-1-top tr td:nth-child(1), table.col-2-top tr td:nth-child(2),
table.col-3-top tr td:nth-child(3), table.col-4-top tr td:nth-child(4),
table.col-5-top tr td:nth-child(5), table.col-6-top tr td:nth-child(6),
table.col-7-top tr td:nth-child(7), table.col-8-top tr td:nth-child(8) {
vertical-align: top;
}

table.col-7-nowrap tr td:nth-child(7), table.col-7-nowrap tr th:nth-child(7) {
white-space: nowrap;
}
/* column nowrap utilities */

table.col-8-nowrap tr td:nth-child(8), table.col-8-nowrap tr th:nth-child(8) {
white-space: nowrap;
}
table.col-1-nowrap tr td:nth-child(1), table.col-1-nowrap tr th:nth-child(1),
table.col-2-nowrap tr td:nth-child(2), table.col-2-nowrap tr th:nth-child(2),
table.col-3-nowrap tr td:nth-child(3), table.col-3-nowrap tr th:nth-child(3),
table.col-4-nowrap tr td:nth-child(4), table.col-4-nowrap tr th:nth-child(4),
table.col-5-nowrap tr td:nth-child(5), table.col-5-nowrap tr th:nth-child(5),
table.col-6-nowrap tr td:nth-child(6), table.col-6-nowrap tr th:nth-child(6),
table.col-7-nowrap tr td:nth-child(7), table.col-7-nowrap tr th:nth-child(7),
table.col-8-nowrap tr td:nth-child(8), table.col-8-nowrap tr th:nth-child(8) {
white-space: nowrap;
}

/* column width utilities */

/* xsmall */

table.col-1-xsmall tr td:nth-child(1), table.col-1-xsmall tr th:nth-child(1),
table.col-2-xsmall tr td:nth-child(2), table.col-2-xsmall tr th:nth-child(2),
table.col-3-xsmall tr td:nth-child(3), table.col-3-xsmall tr th:nth-child(3),
table.col-4-xsmall tr td:nth-child(4), table.col-4-xsmall tr th:nth-child(4),
table.col-5-xsmall tr td:nth-child(5), table.col-5-xsmall tr th:nth-child(5),
table.col-6-xsmall tr td:nth-child(6), table.col-6-xsmall tr th:nth-child(6),
table.col-7-xsmall tr td:nth-child(7), table.col-7-xsmall tr th:nth-child(7),
table.col-8-xsmall tr td:nth-child(8), table.col-8-xsmall tr th:nth-child(8) {
width: 2rem;
}

/* small */

table.col-1-small tr td:nth-child(1), table.col-1-small tr th:nth-child(1),
Expand Down Expand Up @@ -406,6 +407,10 @@ table.col-8-nowrap tr td:nth-child(8), table.col-8-nowrap tr th:nth-child(8) {

/* cell width utilities */

th.col-xsmall, td.col-xsmall {
width: 2rem;
}

th.col-small, td.col-small {
width: 8rem;
}
Expand Down Expand Up @@ -501,6 +506,12 @@ div.formula > .heading-label {
break-before: page;
}

/* list utilities */

ul.list-none {
list-style-type: none;
}

/* text utilities */

.text-nowrap,
Expand Down
91 changes: 64 additions & 27 deletions doc/main.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1360,27 +1360,38 @@ <h4>Using <code>class</code> attributes</h4>
<dt><code>example</code></dt>
<dd>Applied to <code>p</code> or <code>div</code> elements to create a formatted and automatically numbered example. See <a href="#sec-example-class"></a>.</dd>

<dt><code>center-cell</code></dt>
<dd>Applied to a <code>td</code> element to center-align the content of that individual table cell. See <a href="#sec-table-alignment-cell"></a>.</dd>
<dt><code>center-cell</code>;</dt>
<dt><code>right-cell</code>;</dt>
<dt><code>left-cell</code>;</dt>
<dt><code>top-cell</code></dt>
<dd>Applied to a <code>td</code> element to override the alignment of that individual table cell. See <a href="#sec-table-alignment-cell"></a>.</dd>

<dt><code>text-nowrap</code></dt>
<dd>Applied to an element to prevent line wrapping of its contents. This is commonly used on <code>th</code> or <code>td</code> elements to keep short identifiers, tags, or codes on a single line. See <a href="#sec-table-width-nowrap-cell"></a></dd>

<dt><code>col-1-nowrap</code> through <code>col-8-nowrap</code></dt>
<dd>Applied to a <code>table</code> element to prevent line wrapping within the specified column. See <a href="#sec-table-width-nowrap-column"></a></dd>

<dt><code>col-xsmall</code>;</dt>
<dt><code>col-small</code>;</dt>
<dt><code>col-medium</code>;</dt>
<dt><code>col-wide</code></dt>
<dd>Applied to <code>th</code> or <code>td</code> elements to suggest a relative column width for that cell. These classes provide narrow, medium, or wide column layouts without using inline <code>style</code> attributes. See <a href="#sec-table-width-nowrap-cell"></a></dd>
<dd>Applied to <code>th</code> or <code>td</code> elements to suggest a relative column width for that cell. These classes provide extra-narrow, narrow, medium, or wide column layouts without using inline <code>style</code> attributes. See <a href="#sec-table-width-nowrap-cell"></a></dd>

<dt><code>col-1-xsmall</code> through <code>col-8-xsmall</code>;</dt>
<dt><code>col-1-small</code> through <code>col-8-small</code>;</dt>
<dt><code>col-1-medium</code> through <code>col-8-medium</code>;</dt>
<dt><code>col-1-wide</code> through <code>col-8-wide</code></dt>
<dd>Applied to a <code>table</code> element to suggest relative widths for specific columns. See <a href="#sec-table-width-nowrap-column"></a></dd>

<dt><code>col-1-center</code> through <code>col-8-center</code></dt>
<dd>Applied to a <code>table</code> element to center-align the contents of the specified column. Multiple classes may be combined to center multiple columns. See <a href="#sec-table-alignment-column"></a>.</dd>
<dt><code>col-1-center</code> through <code>col-8-center</code>;</dt>
<dt><code>col-1-right</code> through <code>col-8-right</code>;</dt>
<dt><code>col-1-left</code> through <code>col-8-left</code>;</dt>
<dt><code>col-1-top</code> through <code>col-8-top</code></dt>
<dd>Applied to a <code>table</code> element to override the alignment of the specified column. Multiple classes may be combined to align multiple columns. See <a href="#sec-table-alignment-column"></a>.</dd>

<dt><code>list-none</code></dt>
<dd>Applied to a <code>ul</code> element to remove bullet markers. See <a href="#sec-list-none"></a>.</dd>

<dt><code>formula</code></dt>
<dd>Applied to a <code>div</code> element that contains a block <code>math</code> element to format and number displayed formulae. See <a href="#sec-formulae"></a></dd>
Expand Down Expand Up @@ -1724,43 +1735,43 @@ <h4>Default Alignment</h4>
<h4>Column Alignment</h4>

<p>
To change the alignment of an entire column, a class such as <code>col-3-center</code> may be added to the <code>table</code> denoting which column to center align, as the below example shows.
To change the alignment of an entire column, classes such as <code>col-3-center</code>, <code>col-3-right</code>, <code>col-3-left</code>, or <code>col-3-top</code> may be added to the <code>table</code> element. Multiple alignment classes may be combined across different columns, and multiple classes targeting the same column are also allowed since horizontal (<code>text-align</code>) and vertical (<code>vertical-align</code>) alignment are independent properties, as the below example shows.
</p>

<pre data-include="snippets/tab-sample-tabledata-colcenter.txt"></pre>

<p>is rendered as</p>

<table id="tab-sample-tabledata-colcenter" class="col-3-center">
<caption><code>col-x-center</code> Table Sample</caption>
<table id="tab-sample-tabledata-colcenter" class="col-1-top col-2-top col-2-right col-3-top col-3-center">
<caption><code>col-1-top col-2-top col-2-right col-3-top col-3-center</code> Table Sample</caption>
<thead>
<tr>
<th>Sample Number</th>
<th>Sample Name</th>
<th>Value</th>
<th>Sample Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>0001</td>
<td>Name 01</td>
<td>42</td>
<td><code>Code 1</code></td>
</tr>
<tr>
<td>0002</td>
<td>Name 02</td>
<td>This is a longer description that spans multiple lines to demonstrate how <code>col-2-top</code> and <code>col-2-right</code> may be combined on the same column to independently control vertical and horizontal alignment.</td>
<td><code>Code 2</code></td>
</tr>
<tr>
<td>0003</td>
<td>Name 03</td>
<td>8</td>
<td><code>Code 3</code></td>
</tr>
</tbody>
</table>

<p class="note">
Classes are available to center align columns 1-8 (as <code>col-x-center</code>), and multiple classes to <code>table</code> may be added to align more columns as needed.
Alignment classes are available for columns 1–8 using <code>col-x-center</code>, <code>col-x-right</code>, <code>col-x-left</code>, and <code>col-x-top</code>. Multiple classes may be combined on the same <code>table</code> to align different columns independently.
</p>
<p class="note">
Tables over 8 columns wide should not be used and instead split into multiple smaller tables.
Expand All @@ -1771,15 +1782,15 @@ <h4>Column Alignment</h4>
<h4>Cell Alignment</h4>

<p>
To change the alignment of an individual cell, the class <code>center-cell</code> may be added to each <code>td</code> as needed, as the below example shows.
To change the alignment of an individual cell, classes such as <code>center-cell</code>, <code>right-cell</code>, <code>left-cell</code>, or <code>top-cell</code> may be added to each <code>td</code> as needed, as the below example shows.
</p>

<pre data-include="snippets/tab-sample-tabledata-centercell.txt"></pre>

<p>is rendered as</p>

<table id="tab-sample-tabledata-centercell">
<caption><code>center-cell</code> Table Sample</caption>
<caption>Cell Alignment Table Sample</caption>
<thead>
<tr>
<th>Sample Number</th>
Expand All @@ -1789,29 +1800,30 @@ <h4>Cell Alignment</h4>
</thead>
<tbody>
<tr>
<td>0001</td>
<td class="right-cell">0001</td>
<td>Name 01</td>
<td><code>Code 1</code></td>
</tr>
<tr>
<td class="center-cell">centered 0002</td>
<td class="center-cell">0002</td>
<td>Name 02</td>
<td><code>Code 2</code></td>
</tr>
<tr>
<td>0003</td>
<td class="top-cell">0003</td>
<td>Name 03</td>
<td><code>Code 3</code></td>
</tr>
<tr>
<td class="top-cell">0004</td>
<td class="top-cell">Name 04</td>
<td>This is a longer description that spans multiple lines to demonstrate how the <code>top-cell</code> class aligns the content of the first two cells to the top of the row rather than the default middle alignment when adjacent cells contain more content.</td>
</tr>
</tbody>
</table>

<p class="note">
The <code>center-cell</code> class may be added to as many <code>td</code> as needed.
</p>

<p>
Vertical cell alignment is not available at this time, and the default is set to top.
Cell alignment classes may be added to as many <code>td</code> elements as needed and may be combined with column-level alignment classes.
</p>
</section>
</section>
Expand Down Expand Up @@ -2097,7 +2109,7 @@ <h3>Column Width and No-wrap (Column-level)</h3>

<div class="example">
<pre>
&lt;table id="tab-sample-tabledata-widthcolumn" class="col-3-nowrap col-1-small col-4-wide"&gt;
&lt;table id="tab-sample-tabledata-widthcolumn" class="col-3-nowrap col-1-xsmall col-4-wide"&gt;
&lt;caption&gt;Column-level Width and No-wrap Table Sample&lt;/caption&gt;
&lt;thead&gt;
&lt;tr&gt;
Expand Down Expand Up @@ -2126,7 +2138,7 @@ <h3>Column Width and No-wrap (Column-level)</h3>

<p>is rendered as</p>

<table id="tab-sample-tabledata-widthcolumn" class="col-3-nowrap col-1-small col-4-wide">
<table id="tab-sample-tabledata-widthcolumn" class="col-3-nowrap col-1-xsmall col-4-wide">
<caption>Column-level Width and No-wrap Table Sample</caption>
<thead>
<tr>
Expand Down Expand Up @@ -2416,6 +2428,31 @@ <h3>Complex List Example</h3>
</div>

</section>

<section id="sec-list-none">
<h3>Unordered List Without Bullets</h3>

<p>
To remove bullet markers from an unordered list, the class <code>list-none</code> may be applied to the <code>ul</code> element, as the below example shows.
</p>

<div class="example">
<pre>
&lt;ul class="list-none"&gt;
&lt;li&gt;First list item&lt;/li&gt;
&lt;li&gt;Second list item&lt;/li&gt;
&lt;li&gt;Third list item&lt;/li&gt;
&lt;/ul&gt;</pre>

<p>is rendered as:</p>
<ul class="list-none">
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
</ul>
</div>
</section>

</section>
<section class="annex" id="sec-document-status-workflow">
<h2>Document Status Workflow</h2>
Expand Down
Loading
Loading