Missouri State University Pattern Library

Basic

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-basic
  • Preview:
  • Filesystem Path: src/components/03-page-elements-and-patterns/content-structure/tables/basic.hbs 
<table>
    <caption>Lorem ipsum dolor sit amet</caption>
    <thead>
        <tr>
            <th>Lorem ipsum dolor</th>
            <th>Sit amet</th>
            <th>Consectetur adipiscing</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Lorem ipsum dolor sit amet</td>
            <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>
        </tr>
        <tr>
            <td>Lorem ipsum dolor sit amet</td>
            <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>
        </tr>
        <tr>
            <td>Lorem ipsum dolor sit amet</td>
            <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>
        </tr>
    </tbody>
</table>
 
<table>
    <caption>Lorem ipsum dolor sit amet</caption>
    <thead>
        <tr>
            <th>Lorem ipsum dolor</th>
            <th>Sit amet</th>
            <th>Consectetur adipiscing</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Lorem ipsum dolor sit amet</td>
            <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>
        </tr>
        <tr>
            <td>Lorem ipsum dolor sit amet</td>
            <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>
        </tr>
        <tr>
            <td>Lorem ipsum dolor sit amet</td>
            <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>
        </tr>
    </tbody>
</table>
 
/* No context defined. */