Professional > Interview scripting > Writing interview scripts > Page layout facilities > Templates > Grid templates > Overall characteristics of the grid table
 
Overall characteristics of the grid table
The interviewing program converts the formatting instructions in the grid template into standard HTML code which it then uses to lay out the grid on the interview page. You can specify the following characteristics that will affect the overall appearance of the grid:
Grid width
Grid alignment
Borders
Space between rows and columns
Space around cell texts.
If you want to define any of these characteristics, start by creating a tableDef section in which to place the necessary statements:
<tableDef> ... </tableDef>
Grid width
To set the width of the grid relative to the page width, type:
<width>
  <widthFormat>
type</widthFormat>
  <value>
number</value>
</width>
where
type defines how to interpret the value parameter, and is either absolute if value is the width of the column in pixels, or percent if value is the column width as a percentage of the total grid width. The default is percent.
number is the width of the table in the given format. The default is 100.
If the respondent resizes the browser window, the grid’s overall width and the column widths increase or decrease proportionally.
If you are using a table to lay out the whole page, so that the grid becomes just another cell of a larger table, the width that you set for the grid affects that part of the table only. The sections of the table that contain the question text and navigation buttons remains at the default width or the width specified for those parts of the table.
Grid alignment
To define the horizontal position of the grid on the page, type:
<align>position</align>
where
position is left, right, or center. The default is left alignment.
Borders
The interviewing program does not display borders around grids or around the cells in a grid. To draw a border around the grid and each cell in the grid, type:
<borderSize>number</borderSize>
where
number is the width in pixels of the border. A value of 0 suppresses the border.
The interviewing program does not set the border color so the browser’s default applies.
Note Drawing a border around a grid forces borders around the cells of that grid. You cannot have a grid that has a border but whose cells have no borders.
Space between rows and columns
The interviewing program uses the standard HTML rules for table layout when displaying grids. Depending on the number of columns in the grid, the width of the columns and the amount of column heading text to be displayed in each column, this may or may not result in a layout that is attractive and easy to follow. If you find that the column headings seem to be running into one another, so that it is not clear where one column heading ends and the other begins, you can increase the amount of space between the columns. Not only will this make the columns easier to see, but it will also reduce the column widths slightly which may improve usability.
The same problem can apply to rows. If the grid is small, you may prefer to increase the space between the rows so that the grid fills more of the page.
To set the amount of horizontal and vertical space between each cell, type:
<cellSpacing>number</cellSpacing>
where
number is the number of pixels of space to leave between the rows and columns of the grid.
If the grid has different colors defined for the grid background and the cell background, and <cellSpacing> is greater than 0, the spaces between the cells will be shown in the grid background color.
Note Cell spacing applies to all aspects of each cell of the table. You cannot increase the horizontal or vertical spacing in isolation, nor can you specify different spacing for rows and columns.
Space around cell texts
If you do not want to alter the space between rows and columns, another way of improving readability is to increase the amount of space between the cell margins and the text. By increasing the amount of white space here, you may force the column or row text to be spread over more lines so that it no longer runs into the text for the next row or column.
To increase the space around cell texts, type:
<cellPadding>number</cellPadding>
where
number is either the number of pixels or the percentage of space to leave above, below and on each side of the text. Numbers without percentage signs are assumed to be pixels.
See also
Grid templates