REDCap: Using Tables as Fields

A step-by-step guide showing you how to create tables using HTML, add them to REDCap, and use piping to auto-fill the table as you fill out your form.

Why Insert a Table into a Field Label?

Although you cannot type into the tables, tables allow an organized method for displaying values. These values can be:
  1. A list of values, numbers, or items that could make filling out subsequent fields easier, removing the need to reference another source
  2. A list of important field values from the same instrument, removing the need to scroll up
  3. A list of important field values from other instruments, removing the need to open and reference other instruments
    Field Table Example

How to Add a Table into REDCap

Click below for step-by-step instructions.

How to Create a Table using HTML
  1. First, we must identify the tags we'll be using from highest order to lowest:
      • <center> entered first and centers the table in the field area

      • <table border="1"> creates a border for the table with a border width of 1

      • <tr> defines a new row for which all cells in that row will fall within

      • <th> defines a header cell within a row

      • <td> defines a cell within a row

      • <div style="align-text:center;"> centers the text within the cell

      • <strong> bolds the font of the cells (to be used for the column headers)

  2. To set up your table, the entire code for your table needs to be nested within the <center> and <table border="1"> codes.

      Example:

      <center>
      <table border = "1">

      ENTER CODE FOR TABLE HERE
      </table>
      </center>

  3. Next, build the first row of the table by using <tr> and nesting the header cells within it using <th> for each cell.

      Example:

      <center>
      <table border ="1">

      <tr>
      <th> Medication Name </th>
      <th> Dose </th>
      <th> Route </th>
      <th> Side Effects </th>
      </tr>

      </table>
      </center>

      Result:
      Medication Name Dose Route Side Effects

  4. Repeat this for the subsequent rows to add in your data cells, but use <td> instead of <th>.

      Example:

      <center>
      <table border ="1">

      <tr>
      <th> Medication Name </th>
      <th> Dose </th>
      <th> Route </th>
      <th> Side Effects </th>
      </tr>

      <tr>
      <td> Aspirin </td>
      <td> 324 mg </td>
      <td> Oral - Chew </td>
      <td> May increase bleeding </td>
      </tr>

      <tr>
      <td> Nitroglycerine </td>
      <td> 1 mg </td>
      <td> Sublingual </td>
      <td> Decreased BP, increased HR, and headache </td>
      </tr>

      <tr>
      <td> Epinephrine </td>
      <td> 0.3 mg </td>
      <td> IM </td>
      <td> Increased HR and possible heart problems </td>
      </tr>

      </table>
      </center>

      Result:
      Medication Name Dose Route Side Effects
      Aspirin 324 mg Oral - Chew May increase bleeding
      Nitroglycerine 1 mg Sublingual Decreased BP, increased HR, and headache
      Epinephrine 0.3 mg IM Increased HR and possible heart problems

  5. You now have all the data for your table entered, but notice how the column header cells are unbolded and uncentered. This extra code in each cell (shown below) bolds and centers the text.

      Example:

      <tr>
      <th><div style="text-align:center;"><strong>Medication Name</strong></div></th>
      <th><div style="text-align:center;"><strong>Dose</strong></div></th>
      <th><div style="text-align:center;"><strong>Route</strong></div></th>
      <th><div style="text-align:center;"><strong>Side Effects</strong></div></th>
      </tr>

      Result:
      Medication Name Dose Route Side Effects
      Aspirin 324 mg Oral - Chew May increase bleeding
      Nitroglycerine 1 mg Sublingual Decreased BP, increased HR, and headache
      Epinephrine 0.3 mg IM Increased HR and possible heart problems

  6. You may also wish to center the data cells below the column headers, and for that, just use the code: <div style="text-align:center;">ENTER CELL TEXT HERE</div> in each cell.

      Example:

      <tr>
      <th><div style="text-align:center;">Aspirin</div></th>
      <th><div style="text-align:center;">324 mg</div></th>
      <th><div style="text-align:center;">Oral - Chew</div></th>
      <th><div style="text-align:center;">May increase bleeding</div></th>
      </tr>


      Result:
      Medication Name Dose Route Side Effects
      Aspirin
      324 mg
      Oral - Chew
      May increase bleeding
      Nitroglycerine
      1 mg
      Sublingual
      Decreased BP, increased HR, and headache
      Epinephrine
      0.3 mg
      IM
      Increased HR and possible heart problems

  7. To finish editing your table, you may want to add space in between the cell text and the border. To do this, add the code &nbsp; to each side of the cell text for the widest cell in each column (ie, the cell in each column with the most characters). Repeat for as many spaces as you want between the text and the border. The below example uses 3 spaces on either side of the text.

      Example: <th><div style="text-align:center;"><strong>&nbsp;&nbsp;&nbsp;Medication Name&nbsp;&nbsp;&nbsp;</strong></div></th>

      Result:
         Medication Name       Dose       Route       Side Effects   
         Aspirin   
         324 mg   
         Oral - Chew   
         May increase bleeding   
         Nitroglycerine   
         1 mg   
         Sublingual   
         Decreased BP, increased HR, and headache   
         Epinephrine   
         0.3 mg   
         IM   
         Increased HR and possible heart problems   
  8. You now have your table!

      FINAL CODE FOR ABOVE TABLE:

      <center>
      <table border="1">

      <tr>
      <th><div style="text-align:center;"><strong>&nbsp;&nbsp;&nbsp;Medication Name&nbsp;&nbsp;&nbsp;</strong></div></th>
      <th><div style="text-align:center;"><strong>Dose</strong></div></th>
      <th><div style="text-align:center;"><strong>Route</strong></div></th>
      <th><div style="text-align:center;"><strong>Side Effects</strong></div></th>
      </tr>

      <tr>
      <td><div style="text-align:center;">Aspirin</div></td>
      <td><div style="text-align:center;">&nbsp;&nbsp;&nbsp;324 mg&nbsp;&nbsp;&nbsp;</div></td>
      <td><div style="text-align:center;">&nbsp;&nbsp;&nbsp;Oral - Chew&nbsp;&nbsp;&nbsp;</div></td>
      <td><div style="text-align:center;">May increase bleeding</div></td>
      </tr>

      <tr>
      <td><div style="text-align:center;">Nitroglycerine</div></td>
      <td><div style="text-align:center;">1 mg</div></td>
      <td><div style="text-align:center;">Sublingual</div></td>
      <td><div style="text-align:center;">&nbsp;&nbsp;&nbsp;Decreased BP, increased HR, and headache&nbsp;&nbsp;&nbsp;</div></td>
      </tr>

      <tr>
      <td><div style="text-align:center;">Epinephrine</div></td>
      <td><div style="text-align:center;">0.3 mg</div></td>
      <td><div style="text-align:center;">IM</div></td>
      <td><div style="text-align:center;">Increased HR and possible heart problems</div></td>
      </tr>
      </table>
      </center>
