Tables are used for comparing/contrasting data.
Reminder: Tables should not be used as a way to create columns of text for design purposes. Tables can be difficult to navigate by low vision users and other users of screen readers.
Basic table
Date | Speaker | Hosted by |
---|---|---|
Oct 2 | Themis Sapsis Associate Professor, Mechanical Engineering Massachusetts Institute of Technology “Extreme events in complex dynamical systems: prediction and statistical quantification” | Steve Brunton |
Oct 4 | Ronald Miles Professor, Mechanical Engineering Binghamton University “The Nanophone: Sensing Sound with Nanoscale Spider Silk” | Steve Shen |
Oct 9 | Anant Madabhushi Professor, Biomedical Engineering Case Western Reserve University “Prognostic and Predictive Radiomics and Pathomics: Implications for Precision Medicine” | Jon Liu |
Code
<div class="table-responsive"> <table class="table table-striped" summary="Sample table"> <thead> <tr> <th class="w-25">Column heading 1</th> <th>Column heading 2</th> <th class="w-25">Column heading 3</th> </tr> </thead> <tbody> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> </tbody> </table> </div>
More table styling options are available on Bootstrap.
Advanced table
- To be used for tables that need to stand out more
- The first column stays in place on mobile when srolling horizontally
Dean's Scholars | STARS | Startup | |
---|---|---|---|
Cohort size | ~50 | ~30 | ~35 |
Majors | Engineering (not computer engineering) | Engineering Computer Science | Computer Engineering Computer Science |
Advising | Quarterly advising appointments with OMAD adviser and engineering adviser | Dedicated, STARS-only Academic Adviser Required appointments based on stage in program | Quarterly advising appointments with dedicated CSE adviser |
Summer component | 4 week summer transition program (encouraged to live on-campus) | 8 week math intensive (online) 2 week transition program (must live on-campus) | 4 week summer transition program (encouraged to live on-campus) |
Housing | Required on-campus in Maple Hall (UW residence hall) for the first two years. | ||
Supplemental instruction | Two classes per quarter for the first year 6 total classes (per year) 2 classes per quarter | One to three classes per quarter for the first two years 6-8 total per year 12-18 total classes | Three classes over the first year 3 total classes |
Required courses | Yes | Yes | Yes |
Community building | Yes | Yes | Yes |
Mentorship | Peer Mentoring | Peer Mentoring Faculty Mentoring | Peer Mentoring |
Contact information | placeholder@uw.edu Placeholder, Title goes here | starsapp@uw.edu Carrie Mills, Operations Manager | ikedal@cs.washington.edu Leslie Ikeda, Senior Startup Program Manager |
Code
Update the Font Awesome icons as needed.
<style type="text/css"> table#adv th:first-child, table#adv td:first-child { position: sticky; left: 0; } </style> <div class="table-responsive-sm"> <table id="adv" class="table table-bordered table-striped" summary="table summary"> <thead class="table-secondary"> <tr> <th class="bg-secondary"> </th> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tbody> <tr> <th class="text-center bg-info" scope="row"><i class="fas fa-ruler-combined"> </i><br /> Row 1</th> <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td> <td>Donec et odio pellentesque diam volutpat commodo sed egestas.</td> <td>Integer quis auctor elit sed vulputate mi sit.</td> </tr> <tr> <th class="text-center bg-info" scope="row"><i class="fas fa-ruler-combined"> </i><br /> Row 2</th> <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td> <td>Donec et odio pellentesque diam volutpat commodo sed egestas.</td> <td>Integer quis auctor elit sed vulputate mi sit.</td> </tr> <tr> <th class="text-center bg-info" scope="row"><i class="fas fa-ruler-combined"> </i><br /> Row 3</th> <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td> <td>Donec et odio pellentesque diam volutpat commodo sed egestas.</td> <td>Integer quis auctor elit sed vulputate mi sit.</td> </tr> </tbody> </table> </div>