| Youtube | |||||
|---|---|---|---|---|---|
| Campus Miami Dade College | Facebook
|
Twitter
|
Youtube
|
Instagram
|
Linkedin
|
| Campus Hialeah Campus | Facebook
|
Twitter account not available | Youtube account not available | Instagram
|
Linkedin account not available |
| Campus Homestead Campus | Facebook
|
Twitter account not available | Youtube account not available | Instagram
|
Linkedin account not available |
| Campus Eduardo J. Padrón Campus | Facebook
|
Twitter account not available | Youtube account not available | Instagram
|
Linkedin account not available |
| Campus Kendall Campus | Facebook
|
Twitter account not available | Youtube account not available | Instagram
|
Linkedin account not available |
| Campus Medical Campus | Facebook
|
Twitter account not available | Youtube account not available | Instagram account not available | Linkedin account not available |
| Campus North Campus | Facebook
|
Twitter account not available | Youtube account not available | Instagram
|
Linkedin account not available |
| Campus West Campus | Facebook
|
Twitter account not available | Youtube account not available | Instagram
|
Linkedin account not available |
| Campus Wolfson Campus | Facebook
|
Twitter account not available | Youtube account not available | Instagram
|
Linkedin account not available |
| Campus Virtual College | Facebook
|
Twitter
|
Youtube account not available | Instagram account not available | Linkedin account not available |
Responsive Tables
The following tables have been created with accessibility in mind. They have been tested on a PC using JAWS and NVDA screen readers.
Accessiblity Tip:
Screen Reader controls: Press the hotkey "T" to move focus to the table on the page. Use the arrow keys to move to a cell in the table. Use the command CTRL+ALT+ARROW KEYS to move through the table by column.
Captions are used to properly label the content of a table and are contained inside a <caption> tag. It is necessary to create multiple tables with uinique captions if dealing with categorized information. These tags make it easier for screen readers to tab through tables without the need to read each cell in order to get to a particular section.
Tables with one header
The following tables of course requirements have the cells in the first row marked up using the <th> element. This is only acceptable because they're small tables and the data itself is distinctly different in each column so that the relationship between the header and data cells is evident.
| Course | Course Title | Credit Hours |
|---|---|---|
| CGS 1060 | Introduction to Microcomputer Usage | 3 credits |
| ENC 1101 | English Composition 1 | 3 credits |
| CHM 1033 | Chemistry for Health Sciences | 3 credits |
| CHM 1033L | Chemistry for Health Sciences lab | 1 credit |
| HSC 0003 | Introduction to Healthcare | 2 credits |
Table Striped
| Course | Course Title | Credit Hours |
|---|---|---|
| CGS 1060 | Introduction to Microcomputer Usage | 3 credits |
| ENC 1101 | English Composition 1 | 3 credits |
| CHM 1033 | Chemistry for Health Sciences | 3 credits |
| CHM 1033L | Chemistry for Health Sciences lab | 1 credit |
| HSC 0003 | Introduction to Healthcare | 2 credits |
Table Bordered
| Course | Course Title | Credit Hours |
|---|---|---|
| CGS 1060 | Introduction to Microcomputer Usage | 3 credits |
| ENC 1101 | English Composition 1 | 3 credits |
| CHM 1033 | Chemistry for Health Sciences | 3 credits |
| CHM 1033L | Chemistry for Health Sciences lab | 1 credit |
| HSC 0003 | Introduction to Healthcare | 2 credits |
Table Hover
note: you can also add contextual classes to the element in orde rto highlight parts of the table. Example contextual classes are as follows: Class Description- .active
- Applies the hover color to a particular row or cell
- .success
- Indicates a successful or positive action
- .info
- Indicates a neutral informative change or action
- .warning
- Indicates a warning that might need attention
- .danger
- Indicates a dangerous or potentially negative action
| Course | Course Title | Credit Hours |
|---|---|---|
| CGS 1060 | Introduction to Microcomputer Usage | 3 credits |
| ENC 1101 | English Composition 1 | 3 credits |
| CHM 1033 | Chemistry for Health Sciences | 3 credits |
| CHM 1033L | Chemistry for Health Sciences lab | 1 credit |
| HSC 0003 | Introduction to Healthcare | 2 credits |
Reformat table
Must add the classes table table-reformat to <table>.
Each <tr> contains the title of the columns that will be reformated when the screen reaches a resolution below 40em.
| Course | Course Title | Credit Hours |
|---|---|---|
| CGS 1060 | Introduction to Microcomputer Usage |
3 credits |
| ENC 1101 | English Composition 1 |
3 credits |
| CHM 1033 | Chemistry for Health Sciences |
3 credits |
| CHM 1033L | Chemistry for Health Sciences lab |
1 credit |
| HSC 0003 | Introduction to Healthcare |
2 credits |
<div class="table-responsive">
<table class="table table-reformat">
<caption> Reformat table </caption>
<thead class="highlight-header">
<tr>
<th class="col-xs-2">Course</th>
<th class="col-xs-6">Course Title</th>
<th class="col-xs-4">Credit Hours</th>
</tr>
</thead>
<tbody>
<tr>
<th>CGS 1060</th>
<td data-th="Course Title"><div>Introduction to Microcomputer Usage</div></td>
<td data-th="Credit Hours"><div>3 credits</div></td>
</tr>
<tr>
<th>ENC 1101</th>
<td data-th="Course Title"><div>English Composition 1</div></td>
<td data-th="Credit Hours"><div>3 credits</div></td>
</tr>
<tr>
<th>CHM 1033</th>
<td data-th="Course Title"><div>Chemistry for Health Sciences</div></td>
<td data-th="Credit Hours"><div>3 credits</div></td>
</tr>
<tr>
<th>CHM 1033L</th>
<td data-th="Course Title"><div>Chemistry for Health Sciences lab</div></td>
<td data-th="Credit Hours"><div>1 credit</div></td>
</tr>
<tr>
<th>HSC 0003</th>
<td data-th="Course Title"><div>Introduction to Healthcare</div></td>
<td data-th="Credit Hours"><div>2 credits</div></td>
</tr>
</tbody>
</table>
</div>
Reformat table 2
Must add the classes table table-reformat to <table>.
When the resolution below 640px, it will go onto mobile, the course row will not show
| Course | Course Title | Credit Hours |
|---|---|---|
| CGS 1060 | Introduction to Microcomputer Usage |
3 credits |
| ENC 1101 | English Composition 1 |
3 credits |
| CHM 1033 | Chemistry for Health Sciences |
3 credits |
| CHM 1033L | Chemistry for Health Sciences lab |
1 credit |
| HSC 0003 | Introduction to Healthcare |
2 credits |
<div class="table-responsive">
<table class="table table-reformat">
<caption> Reformat table </caption>
<thead class="highlight-header">
<tr>
<th class="col-xs-2 no-show-mobile">Course</th>
<th class="col-xs-6">Course Title</th>
<th class="col-xs-4">Credit Hours</th>
</tr>
</thead>
<tbody>
<tr>
<td class="bold-mobile">CGS 1060</td>
<td data-th="Course Title"><div>Introduction to Microcomputer Usage</div></td>
<td data-th="Credit Hours"><div>3 credits</div></td>
</tr>
<tr>
<td class="bold-mobile">ENC 1101</td>
<td data-th="Course Title"><div>English Composition 1</div></td>
<td data-th="Credit Hours"><div>3 credits</div></td>
</tr>
<tr>
<td class="bold-mobile">CHM 1033</td>
<td data-th="Course Title"><div>Chemistry for Health Sciences</div></td>
<td data-th="Credit Hours"><div>3 credits</div></td>
</tr>
<tr>
<td class="bold-mobile">CHM 1033L</td>
<td data-th="Course Title"><div>Chemistry for Health Sciences lab</div></td>
<td data-th="Credit Hours"><div>1 credit</div></td>
</tr>
<tr>
<td class="bold-mobile">HSC 0003</td>
<td data-th="Course Title"><div>Introduction to Healthcare</div></td>
<td data-th="Credit Hours"><div>2 credits</div></td>
</tr>
</tbody>
</table>
</div>
Reformat table 3 - Directory
This will display as a business card in mobile
Must add the classes table table-reformat table-directory to <table>.
When the resolution below 640px, it will go onto mobile
| Name | Position | Room | |
|---|---|---|---|
| Jane Doe | Dean of Education |
K-9251 |
jdoe@mdc.edu |
| John Doe | Dean of English |
K-9251 |
jdoe@mdc.edu |
| Jane Smith | Dean of Math |
K-9251 |
jdoe@mdc.edu |
| Jane Cole | Science Professor |
K-9251 |
jdoe@mdc.edu |
| Mark Robinson | Professor Education |
K-9251 |
jdoe@mdc.edu |
This should be changed to a Header that follows a sequential order based on your content
Jane Doe
Dean of Education
K-9251
jdoe@mdc.edu
Jane Doe
Dean of Math
K-9251
jdoe@mdc.edu
John Doe
Dean of Science
K-9251
jdoe@mdc.edu
<div class="table-responsive">
<table class="table table-reformat table-directory">
<caption>
Reformat table
</caption>
<thead class="highlight-header">
<tr>
<th class="col-xs-3 no-show-mobile">Name</th>
<th class="col-xs-3 no-show-mobile">Position</th>
<th class="col-xs-3 no-show-mobile">Room</th>
<th class="col-xs-3 no-show-mobile">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td class="bold-mobile" data-th="Name">Jane Doe</td>
<td data-th="Position"><div>Dean of Education</div></td>
<td data-th="Room"><div>K-9251</div></td>
<td data-th="Email"><div>jdoe@mdc.edu</div></td>
</tr>
<tr>
<td class="bold-mobile" data-th="Name">John Doe</td>
<td data-th="Position"><div>Dean of English</div></td>
<td data-th="Room"><div>K-9251</div></td>
<td data-th="Email"><div>jdoe@mdc.edu</div></td>
</tr>
<tr>
<td class="bold-mobile" data-th="Name">Jane Smith</td>
<td data-th="Position"><div>Dean of Math</div></td>
<td data-th="Room"><div>K-9251</div></td>
<td data-th="Email"><div>jdoe@mdc.edu</div></td>
</tr>
<tr>
<td class="bold-mobile" data-th="Name">Jane Cole</td>
<td data-th="Position"><div>Science Professor</div></td>
<td data-th="Room"><div>K-9251</div></td>
<td data-th="Email"><div>jdoe@mdc.edu</div></td>
</tr>
<tr>
<td class="bold-mobile" data-th="Name">Mark Robinson</td>
<td data-th="Position"><div>Professor Education</div></td>
<td data-th="Room"><div>K-9251</div></td>
<td data-th="Email"><div>jdoe@mdc.edu</div></td>
</tr>
</tbody>
</table>
</div>
<section class="mobile-only-directory">
<p><strong>This should be changed to a Header that follows a sequential order based on your content </strong></p>
<div class="mdc-info">
<strong>Jane Doe</strong>
<p>Dean of Education</p>
<p>K-9251</p>
<p>jdoe@mdc.edu</p>
</div>
<div class="mdc-info">
<strong>Jane Doe</strong>
<p>Dean of Math</p>
<p>K-9251</p>
<p>jdoe@mdc.edu</p>
</div>
<div class="mdc-info">
<strong>John Doe</strong>
<p>Dean of Science</p>
<p>K-9251</p>
<p>jdoe@mdc.edu</p>
</div>
</section>
Table - Tabs mobile display
Add to CSS file
.tablesaw-cell-content img { width: 30%; } .tablesaw-stack td { padding: 8px; line-height: 1.42857143; vertical-align: top; border-top: 1px solid #eee; } @media (max-width: 992px) { .mobile-nav { display: grid; } }
| Youtube | |||||
|---|---|---|---|---|---|
| Program Honors College | Facebook |
Twitter account not available | Youtube account not available | Instagram |
Linkedin account not available |
| Program Institute for Civic Engagement and Democracy | Facebook |
Twitter account not available | Youtube account not available | Instagram account not available | Linkedin account not available |
| Program Makers Lab | Facebook account not available | Twitter account not available | Youtube account not available | Instagram |
Linkedin account not available |
| Program MDC In Focus | Facebook account not available | Twitter account not available | Youtube |
Instagram account not available | Linkedin account not available |
| Program Miami Fashion Institute | Facebook |
Twitter account not available | Youtube |
Instagram |
Linkedin account not available |
| Program Miami Culinary Institute | Facebook |
Twitter |
Youtube account not available | Instagram |
Linkedin account not available |
| Program New World School of the Arts | Facebook |
Twitter |
Youtube |
Instagram account not available | Linkedin account not available |
| Program School for Advanced Studies | Facebook account not available | Twitter |
Youtube account not available | Instagram |
Linkedin account not available |
| Program School of Justice | Facebook |
Twitter |
Youtube account not available | Instagram account not available | Linkedin account not available |
| Program The Idea Center | Facebook |
Twitter |
Youtube |
Instagram |
Linkedin |
| Program The Law Center | Facebook |
Twitter account not available | Youtube account not available | Instagram account not available | Linkedin account not available |
| Youtube | |||||
|---|---|---|---|---|---|
| College President
Dr. Eduardo J. Padrón
College President |
Facebook
|
Twitter
|
Youtube account not available | Instagram
|
Linkedin
|
| Executive Vice President and Provost
Dr. Lenore Rodicio
Executive Vice President and Provost |
Facebook account not available | Twitter
|
Youtube account not available | Instagram account not available | Linkedin
|
| Youtube | |||||
|---|---|---|---|---|---|
| Cultural Program Koubek Center | Facebook
|
Twitter
|
Youtube account not available | Instagram
|
Linkedin account not available |
| Cultural Program MDC Live Arts | Facebook
|
Twitter
|
Youtube
|
Instagram
|
Linkedin account not available |
| Cultural Program Miami Book Fair | Facebook
|
Twitter
|
Youtube account not available | Instagram
|
Linkedin account not available |
| Cultural Program Miami Film Festival | Facebook
|
Twitter
|
Youtube
|
Instagram
|
Linkedin account not available |
| Cultural Program Museum of Art + Design | Facebook
|
Twitter
|
Youtube account not available | Instagram
|
Linkedin account not available |
| Cultural Program Teatro Prometeo | Facebook
|
Twitter
|
Youtube account not available | Instagram
|
Linkedin account not available |
| Cultural Program Tower Theater Miami | Facebook
|
Twitter
|
Youtube account not available | Instagram
|
Linkedin account not available |
| Cultural Program Tuyo | Facebook
|
Twitter
|
Youtube account not available | Instagram
|
Linkedin account not available |
| Youtube | |||||
|---|---|---|---|---|---|
| Special Initiative MDC Alerts | Facebook account not available | Twitter
|
Youtube account not available | Instagram account not available | Linkedin account not available |
| Special Initiative MDC Alumni | Facebook
|
Twitter
|
Youtube account not available | Instagram
|
Linkedin account not available |
| Special Initiative MDC Foundation | Facebook
|
Twitter account not available | Youtube
|
Instagram
|
Linkedin account not available |
| Special Initiative MDC News & Events | Facebook account not available | Twitter
|
Youtube account not available | Instagram account not available | Linkedin account not available |
| Special Initiative Athletics | Facebook
|
Twitter
|
Youtube account not available | Instagram
|
Linkedin account not available |
| Special Initiative Learning Resources | Facebook
|
Twitter account not available | Youtube
|
Instagram account not available | Linkedin account not available |
| Special Initiative Lynn and Louis Wolfson II Florida Moving Image Archives | Facebook
|
Twitter account not available | Youtube
|
Instagram
|
Linkedin account not available |
| Special Initiative MDC Jobs | Facebook
|
Twitter
|
Youtube account not available | Instagram account not available | Linkedin account not available |
| Special Initiative Single Stop | Facebook
|
Twitter
|
Youtube account not available | Instagram account not available | Linkedin account not available |
| Special Initiative The Reporter | Facebook
|
Twitter
|
Youtube
|
Instagram
|
Linkedin account not available |