Stacked Table (Mobile)
<table class="GRAYTableStack">This class is meant for small tables (4 columns or less, and is great for directories or data that can easily be understood without the aid of coumn headers in the overall context of the data). *Resize your browser screen or view on a mobile device to see the column headers stack on top of each other.
| First Name | Last Name | Phone Number | |
|---|---|---|---|
| Janelongfirstname | Doe | 979-555-1212 | jdoe@as.tamu.edu |
| John | Doelonglastname | 979-555-1213 | johnd@as.tamu.edu |
| Jane | Smith | 979-555-1214 | jsmith@as.tamu.edu |
| John | Smith | 979-555-1215 | johns@as.tamu.edu |
Scroll
<table class="GRAYTableScroll"> or <table class="TANTableScroll">View this page on a mobile device or resize your page to see the table in scrolling action.
| # | First Name | Last Name | Title | Unit |
|---|---|---|---|---|
| 1 | Mark | Otto | Assistant Director | Admissions |
| 2 | Jacob | Thornton | Program Coordinator I | Financial Aid |
| 3 | Larry | the Bird | Student Worker | Undergraduate Studies |
Scroll Expanded
<table class="GRAYTableScrollExpanded"> or <table class="TANTableScrollExpanded">View this page on a mobile device or resize your page to see the table in scrolling action. When this table is scrolled, a custom alert is displayed.
| # | First Name | Last Name | Title | Unit |
|---|---|---|---|---|
| 1 | Mark | Otto | Assistant Director | Admissions |
| 2 | Jacob | Thornton | Program Coordinator I | Financial Aid |
| 3 | Larry | the Bird | Student Worker | Undergraduate Studies |
You may also add no-alert to the end of the classes and then no alert will be shown!
Striped Table
<table class="table table-striped">
| # | First Name | Last Name | Title | Unit |
|---|---|---|---|---|
| 1 | Mark | Otto | Assistant Director | Admissions |
| 2 | Jacob | Thornton | Program Coordinator I | Financial Aid |
| 3 | Larry | the Bird | Student Worker | Undergraduate Studies |
Bordered and Condensed table
Bordered table
<table class="table table-bordered">
| # | First Name | Last Name | Title |
|---|---|---|---|
| 1 | Mark | Otto | Assistant Director |
| Mark | Otto | IT Manager | |
| 2 | Jacob | Thornton | Program Coordinator I |
| 3 | Larry the Bird | Student Worker | |
Condensed table
<table class="table table-condensed">
| # | First Name | Last Name | Title |
|---|---|---|---|
| 1 | Mark | Otto | Assistant Director |
| 2 | Jacob | Thornton | Program Coordinator I |
| 3 | Larry the Bird | Student Worker | |
Grid
<table class="TANGrid">| # | First Name | Last Name | Title | Unit |
|---|---|---|---|---|
| 1 | Mark | Otto | Assistant Director | Admissions |
| 2 | Jacob | Thornton | Program Coordinator I | Financial Aid |
| 3 | Larry | the Bird | Student Worker | Undergraduate Studies |
Gray Table
<table class="table GRAYTable">
| # | First Name | Last Name | Title | Unit |
|---|---|---|---|---|
| 1 | Mark | Otto | Assistant Director | Admissions |
| 2 | Jacob | Thornton | Program Coordinator I | Financial Aid |
| 3 | Larry | the Bird | Student Worker | Undergraduate Studies |
Tan Table
<table class="table TANTable">
| # | First Name | Last Name | Title | Unit |
|---|---|---|---|---|
| 1 | Mark | Otto | Assistant Director | Admissions |
| 2 | Jacob | Thornton | Program Coordinator I | Financial Aid |
| 3 | Larry | the Bird | Student Worker | Undergraduate Studies |