Table is much help in performing arrangement of web pages compositions and most assistive in compiling
a document in HTML format. Especially for web page construction an its interface graphically.
The Table tag will be seen as the following:
| < Table> </ Table> |
In the block we express amount of table row and in the table row we express amount of column to use.
To create table row, use table row tag in block of table tag.Followings are the syntax:
| < Tr> </ Tr> |
While to create table data <Td> tag, use table data tag in block of table tag. This is the place where you want your information/texts to appear.
Followings are the syntax:
| < Td>Your data here</ Td> |
Note : This table data tag is placed between table row tag. Hence, to create a table data, the procedures are:
| < Tr> < Td>Your data here</ Td> </ Tr> |
Hence, to make one cell table (combination of one row and one column), Followings are the syntax :
| < Table> < Tr> < Td>Your data here</ Td> </ Tr> </ Table> |
Enhancing some <Td> again will enhance amount of column in your Table.
| < Table border="1" background="free-html-tutorial.gif"> < Tr> < Td>SPECIES</ Td> < Td>FAMILY</ Td> </ Tr> </ Table> |
Where border, background, and bgcolor are attributes of the table, border is used to set table border
thickness. Background is an image to become background of the table. While bgcolor is used to set
table background if the image file is unavailable.
The code will come up in our page as the following:
| SPECIES | FAMILY |
This is other example:
| SPECIES | X |
| FAMILY | Y |
While the codes are:
| < Table border="1" background="free-html-tutorial.gif"> < Tr> < Td>SPECIES</ Td> < Td>FAMILY</ Td> </ Tr> < Tr> < Td>X</ Td> < Td>Y</ Td> </ Tr> </ Table> |
And if you set the border properties as 0 (Zero), then you would have un-bordered table.
Following is the output:
| SPECIES | X |
| FAMILY | Y |
To make a wide column through other columns, use colspan (column expand) tag followed by value of how many column to be through.
| < Table border="1" border="1"> < Tr> < Td colspan="2"><Center><B>Database</B></Center></ Td> </ Tr> < Tr> < Td>Name:</ Td> < Td>George</ Td> </ Tr> < Tr> < Td>Marriage</ Td> < Td>Married</ Td> </ Tr> < Tr> < Td>Education</ Td> < Td>University</ Td> </ Tr> </ Table> |
The Table will be seen as following:
| Database | |
| Name | George |
| Marriage | Married |
| Education | University |
While to make a wide row through other rows, use is rowspan (row expand) tag followed by value of how many row to be through. Following is the example:
| Database | |
| Name | George |
| Address | Beijing |
| China | |
While the codes are:
| <table border="1" width="259"> <tr> <td colSpan="2" vAlign="top">Database</td> </tr> <tr> <td vAlign="top" width="51%">Name</td> <td vAlign="top" width="49%">George</td> </tr> <tr> <td vAlign="middle" width="51%" rowspan="2">Address</td> <td vAlign="top" width="49%">Beijing</td> </tr> <tr> <td vAlign="top" width="49%">China</td> </tr> </table> |
Sometimes you need to set the table caption too. Following is the example:
| Database | |
| Name | George |
| Address | Beijing |
| China | |
While the tags are:
| <table border="1" width="259"> <caption>Database Caption</caption> <tr> <td colSpan="2" vAlign="top">Database</td> </tr> <tr> <td vAlign="top" width="51%">Name</td> <td vAlign="top" width="49%">George</td> </tr> <tr> <td vAlign="middle" width="51%" rowspan="2">Address</td> <td vAlign="top" width="49%">Beijing</td> </tr> <tr> <td vAlign="top" width="49%">China</td> </tr> </table> |
While to make table header, use <Th> tag to substitute <Td> tag. Following is the example:
| <table border="1" width="259"> <caption>Database Caption</caption> <tr> <th colSpan="2" vAlign="top">Database</th> </tr> <tr> <td vAlign="top" width="51%">Name</td> <td vAlign="top" width="49%">George</td> </tr> <tr> <td vAlign="middle" width="51%" rowspan="2">Address</td> <td vAlign="top" width="49%">Beijing</td> </tr> <tr> <td vAlign="top" width="49%">China</td> </tr> </table> |
While the out put is:
| Database | |
|---|---|
| Name | George |
| Address | Beijing |
| China | |
Table in the table:
Table in the table procedure is usually utilized to format web page so that your web page would look
smooth. This will be works since HTML tags can be run in the table tags.
Following is the example:
Followings are the codes:
| <table width="100%"> <tr> <form method="POST" action="email"> <td width="54%">Name</td> <td width="46%"><input type="text" size="20" name="Name"></td> </form> </tr> <tr> <td width="54%">Address<</td> <td width="46%"><input type="text" size="20" name="Addres"></td> </tr> <tr> <td width="54%"> </td> <td width="46%"> </td> </tr> <tr> <td width="54%"> </td> <td width="46%"><input type="submit" value="Send" name="submit"> <input type="reset" value="Reset Data" name="Reset"></td> </tr> </table> |
More HTML and CSS: 
