Web Development Documentation

EXAMPLES OF TABLES

Tables can be problematic if they are not responsive - in other words, if they do not adapt when being accessed via mobile devices.  In the below example, we show you a table at the top, how the table would look on a mobile device if it was not responsive (lower left), and how it could be made responsive so it works better on a mobile device (lower right):

Top: Desktop display. Lower left: Phone display without responsive style.  Lower right: Phone display with responsive style; notice the information is stacked vertically.

Build a Table

Our goal is to create a 4 column 4 row table for advising.

1. Click on the dropdown arrow attached to the Insert a Table icon (see #1 below)
2. Click on the grid to make the table 4 rows by 4 columns (see #2 below)

1. Click on the table icon (insert a table) 2. Select 4 cells across, and 4 cells down so that the bottom says "4x4"

Inserting and deleting rows and columns

To add or remove rows and columns, you can use the buttons located to the right of Insert a Table:

• To add a row above an existing row, click inside a cell in the existing row, then click the Insert row before button (see #1 below):
• To add a row below an existing row, click inside a cell in the existing row, then click the Insert row after button (see #2 below):
• To delete an existing row, click inside a cell in the existing row, then click the Delete row button (see #3 below):
• To add a column to the left of an existing column, click inside a cell in the existing column, then click the Insert column before button (see #4 below):
• To add a column to the right of an existing column, click inside a cell in the existing column, then click the Insert column after button (see #5 below):
• To delete an existing column, click inside a cell in the existing column, then click the Remove column button (see #6 below):

Adjust Table

Add content to table

Things to consider when entering data:

1. Do NOT hit your <ENTER> key while entering data (that could give you additional lines in each cell.
2. If you hit your <TAB> key, that will take you into the next cell
3. If you are on the last cell of the table and you hit your <TAB> key, it will add an additional row to the table.

Set Row as Header

1. Place the cursor in any cell in the row to be formatted as a header (this will usually be the top row)
2. Click the Table Cell Properties button
3. Change "Cell type" to "Header" (see #1 below)
4. Change "Scope" to "Column" (see #2 below)
5. Select "Update all cells in row" from the dropdown menu to the lower left  (see #3 below)
6. Click the Update button to the lower right (see #4 below)

Delete a Row

1. Place the cursor in a cell within the row to be deleted
2. Click the Delete Row button (see #1 below):

Make a Table Responsive

1. Place the cursor in any cell in the table, then click on the Insert a Table Icon.
2. Click the "Advanced" tab (see #1 below)
3. Select "sas-responsive-tbl" from the "Classes" dropdown menu (see #2 below)
4. Click the Update button to the lower right (see #3 below)

1. Click on the ADVANCED property tab. 2. Set CLASSES = sas-responsive-tbl 3. Hit UPDATE

Possible Issues with Tables in Responsive Mode:

• When making the table RESPONSIVE, make sure that in the TABLE PROPERTIES there are no SIZE SETTINGS (for either height or width).  That can ‘break’ the table by preventing it from dynamically resizing.
• Also verify that in the CELL PROPERTIES there are NO WIDTH SETTINGS.

Make Striped Responsive Table

The steps are the same for making a table responsive, with one addition: After selecting "sas-responsive-tbl" from the "Classes" dropdown menu, select "table-striped" from the "Classes" dropdown menu:

In the tab "Advanced," Set Classes: sas-responsive-tbl table-striped

Your responsive, striped table will look like the following example:

Desktop view of striped table. 

Remove extra <p> tags

If accidentally you hit the <ENTER> key within a table cell, you may notice that the table rows end up being different heights.  To undo this, you can remove the <p> tags from the cells.

1. Place the cursor within a cell that has a "P" in it (indicating a paragraph tag) (see #1 below)
2. Click on the "Paragraph" dropdown menu (see #2 below)
3. Select "Format"; this will remove the paragraph tag from that cell.(see #3 below)

1. Place cursor on cell that has a 'p' in the cell 2. Click on 'Paragraph' dropdown 3. Select the word "Format" 4. This will remove the p from that cell.