This is the table caption
Title Number Responsible office
Advanced policy with ultra-long title ACA-00 University Faculty Council
Accepting Electronic Payments
  1. Step 1
  2. Step 2
  3. Step 3
Accrual Accounting

This is a paragraph.

  • Firstname Lastname, MA’03
  • First Lastname, BS’03
  • Firstname Last, BS’76, DDS’80
This is a table
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
Show/hide markup
<!-- 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>
    <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 role="row">
            <td data-label="Title" role="cell"><a href="#">Accepting Electronic Payments</a></td>
            <td data-label="Number" role="cell">
                    <li>Step 1</li>
                    <li>Step 2</li>
                    <li>Step 3</li>
            <td data-label="Responsible Office" role="cell">Treasury<br> Operations</td>
        <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 data-label="Responsible Office" role="cell">
                    <li>Firstname Lastname, MA’03</li>
                    <li>First Lastname, BS’03</li>
                    <li><span>Firstname Last, BS’76, DDS’80</span></li>

<table class="mobile-labels">
    <caption>This is a table</caption>
        <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 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 data-label="Column 3" role="cell">Another cell</td>
        <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>

Apply IU style to any site

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 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.