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):

Phone display without responsive. Phone display WITH responsive Layout, 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 and #3 below)

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

Resize Initial Table

1. Place the mouse on the lower right "handle" of the table and drag it down and to the right (see below)
2. This will resize the table; each cell should be the same size.

1. Place mouse on one of the 'handlers' drag 2. This will resize the table, each cell will remain the same size (will adjust later)

Inserting and deleting rows and columns

To add or remove rows and columns, you can use the buttons located to the right of Inserts a New 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 Delete Column button (see #6 below):

Adjust Table

Change width of ONE column (cell)

• Select a cell in the table
• Click the Table Cell Properties button (see #1 below):

• Change the Scope to "Column" so that your change will affect the entire column (see #1 below)
• Enter a larger number for "Width" (such as 200) to increase the width of the column to an equivalent number of pixels (see #2 below)

1. Change the SCOPE to COLUMN (this way the entire column will be affected) 2. Set the width to 200px

Add Borders to the Table

• Place the cursor in any cell, then click on the Insert a Table Icon.
• Click the check box to the right of "Border" (see #1 below)
• Click the Update button to the lower right (see #2 below)

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 new cells
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 Cells to Header

1. Place the cursor in the cell to be formatted as a header
2. Click the Table Cell Properties button
3. Change "Cell type" to "Header" (see #1 below)
4. Change "Scope" to "Row" (see #2 below)
5. Click the Update button to the lower right (see #3 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, then click on the Insert a Table Icon.
2. Click the "Advanced" tab (see #3 below)
3. Select "sas-responsive-tbl" from the "Classes" dropdown menu (see #4 below)
4. Click the Update button to the lower right (see #5 below)

1. Place cursor in cell of table 2. Click on the TABLE ICON 3. Click on the ADVANCED property tab. 4. Set the CLASSES = sas-responsive-tbl 5. 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 examples on a desktop and on a mobile device:

Desktop view sample. Responsive View Sample

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)

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.