Communications and Marketing

Tables

Tables should be only used to display data. Do not use them to layout your page. 

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.

Sections Found
Subj Crse Sec Cred Title Days Time Instructor Instr Method Date (MM/DD) Location
ACCT 211 A01 4.000 Financial Accounting TR 01:15 pm-02:40 pm Elliot Kamlet (P) TR 01/25-05/11 LH 008
ACCT 211 A02 4.000 Financial Accounting TR 01:15 pm-02:40 pm Elliot Kamlet (P) TR 01/25-05/11 LH 008
ACCT 211 A50 0.000 Financial Accounting (ACT) M 09:40 am-10:40 am Elliot Kamlet (P) TR 01/25-05/11 LN 1402
ACCT 211 A51 0.000 Financial Accounting W 09:40 am-10:40 am Elliot Kamlet (P) TR 01/25-05/11 LN 1402
ACCT 211 A52 0.000 Financial Accounting (ACT) F 09:40 am-10:40 am Elliot Kamlet (P) TR 01/25-05/11 SW 330
ACCT 211 A53 0.000 Financial Accounting (ACT) M 10:50 am-11:50 am Elliot Kamlet (P) TR 01/25-05/11 LN 1402
ACCT 211 A54 0.000 Financial Accounting (ACT) W 10:50 am-11:50 am Elliot Kamlet (P) TR 01/25-05/11 LN 1402
ACCT 211 A55 0.000 Financial Accounting (ACT) F 10:50 am-11:50 am Elliot Kamlet (P) TR 01/25-05/11 SW 305
ACCT 211 A56 0.000 Financial Accounting (ACT) M 04:40 pm-05:40 pm Elliot Kamlet (P) TR 01/25-05/11 FA 245
ACCT 211 A57 0.000 Financial Accounting (ACT) W 04:40 pm-05:40 pm Elliot Kamlet (P) TR 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.

Faculty and Staff Listing
Name Position Phone Office Email
Agarwal, Manoj Marketing, Associate Dean (607) 777-6860 AA-128 agarwal@binghamton.edu
Agnihothri, Sal Operations (607) 777-2125 AA-228 agni@binghamton.edu
Barnes, Ray  Spring 2016 Adjunct Lecturer (607) 777-4039 AA-305 rbarnes@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
Danaher, Michael  Spring 2016 Adjunct Lecturer (607) 777-4039 AA-364 mdanaher@binghamton.edu

 

 

Last Updated: 3/1/17