Sometimes a table is the most effective way to display content in an easily understandable manner. While we don't advise using tables to manipulate the look of a page, we do advocate using them for data.
Use the table chunk to create a table that is automatically formatted for accessibility. You can use text (regular, bold, or italicized), links, lists, and paragraphs or break tags in a table.
| Title | Number | Responsible office |
|---|---|---|
| Advanced policy with ultra-long title | ACA-00 | University Faculty Council |
| Accepting Electronic Payments |
|
Treasury Operations |
| Accrual Accounting |
This is a paragraph. |
|
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| This is the first row |
Text with an inline link? |
Another cell |
| Row 2 | Column 1 text | Column 2 text |
<!-- make sure to add the class mobile-labels -->
<table class="mobile-labels" role="grid" aria-labelledby="table-1">
<caption id="table-1">This is the table caption</caption>
<thead role="rowgroup">
<tr role="row">
<th scope="col" role="columnheader">Title</th>
<th scope="col" role="columnheader">Number</th>
<th scope="col" role="columnheader">Responsible office</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row">
<!-- each td should have a data-label to match the th -->
<td data-label="Title" role="cell"><strong>Advanced</strong> policy with ultra-long <em>title</em></td>
<td data-label="Number" role="cell">ACA-00</td>
<td data-label="Responsible Office" role="cell">University Faculty Council</td>
</tr>
<tr role="row">
<td data-label="Title" role="cell"><a href="#">Accepting Electronic Payments</a></td>
<td data-label="Number" role="cell">
<ol>
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ol>
</td>
<td data-label="Responsible Office" role="cell">Treasury<br> Operations</td>
</tr>
<tr role="row">
<td data-label="Title" role="cell"><a href="#">Accrual Accounting</a></td>
<td data-label="Number" role="cell">
<p>This is a paragraph.</p>
</td>
<td data-label="Responsible Office" role="cell">
<ul>
<li>Firstname Lastname, MA’03</li>
<li>First Lastname, BS’03</li>
<li><span>Firstname Last, BS’76, DDS’80</span></li>
</ul>
</td>
</tr>
</tbody>
</table>
<table class="mobile-labels">
<caption>This is a table</caption>
<thead>
<tr role="row">
<th scope="col" role="columnheader">Column 1</th>
<th scope="col" role="columnheader">Column 2</th>
<th scope="col" role="columnheader">Column 3</th>
</tr>
</thead>
<tbody>
<tr role="row">
<td data-label="Column 1" role="cell">This is the first row</td>
<td data-label="Column 2" role="cell">
<p>Text with an <a href="#">inline link</a>?</p>
</td>
<td data-label="Column 3" role="cell">Another cell</td>
</tr>
<tr role="row">
<td data-label="Column 1" role="cell">Row 2</td>
<td data-label="Column 2" role="cell">Column 1 text</td>
<td data-label="Column 3" role="cell">Column 2 text</td>
</tr>
</tbody>
</table>You can use our style and code snippets to improve any website in any content management system. Or you can request a copy of the IU Web Framework, a self-service tool that lets developers build a site in the WCMS.
If you would like to learn more about how we can help you build your website in the Web Framework, contact our Creative & Web Studio.