Advanced Tutorial - Custom Tables Tutorial

EZSurvey includes the ability to automatically create tables for you. However, you may want to insert your own table tags into EZSurvey. Although this is certainly more complex than inserting images into your survey forms, it is still easy enough that even those without knowledge of HTML may be able to use it.

Open the file CustomTables.EZF. (Save this file to your desktop first.) It is in the same folder that EZSurvey is installed in. This is the same as the file you may have used in the Inserting Images tutorial. Preview the file. The problem with this file is that the questions responses line up with the top of the image, rather than with the center. We will fix this problem during this tutorial so that the response buttons are vertically centered relative to the images.

  1. First, right-click on the question on the left menu named Table Setup. Choose the option labeled "Arrange questions in a table". In the window that opens, check the box labeled "Remove this table." Select SAVE. Preview the file. Notice that the table formatting is gone.

  2. Highlight the second question, which asks "How much would you like to travel..." and click New Question. Select in the question text area of the new question and set the text to: <table>

  3. Highlight the last question, "Japan", and add another question. Make the question text here read: </table>

  4. Make sure that ALL of the <table> tags have their question types set to "Plain Text." First, double-click on each question between the "<table>" and the "</table>" and check the option "No line break after the question text", also check this option on the opening and closing table tag questions. Note that the <table> tag marks the beginning of a table, and the </table> marks the end of a table. You must have these tags at the beginning and end of a table for it to appear properly. The Netscape browser will not display a table that is missing the closing tag.
  5. Go to each of the four questions with country images and add the following to them:

    The questions should now look something like:

    <table width="100%">
      <tr align="center">
        <td> <img src="france.jpg"> <br> <br>
    </table>

  6. If you preview the file now, it will look pretty good. Here is the explanation of what the HTML tags do:

    <tr valign="center">: <tr> is the Table Row tag. It denotes the beginning of a new row. valign is the vertical alignment. Writing valign="center" tells the browser to arrange the elements so that they are vertically centered in the row (mid-way between the top and bottom).

    <td>: This is the Table Data tag. You use it before each object you wish to put into the table. The reason that we put one both before and after the questions is so that the responses will appear across from the question, not under it - the responses will be placed in a new column rather than appear in the same one as the question.

  7. To further improve the table's appearance, there is one more step. Go to each of the evennumbered questions (the second and fourth questions) and delete the text that reads <tr valign="center">. If you preview the form again, you'll see that you've just changed the table so that it uses two rows instead of four. This is because each place where a <tr> tag exists, a new row begins. To make this layout really work, though, you should go back up to the <table> tag at the top and change it to read <table width="100%">. Now the table stretches across the entire width of the browser; writing width="100%" creates a table with a width that is 100% of the screen width available. If you want to make sure your form was done correctly, open FinalTable.EZF to check your work. (Save this file to your desktop first.) You now know how to add your own custom tables to your EZSurvey forms!

    See also...