Missouri State University Pattern Library

Column Headers

There are no notes for this item.

  • Handle: @tables-column-headers
  • Preview:
  • Filesystem Path: src\components\02-blocks\tables\column-headers.hbs 
<table>
    <caption>Lorem ipsum dolor sit amet</caption>
    <thead>
        <th>Lorem ipsum dolor</th>
        <th>Sit amet</th>
        <th>Consectetur adipiscing</th>
    </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>
        </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>
        </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>
        </tr>
    </tbody>
    <tfoot>
        <th>Lorem ipsum dolor</th>
        <td>Sit amet</td>
        <td>Consectetur adipiscing</td>
    </tfoot>
</table>
 
<table>
    <caption>Lorem ipsum dolor sit amet</caption>
    <thead>
        <th>Lorem ipsum dolor</th>
        <th>Sit amet</th>
        <th>Consectetur adipiscing</th>
    </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>
        </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>
        </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>
        </tr>
    </tbody>
    <tfoot>
        <th>Lorem ipsum dolor</th>
        <td>Sit amet</td>
        <td>Consectetur adipiscing</td>
    </tfoot>
</table>
 
/* No context defined for this component. */