Tables are for displaying Data
Tables should only be used to display tabular data. They should never be used to layout your page in columns or rows. There are Page Layout features you can use for that.
Data Tables
Data tables are very difficult to display on small screens. On smaller screen sizes, tables will by default extend to 100% width. In addition, we have the following classes that you can apply to your data tables to make them more user-friendly on small screens. Which one you choose depends on the nature of the data in your table.
Note: For these classes to work properly, your table must be properly set up with a header and body.
Comparative Data (class="compare")
Here's an example table that contains "comparative" data. Users will likely be comparing the information from one row to another.
On small screen sizes, the header shifts to the left and the rows become columns that users can scroll horizontally to compare data.
To use this format, apply the class "compare" to your data table.
| Subj | Crse | Sec | Cred | Title | Days | Time | Date (MM/DD) | Location |
|---|---|---|---|---|---|---|---|---|
| ACCT | 211 | A01 | 4.000 | Financial Accounting | TR | 01:15 pm-02:40 pm | 01/25-05/11 | LH 008 |
| ACCT | 211 | A02 | 4.000 | Financial Accounting | TR | 01:15 pm-02:40 pm | 01/25-05/11 | LH 008 |
| ACCT | 211 | A50 | 0.000 | Financial Accounting (ACT) | M | 09:40 am-10:40 am | 01/25-05/11 | LN 1402 |
| ACCT | 211 | A51 | 0.000 | Financial Accounting | W | 09:40 am-10:40 am | 01/25-05/11 | LN 1402 |
| ACCT | 211 | A52 | 0.000 | Financial Accounting (ACT) | F | 09:40 am-10:40 am | 01/25-05/11 | SW 330 |
| ACCT | 211 | A53 | 0.000 | Financial Accounting (ACT) | M | 10:50 am-11:50 am | 01/25-05/11 | LN 1402 |
| ACCT | 211 | A54 | 0.000 | Financial Accounting (ACT) | W | 10:50 am-11:50 am | 01/25-05/11 | LN 1402 |
| ACCT | 211 | A57 | 0.000 | Financial Accounting (ACT) | W | 04:40 pm-05:40 pm | 01/25-05/11 | SW 309 |
Non-Comparative Data (class="non-compare")
Here's an example table that contains "non-comparative" data. Users will not likely be comparing the information from one row to another; each entry is self-sufficient.
On small screen sizes the table linearizes, in essence, each row becomes its own table. The header shifts to the left and the rows become columns users can scroll horizontally to compare data.
To use this format, apply the class "non-compare" to your data table.
| Name | Position | Phone | Office | |
|---|---|---|---|---|
| Agarwal, Manoj | Marketing, Associate Dean | (607) 777-6860 | AA-128 | agarwal@binghamton.edu |
| Agnihothri, Sal | Operations | (607) 777-2125 | AA-228 | agni@binghamton.edu |
| Blevins, Dane | Strategy | (607) 777-4039 | AA-246 | dblevins@binghamton.edu |
| Bobinski, George | Marketing, Associate Dean | (607) 777-2315 | AA-120DB | bobinski@binghamton.edu |
| Chatterjee, Subimal | Marketing | (607) 777-2733 | AA-212 | schatter@binghamton.edu |
| Chatterji, Manas | Managerial Economics | (607) 777-2475 | AA-232 | mchatter@binghamton.edu |
| Cui, Leon | Operations | (607) 777-6853 | AA-258 | cui@binghamton.edu |
