HTML form in a table

Posted by Shek on May 17, 2008 under HTML | Be the First to Comment | Total View: 5,558 views

Sometimes, you might like to have the HTML looks neat and tidy. A table to hold all of the HTML elements in it would do the job. Here I have created an example to show you a good way to do it.

First, we have to create the HTML form because we want the whole table is inside the form not the form inside the table, we do this with <form></form>, we get:

1
2
3
4
5
<html>
<form name="aform" action="afile" method="post">
..........
</form>
</html>

Second, we need to create the table with <table></table>, I give it a border for better visual:

1
2
3
4
5
6
7
<html>
<form name="aform" action="afile" method="post">
<table border="2">
........
</table>
</form>
</html>

Third, we have to create the rows of the table with <tr></tr>:

1
2
3
4
5
6
7
8
9
<html>
<form name="aform" action="afile" method="post">
<table border="2">
<tr>
.......
</tr>
</table>
</form>
</html>

forth, we have to create the column of the table with <td></td>, we get:

1
2
3
4
5
6
7
8
9
10
<html>
<form name="aform" action="afile" method="post">
<table border="2">
<tr>
<td>first column</td>
<td>second column</td>
</tr>
</table>
</form>
</html>
first column second column

You can see the table is ready to place some HTML form elements in it, now we placed 2 text fields in it, we get:

1
2
3
4
5
6
7
8
9
10
<html>
<form name="aform" action="afile" method="post">
<table border="2">
<tr>
<td><input type="text" name="textfield1" /></td>
<td><input type="text" name="textfield2" /></td>
</tr>
</table>
</form>
</html>

Now we have placed 2 text fields into the table, with the same logic, we could add more rows and column into the table and placed HTML elements in it.

Not what you want? Try a Search

Add A Comment

*