Completing Temporary Web Page Processing - Panel Layout
(Page 2 of 4 )
The panel (HTML Form) that we have seen so far has very few elements. It is simple. When you need more elements and a broader Form, you need to give consideration to the layout. The layout I want use for the analysis has the components for the Form in the middle of the panel. It can have some text or images on the left, and it can also have some text or images on the right.
So there are three sections. The section on the left has some text or images. The section in the middle has the Form elements. The section on the right has some text or images. The panel element is still the Form.
I have made the Form broader. I have given the Form a width of 900px. In order to have the three sections, I have used an HTML Table of one row and three cells. The cells are for the three sections. This is the table and its contents:
<table>
<tbody>
<tr>
<td width="250">
Some Text or image go here - left. <br />
<span style="background-color:chocolate; font-weight:bold">A dummy SPAN Element</span>
</td>
<td width="250">
Label 1 <input id="I1" type="text"><br />
Label 2 <input id="I2" type="text">
</td>
<td width="250">
Some Text or image go here - right. <br />
</span><span style="background-color:chocolate; font-weight:bold">A dummy SPAN Element</span>
</td>
</tr>
</tbody>
</table>
The width of the table is less than the width of the Form element. This is because tables have padding, borders and margins, and these values depend on the particular browser. Make sure you give the table cells definite widths to properly space out the sections.
If you want the table to be of the same size as the Form, then you have to give the table zero padding, zero border and zero margin; there should also be zero space between the cells, zero cell padding and zero cell borders. Remember, these values add to the overall size (width) of the table. These values are not necessarily the same for different browsers.
In the previous Form, the form elements were in an HTML Table. Here, the Form elements are in the middle cell in the above Table. I have put some dummy elements in the first cell and third cell.
This HTML Table goes into the position of the previous HTML Table.
Next: Elements to Use in the Table Cells >>
More HTML Articles
More By Chrysanthus Forcha
