patternfly/tests-src/tables.html

This reference implementation of PatternFly is based on [Bootstrap v3](http://getbootstrap.com/). Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.

---
categories: [Widgets]
layout: page
title: Tables
resource: true
---
      <h2>Contextual classes</h2>
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>#</th>
            <th>Column heading</th>
            <th>Column heading</th>
            <th>Column heading</th>
          </tr>
        </thead>
        <tbody>
          <tr class="active">
            <td>1</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr class="success">
            <td>3</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr>
            <td>4</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr class="warning">
            <td>5</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr>
            <td>6</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
          <tr class="danger">
            <td>7</td>
            <td>Column content</td>
            <td>Column content</td>
            <td>Column content</td>
          </tr>
        </tbody>
      </table>
      <h2>Responsive and bordered tables. Striped and hover rows.</h2>
      <div class="table-responsive">
        <table class="table table-striped table-bordered table-hover">
          <thead>
            <tr>
              <th>Session</th>
              <th class="text-right">Course Number</th>
              <th>Title</th>
              <th>Level</th>
              <th>Course Format</th>
              <th>Days</th>
              <th class="text-right">CRN</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><a href="#">Winter 2014 Full-Term Session</a></td>
              <td class="text-right">CMN 6020</td>
              <td>Ethical Issues in Organizational Communication</td>
              <td>Graduate</td>
              <td>Online</td>
              <td>T </td>
              <td class="text-right">20115</td>
            </tr>
            <tr>
              <td><a href="#">Winter 2014 Full-Term Session</a></td>
              <td class="text-right">CMN 6020</td>
              <td>Ethical Issues in Organizational Communication</td>
              <td>Graduate</td>
              <td>Online</td>
              <td>W </td>
              <td class="text-right">21509</td>
            </tr>
            <tr>
              <td><a href="#">Winter 2014 Full-Term Session</a></td>
              <td class="text-right">CMN 6050</td>
              <td>Crisis Communication</td>
              <td>Graduate</td>
              <td>Online</td>
              <td>W </td>
              <td class="text-right">20915</td>
            </tr>
            <tr>
              <td><a href="#">Winter 2014 Full-Term Session</a></td>
              <td class="text-right">CMN 6050</td>
              <td>Crisis Communication</td>
              <td>Graduate</td>
              <td>Online</td>
              <td>Th </td>
              <td class="text-right">21550</td>
            </tr>
            <tr>
              <td><a href="#">Winter 2014 Full-Term Session</a></td>
              <td class="text-right">CMN 6060</td>
              <td>Negotiation, Mediation, and Facilitation</td>
              <td>Graduate</td>
              <td>Online</td>
              <td>Th </td>
              <td class="text-right">20119</td>
            </tr>
            <tr>
              <td><a href="#">Winter 2014 Full-Term Session</a></td>
              <td class="text-right">CMN 6060</td>
              <td>Negotiation, Mediation, and Facilitation</td>
              <td>Graduate</td>
              <td>Online</td>
              <td>T </td>
              <td class="text-right">20122</td>
            </tr>
            <tr>
              <td><a href="#">Winter 2014 Full-Term Session</a></td>
              <td class="text-right">CMN 6060</td>
              <td>Negotiation, Mediation, and Facilitation</td>
              <td>Graduate</td>
              <td>Online</td>
              <td>T </td>
              <td class="text-right">21511</td>
            </tr>
            <tr>
              <td><a href="#">Winter 2014 Full-Term Session</a></td>
              <td class="text-right">CMN 6060</td>
              <td>Negotiation, Mediation, and Facilitation</td>
              <td>Graduate</td>
              <td>Online</td>
              <td>Th </td>
              <td class="text-right">21330</td>
            </tr>
            <tr>
              <td><a href="#">Winter 2014 Full-Term Session</a></td>
              <td class="text-right">CMN 6061</td>
              <td>Personal Branding</td>
              <td>Graduate</td>
              <td>Online</td>
              <td>Th </td>
              <td class="text-right">20124</td>
            </tr>
            <tr>
              <td><a href="#">Winter 2014 Full-Term Session</a></td>
              <td class="text-right">CMN 6080</td>
              <td>Intercultural Communication</td>
              <td>Graduate</td>
              <td>Online</td>
              <td>W </td>
              <td class="text-right">20126</td>
            </tr>
          </tbody>
        </table>
      </div>