Table

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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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>