DRAFT
Caltech Logo
Caltech Sites
Caltech Sites  /  Block Gallery  /  Table Block

Table Block

If you have content that should be displayed as a table, we now have a stand-alone table block. For data that needs the full width of your page, you may place the table block at the top level of an Interior Page. The table block is also available in the main column of the left sidebar layout and the centered one column layout and in both columns of the two column layout.

Once you place the table block in your page, the admin interface for the block looks like this:

Table Block Admin

Adding Data

The meat of the block is in the "Table" field, where you add your tabular data.

Table Block Edit Rows

If you right click on any of the cells in the table, you'll get a menu that allows you to insert and remove columns and rows in much the same way as you would do in Word or Excel.

Cell data is plain text (not rich text), but you may include <a>, <b>, <strong>, <i>, <em>, <sup>, and <sub> tags. All other tags will be stripped on save.

Most places in Caltech Sites allow you to add links by choosing the page or pasting a url into an input form. To insert a link into a table cell, you need to type in the HTML yourself. The general format for a link is:  <a href="url">link text</a> If you are linking to a page on your site, please use a relative link which should look something like:

<a href="/people/ralph-adolphs">Ralph Adolphs</a>

NOTE: links inserted using our page chooser widget or the "Internal link" option in the RichText field's link popup will update themselves if you move a page to a new location on your site. But the links you manually enter into a table cell will not automatically adjust. You will need to edit the table again to update the link to point to the new location.

Column widths

Normally, the columns in your table will expand or contract to fit their content. If you want columns with specific widths (because you are lining up several tables on one page, perhaps), use the Column widths list. Add one entry for each column in your table, enter a percentage width for that column, and ensure that all your percentages add up to 100%. Here's an example for 3 columns:

Table Block Column Widths

Table Settings

  • Enable search: checking this box will add a table specific search box above the table header that will allow visitors to the page to filter the table rows by the search terms.
  • Enable pagination: checking this box will paginate your table, restricting the number of rows shown to a reasonable amount, yet allowing people to page back and forth through all rows. This is useful when you have many rows in your table.
  • Row header: checking this box styles the first row in your table as table headers; you'll need to enable this if you want to allow people to re-order the tables by columns.
  • Enable sorting: checking this and Row header will allow people to click on column headers for your table and re-order all rows to be sorted by that column.
Table Display