Tables

Present tabular data in rows and columns

Basic Table

Name	Title	Department	Email Address
Name Adele Dubois	Title Communications Manager	Department Enrollment and the Student Experience	Email Address adubois@syr.edu
Name Nader Malouf	Title Admissions Counselor, Summer Programs	Department Financial Aid	Email Address nmalouf@syr.edu
Name Anshul Chaudhary	Title Associate Director of Claims	Department Campus Safety and Emergency Services	Email Address achaudhary@syr.edu

<table class="table-simple" role="table" style="max-width: 65em">
  <thead role="rowgroup">
    <tr role="row">
      <th role="columnheader">Name</th>
      <th role="columnheader">Title</th>
      <th role="columnheader">Department</th>
      <th role="columnheader">Email Address</th>
    </tr>
  </thead>
  <tbody>
    <tr role="row">
      <td role="cell">
        <div class="mobile-th">Name</div>
        <div class="mobile-td">Adele Dubois</div>
      </td>
      <td role="cell">
        <div class="mobile-th">Title</div>
        <div class="mobile-td">Communications Manager</div>
      </td>
      <td role="cell">
        <div class="mobile-th">Department</div>
        <div class="mobile-td">Enrollment and the Student Experience</div>
      </td>
      <td role="cell">
        <div class="mobile-th">Email Address</div>
        <div class="mobile-td"><a href='#'>adubois@syr.edu</a></div>
      </td>
    </tr>
  </tbody>
</table>

Striped Table

Name	Title	Department	Email Address
Name Adele Dubois	Title Communications Manager	Department Enrollment and the Student Experience	Email Address amdubois@syr.edu'
Name Nader Malouf	Title Admissions Counselor, Summer Programs	Department Financial Aid	Email Address nmalouf@syr.edu
Name Anshul Chaudhary	Title Associate Director of Claims	Department Campus Safety and Emergency Services	Email Address achaudhary@syr.edu

<table role="table" class="table-striped" style="max-width: 65em">
  <thead role="rowgroup">
    <tr role="row">
      <th role="columnheader">Name</th>
      <th role="columnheader">Title</th>
      <th role="columnheader">Department</th>
      <th role="columnheader">Email Address</th>
    </tr>
  </thead>
  <tbody>
    <tr role="row">
      <td role="cell">
        <div class="mobile-th">Name</div>
        <div class="mobile-td">Adele Dubois</div>
      </td>
      <td role="cell'>
        <div class="mobile-th">Title</div>
        <div class="mobile-td">Communications Manager</div>
      </td>
      <td role="cell'>
        <div class="mobile-th">Department</div>
        <div class="mobile-td">Enrollment and the Student Experience</div>
      </td>
      <td role="cell">
        <div class="mobile-th">Email Address</div>
        <div class="mobile-td"><a href="#">amdubois@syr.edu'</a></div>
      </td>
    </tr>
  </tbody>
</table>