How to Add a Table to REDCap

Now that you know how to create a table after reading the above "How to Create a Table using HTML" instructions, here is how you add it to a REDCap Field.

  1. First, it is important to know that there should be NO SPACES or NEW LINES when typing or pasting your REDCap table code. Spaces create unwanted space above the table (shown below). It may be helpful to type your code into Notepad or Word to keep it organized like above and then delete the spaces and new lines before pasting the code into the REDCap field.

      Unwanted space example

  2. Remove the spaces/new lines in Word or Notepad. The code from the above example will look like this:

      Table without space example

  3. Next, make sure the REDCap Field Type is set to Descriptive Text, enter an identifiable Variable Name, and paste the code into the Field Label. Click Save.

      Image demonstrates the directions given above

  4. You now have your table! You can use the information in that table to fill out subsequent fields. For the example shown, it may be helpful for a subject who is filling out their own survey to know the doses, routes, and side effects of those three drugs.

      Final Table Example

Using Piping to Fill a Table

It may be helpful to populate tables with information previously entered in either the same instrument or a different instrument. You can use piping to do this. Follow the steps below.

  1. When entering your cell contents, rather than using text to fill the cell, you can use a Variable Name by entering the code [variable_name] for a field of your choice. Make sure you enter the variable name between brackets [ ]. Here is an example of a form with the variable names shown:

      Form with variable names

  2. Enter the Variable Names of your choice into the cells following the coding rules described in the above "How to Create a Table Using HTML" section.

      Example Code:

      <center>
      <table border="1">

      <tr>
      <th><div style="text-align:center;"><strong>&nbsp;&nbsp;&nbsp;Medication Given&nbsp;&nbsp;&nbsp;</strong></div></th>
      <th><div style="text-align:center;"><strong>&nbsp;&nbsp;&nbsp;Dose Given&nbsp;&nbsp;&nbsp;</strong></div></th>
      <th><div style="text-align:center;"><strong>&nbsp;&nbsp;&nbsp;Route Used&nbsp;&nbsp;&nbsp;</strong></div></th>
      <th><div style="text-align:center;"><strong>&nbsp;&nbsp;&nbsp;Time Administered&nbsp;&nbsp;&nbsp;</strong></div></th>
      <th><div style="text-align:center;"><strong>&nbsp;&nbsp;&nbsp;Administered by:&nbsp;&nbsp;&nbsp;</strong></div></th>
      </tr>

      <tr>
      <td><div style="text-align:center;">&nbsp;&nbsp;&nbsp;[medications]&nbsp;&nbsp;&nbsp;</div></td>
      <td><div style="text-align:center;">&nbsp;&nbsp;&nbsp;[dose_given]&nbsp;&nbsp;&nbsp;</div></td>
      <td><div style="text-align:center;">&nbsp;&nbsp;&nbsp;[route_used]&nbsp;&nbsp;&nbsp;</div></td>
      <td><div style="text-align:center;">&nbsp;&nbsp;&nbsp;[time_admin]&nbsp;&nbsp;&nbsp;</div></td>
      <td><div style="text-align:center;">&nbsp;&nbsp;&nbsp;[admin_by]&nbsp;&nbsp;&nbsp;</div></td>
      </tr>

      </table>
      </center>

      Result (when all spaces and lines are removed):

      Image shows resulting table from the above code
  3. That's it! You can add variable names from the same instrument or from different instruments within the same project. Since the table will not autofill in editing mode, you can test the piping by adding a new subject. Watch the video below to see how the table auto-fills as you fill out the form!




Keywords:using tables fields piping instrument form redcap   Doc ID:92776
Owner:Amy S.Group:SMPH Research Informatics
Created:2019-06-28 15:34 CDTUpdated:2022-08-09 14:11 CDT
Sites:ICTR Test, Institute for Clinical and Translational Research, SMPH Research Informatics
Feedback:  0   0