Data Tables
Data tables are useful for when you have complex or long data that your users may want to organize in different ways or filter.
Example
Below is a data table that can be sorted by each column (you can list the colleges chronologically rather than alphabetically, for example). You can also filter the results with the search box (if you knew the acronym for a writing program, but didn't know which college it was associated with, for example).
| College Name | URL | Founded | Writing Program |
|---|---|---|---|
| Revelle College | https://revelle.ucsd.edu/ | 1964 | Humanities |
| John Muir College | https://muir.ucsd.edu/ | 1967 | Muir College Writing Program (MCWP) |
| Thurgood Marshall College | https://marshall.ucsd.edu/ | 1970 | Dimensions of Culture Program (DOC) |
| Earl Warren College | https://warren.ucsd.edu/ | 1974 | Warren College Writing Program |
| Eleanor Roosevelt College | https://roosevelt.ucsd.edu/ | 1988 | Making of the Modern World (MMW) |
| Sixth College | https://sixth.ucsd.edu/ | 2001 | Culture, Art, and Technology (CAT) |
| Seventh College | https://seventh.ucsd.edu/ | 2019 | Synthesis Program |
| Eighth College | https://eighth.ucsd.edu | 2021 | Critical Community Engagement (CCE) |
Tips and considerations
Remember that tables should only be used for tabular data. Do not use them for basic page formatting. Be aware that users with smaller screens (tablet, cell phone) will have difficulty viewing tables with many columns.
Keep the data table concise. Users being able to search the table is not an excuse to overload the table with information. If a user doesn't know what key terms to search for, then the search doesn't help them. They still need to skim the table's contents. As a concrete example, the data table above would skim more easily if the "URL" content were included as part of the "College Name" column instead of taking up extra space as an additional column (compare to the "Writing Program" column).
If you have repeating categories in a column (for example, topics that are repeated for many classes/ talks/ readings), consider providing those categories as search suggestions before the table.
Avoid multiple data tables on a single page. There are technical issues that can arise with multiple data tables, and it can become confusing to the user when there are two or more data tables that can change length based on the current search inquiry.
Keep all formatting consistent within a column.
Formatting code is included in the ordering.
As an example, text formatted as a link starts with "<a href=" while bolded text starts with "<b>" so links will be alphabetized before bolded text (a before b in the code) no matter what the visible text is.
The best way to make sure information in each column is formatted the same way is by examining the HTML in code view, not the WYSIWYG. We recommend data tables only for users who are comfortable in code view.
Request a data table
If you are comfortable editing HTML in the CMS and are interested in transforming an existing standard table into a data table, email wts@ucsd.edu. Include the URL (live or in the CMS) of the page that needs the code.
If you would like a styled table, but don't need the sort and search functionality of a data table, see our kitchen sink page for the code to style your table.