Data Table

Tables should only be used to present data, and should not be used as a formatting tool. If you are unsure about the appropriate situations to use a table, feel free to reach out to the Web Services team at webservices@georgetown.edu and we can advise you.

To insert a data table, click on the “+” button to add a block and type in “data table” in the search bar.

Data Table block icon outlined in red under the block search bar.

Upon adding the block, you’ll have the option to manually create a table or create one via a CSV upload.

View of the WordPress editor with the data table creation options (manual or data import) showing.

To import data via a CSV file, click the “Select CSV file” text. Then, select the desired file and click “Import”.

For manual creation, you will be asked to specify the number of columns and rows the table will have. You can do this by moving the slider or by typing the number in the text field. You can add between 2-10 columns and 2-100 rows per table. Click the “Create” button.

Row count and column count scrollers indicating how many numbers of rows and columns in data table.

Once you have the blank table you can begin to add content by clicking on the desired cell and typing.

View of a two by two data table with the top left cell selected.

You can add a table caption that will display below the data table and describe its contents in the “Table caption” field. This is especially important if you have more than one table on a page. The table caption can be especially helpful for users who utilize screen readers to navigate your website.

To add or delete rows or columns from the table, click the table operations icon in the upper left corner.

Table operations icon outlined in red in the data table settings.

Additional Settings

In the block settings on the right side of the page, you are able to add the first column as a header and/or create a filterable table by toggling the “Header column” and/or “Filter option” on.

The block settings tab for the Data Table block. The Table Options section which includes toggles for the header column and filter option are is highlighted in a red box.

Toggling on the Filter option will add a keyword filter form above the data table.

The data table block works the same on Whitehaven Georgetown sites as well as DP sites (i.e. the main site, McCourt, and SFS).

Examples

Data Table with a Header Column

Table 1: Demographic information about members
NameRoleYears ActiveBirthdayHometown
AgnesPresident12January 2 Washington, DC
BertSecretary8February 9 New Orleans, LA
CharlieMarketing Manager 6March 16 Los Angeles, CA

Filterable Data Table

Table 1: Demographic information about members
NameRoleYears ActiveBirthdayHometown
AgnesPresident12January 2 Washington, DC
BertSecretary8February 9 New Orleans, LA
CharlieMarketing Manager 6March 16 Los Angeles, CA