Skip to Main Content
Research Guides@Tufts

The Libguide of Libguides: 2. Custom Table Styles

Visual Style Guide

On This Page

  • Using Premade CSS Classes

Visual Style Guide

Using Premade CSS Styles

Are you looking to add a little extra design sparkle to your guide. Let's face it. (X)HTML tables, while perfect for presenting tablular data, can be pretty ugly. Below are some premade CSS style treatments that you can apply to your tables simply by adding a class in the HTML editor in LibGuides. For these examples, I am borrowing some table content from the Company Database Guide authored by Karen Vagts:

Example 1: The Beige Class

The "beige" class provides basic borders and shading in accordance with the LibGuides style palette. Text within the tables cells is center aligned

Factiva Companies Module General Business
ASAP /
Infotrac		 Hoovers ISI Emerging
Markets		 LexisNexis
Company Dossier		 Mergent Online Reference
USA
Yes Yes Yes Yes Yes Yes Yes
Limited No Not with subscription Yes Yes Yes Yes
Yes Yes Yes Only if exposure in emerging markets Yes Yes Yes
Yes Yes No Yes, for emerging markets Yes Yes No
No No Yes No Yes Yes No
No No Yes NA Yes Yes No
Yes In investment reports Yes Yes Yes Yes Yes
No In investment reports Yes Yes Yes Yes No
No Yes Yes No Yes Yes Yes

Example 2: The BeigeLeft Class

The "beige" class provides basic borders and shading in accordance with the LibGuides style palette but with left-aligned text.

Factiva Companies Module General Business
ASAP /
Infotrac		 Hoovers ISI Emerging
Markets		 LexisNexis
Company Dossier		 Mergent Online Reference
USA
Yes Yes Yes Yes Yes Yes Yes
Limited No Not with subscription Yes Yes Yes Yes
Yes Yes Yes Only if exposure in emerging markets Yes Yes Yes
Yes Yes No Yes, for emerging markets Yes Yes No
No No Yes No Yes Yes No
No No Yes NA Yes Yes No
Yes In investment reports Yes Yes Yes Yes Yes
No Yes Yes Yes Yes No
No Yes Yes No Yes Yes Yes

Example 3: The Beige Class with RowHeaders

Both the "beige" and "beigeLeft" classes include an optional td-level class called rowhead. This is handy for complex tables where both an x and y axis are being displayed.

Factiva Companies Module General Business
ASAP /
Infotrac		 Hoovers ISI Emerging
Markets		 LexisNexis
Company Dossier		 Mergent Online Reference
USA
Public (Listed) Yes Yes Yes Yes Yes Yes Yes
Private (Unlisted) Limited No Not with subscription Yes Yes Yes Yes
U.S. Yes Yes Yes Only if exposure in emerging markets Yes Yes Yes
Global Yes Yes No Yes, for emerging markets Yes Yes No
Executive Biographies No No Yes No Yes Yes No
SEC EDGAR Filings No No Yes NA Yes Yes No
Financial Data & Ratios Yes In investment reports Yes Yes Yes Yes Yes
Industry Reports No In investment reports Yes Yes Yes Yes No
Industry Code Searching No Yes Yes No Yes Yes Yes

Example 4: The Stripe Class

The "stripe" class (and corresponding JavaScript that runs behind the scenes for you) is popular alternative for increasing readability of content-heavy tables.

Factiva Companies Module General Business
ASAP /
Infotrac		 Hoovers ISI Emerging
Markets		 LexisNexis
Company Dossier		 Mergent Online Reference
USA
Yes Yes Yes Yes Yes Yes Yes
Limited No Not with subscription Yes Yes Yes Yes
Yes Yes Yes Only if exposure in emerging markets Yes Yes Yes
Yes Yes No Yes, for emerging markets Yes Yes No
No No Yes No Yes Yes No
No No Yes NA Yes Yes No
Yes In investment reports Yes Yes Yes Yes Yes
No In investment reports Yes Yes Yes Yes No
No Yes Yes No Yes Yes Yes

 

Applying these styles to your tables

  1. In 'Edit Mode', click the edit text link to open up the Rich Text Editor. You should see your table.
  2. Switch to the plain text editor by chosing the plain text editor link. This link is above rich text editor controls in the second bullet point of instructions.
  3. Here you should see your HTML code. Simply add class="beige" to table tag if, as in this example, you wish to style your table in the beige class. The full table tag would look something like this:
  4. Note that there may other attributes in your table tag. These may have been created by choices you made in the rich text editor. Don't worry about those.

    5. Special instructions for applying rowheaders (Example 3)

    If you want to apply row headers, you must add the .rowhead class to each table cell you wish to apply this style rule to. The process is the same as above but instead of adding a class to the table tag you will add a class to the <td> tag (typically the first one in each table row). For example, your code would look like: <tr> <td class="rowhead">