Missouri State University Pattern Library

Complex

Tables are reserved strictly for displaying tabular data. Layout grids are available and should be used for structuring pages.

Review this step-by-step guide for making accessible tables

  • Handle: @tables-complex
  • Preview:
  • Filesystem Path: src/components/03-page-elements-and-patterns/content-structure/tables/complex.hbs 
<table>
    <caption>Lorem ipsum dolor sit amet</caption>
    <thead>
        <tr>
            <th colspan="2" rowspan="2">Lorem ipsum dolor</th>
            <th colspan="5">Lorem ipsum dolor</th>

        </tr>
        <tr>
            <th colspan="2">Lorem ipsum dolor</th>
            <th colspan="2">Lorem ipsum dolor</th>
        </tr>
        <tr>
            <th>Lorem ipsum dolor</th>
            <th>Sit amet</th>
            <th>Consectetur adipiscing</th>
            <th>Consectetur adipiscing</th>
            <th>Consectetur adipiscing</th>
            <th>Consectetur adipiscing</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Lorem ipsum dolor sit amet</th>
            <td>12345</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
        </tr>
        <tr>
            <th>Lorem ipsum dolor sit amet</th>
            <td>12345</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
        </tr>
        <tr>
            <th>Lorem ipsum dolor sit amet</th>
            <td>12345</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <th>Lorem ipsum dolor sit amet</th>
            <td>12345</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
        </tr>
        <tr>
            <th>Lorem ipsum dolor sit amet</th>
            <td>12345</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
        </tr>
        <tr>
            <th>Lorem ipsum dolor sit amet</th>
            <td>12345</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <th>Lorem ipsum dolor sit amet</th>
            <td>12345</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
        </tr>
        <tr>
            <th>Lorem ipsum dolor sit amet</th>
            <td>12345</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
        </tr>
        <tr>
            <th>Lorem ipsum dolor sit amet</th>
            <td>12345</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Lorem ipsum dolor</th>
            <td>Sit amet</td>
            <td>Consectetur adipiscing</td>
            <td>Consectetur adipiscing</td>
            <td>Consectetur adipiscing</td>
            <td>Consectetur adipiscing</td>
        </tr>
    </tfoot>
</table>
 
<table>
    <caption>Lorem ipsum dolor sit amet</caption>
    <thead>
        <tr>
            <th colspan="2" rowspan="2">Lorem ipsum dolor</th>
            <th colspan="5">Lorem ipsum dolor</th>

        </tr>
        <tr>
            <th colspan="2">Lorem ipsum dolor</th>
            <th colspan="2">Lorem ipsum dolor</th>
        </tr>
        <tr>
            <th>Lorem ipsum dolor</th>
            <th>Sit amet</th>
            <th>Consectetur adipiscing</th>
            <th>Consectetur adipiscing</th>
            <th>Consectetur adipiscing</th>
            <th>Consectetur adipiscing</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Lorem ipsum dolor sit amet</th>
            <td>12345</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
        </tr>
        <tr>
            <th>Lorem ipsum dolor sit amet</th>
            <td>12345</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
        </tr>
        <tr>
            <th>Lorem ipsum dolor sit amet</th>
            <td>12345</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <th>Lorem ipsum dolor sit amet</th>
            <td>12345</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
        </tr>
        <tr>
            <th>Lorem ipsum dolor sit amet</th>
            <td>12345</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
        </tr>
        <tr>
            <th>Lorem ipsum dolor sit amet</th>
            <td>12345</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <th>Lorem ipsum dolor sit amet</th>
            <td>12345</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
        </tr>
        <tr>
            <th>Lorem ipsum dolor sit amet</th>
            <td>12345</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
        </tr>
        <tr>
            <th>Lorem ipsum dolor sit amet</th>
            <td>12345</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere molestie tempor. In hac habitasse platea dictumst. Sed laoreet nibh sed.</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Lorem ipsum dolor</th>
            <td>Sit amet</td>
            <td>Consectetur adipiscing</td>
            <td>Consectetur adipiscing</td>
            <td>Consectetur adipiscing</td>
            <td>Consectetur adipiscing</td>
        </tr>
    </tfoot>
</table>
 
/* No context defined. */