How the tables for the forms have been set to suit the look and feel of the page

There have been three cases in the present school solution which needed tables in forms to ensure the alignment of the data fields as well as the data names in html page.


CASE 1:

Reference ScheduleAdd.php page:

The table needs four columns and four rows. There is a row with recipient field that needs to be changed everytime the user selects from the select option.

The display of the particular table row tag has to be set to 'none' or 'table row' depending upon the selected item. this can be done by javascript by using an id of that name. the script needs to be written in the body element due to the constraints on the page. This will prevent the javascript to add elements in the table body if the browser is IE. Hence for IE, the table needs to be broken down and another table needs to be added with the same column width definitions. The column width definitions are given to the table using tag.
Description of tag :

defines the attributes for the number of columns present in the table by specifying the span of the colsgroup..( implies the style to be applied.

The width of the cells is usually auto set default by the browser. but the problem stays with the div element when IE is the browser. This element can be aligned by giving the same property to the division as was given to the table (width ).

The text box will have the same attribute as the table cell(width).

The best way to define the widths will be to give them as percentages so that the alignments are not lost when the browser size is changed.

width when specified in percentages will be calculated as the percentage of the total space that is available for the element.

For example:
if a divison has div style="width:100px"

and a table is defined in it as table width="70%" , the table will have the width of 70px.

Same applies for all the fields in the table. Each cell td will be set by default the sizes according to the browser, but this can also be specified by a style element in td specifying the exact width in percentages.