Designing Tables In HTML: HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells.
Example
<html>
<head>
</head>
<body >
<table border=1>
<tr>
<td> cell1 </td>
<td> cell2 </td>
</tr>
<tr>
<td> cell3 </td>
<td> cell4 </td>
</tr>
</table>
</body>
</html>
Height and width are attributes of
<table>
Example
<table border=1 height=400 width=400>
Table Heading : Table heading will display in bold and in center
<html>
<head>
</head>
<body >
<table border=1 >
<caption > Employee Table </caption>
<tr>
<th> Eno </th>
<th> Ename </th>
<th> Esal </th>
</tr>
<tr>
<td> 1 </td>
<td> Janardhan </td>
<td> 20000 </td>
</tr>
<tr>
<td> 2 </td>
<td> Madhu </td>
<td> 25000 </td>
</tr>
</table>
</body>
</html>
Other Table Tags
<thead> will display on Top |
| <tbody> will display in the Center |
| <tfoot> will display Last |
Example
<html>
<head>
</head>
<body >
<table border=1 >
<tfoot>
<tr>
<td> 1 </td>
<td> Janardhan </td>
<td> 20000 </td>
</tr>
</tfoot>
<tr>
<td> 2 </td>
<td> Madhu </td>
<td> 25000 </td>
</tr>
<thead>
<tr>
<th> Eno </th>
<th> Ename </th>
<th> Esal </th>
</tr>
</thead>
<tbody>
<tr>
<td> 3 </td>
<td> Suresh </td>
<td> 3000 </td>
</tr>
</tbody>
</table>
</body>
</html>
Table Attributes
Bgcolor
Background
Cell padding ( Displacement between border & content)
Cell spacing ( Displacement between Individual cells)
Border
Height
Width
Align ( Control table Position Horizontally)
Valign ( Control table Position Vertically)
Examples
1) <table bgcolor=red >
2) <table background="sunset.jpg" >
If you give both bgcolor and background for a single table then high Priority is given for background
<table bgcolor=red background="sunset.jpg" >
<table border=10 >
<table border=10 cellpadding=50 >
<table border=10 cellspacing=50 >
<table border=10 align=right >
<table border=10 align=center >
Valign will not work in HTML so we have to write CSS coding instead of Valign
EX : <table border=10 style="position:absolute;top:200;left:150" >
Attributes of TD
Bgcolor
Background
Width
Height
Col span
Row span
Align ( left , right , center )
Valign ( Top , middle , bottom)
Example 1
<table border=10 >
<tr>
<td bgcolor=red> 1 </td>
<td background="sunset.jpg"> Siva </td>
<td height =200 width = 200> 20000 </td>
</tr>
<tr>
<td> 2 </td>
<td> Brahma </td>
<td> 25000 </td>
</tr>
</table>
For Height complete Row will be affected. For Width complete Column will be affected
Example 2
<table border=10>
<tr>
<td bgcolor=red> 1 </td>
<td background="sunset.jpg"> Vishnu </td>
<td height =200 width = 200> 20000 </td>
</tr>
<tr>
<td align=right height=100 width=100> 2 </td>
<td align=center width=100> Lakshmi </td>
<td valign=top width=100 > 25000 </td>
</tr>
</table>
Table colspan and rowspan :
Example 3
<table border=1 height=300 width=300 >
<tr>
<td> Cell1 </td>
<td colspan=2> Cell2 </td>
</tr>
<tr>
<td rowspan=2> Cell4 </td>
<td> Cell5 </td>
<td> Cell6 </td>
</tr>
<tr> <td colspan=2> Cell7 </td> </tr>
</table>
Table with in Table
<html>
<head>
</head>
<body >
<table border=1 height=300 width=300>
<tr>
<td> <table border=1>
<tr>
<td> cell5 </td>
<td> cell6 </td>
</tr>
<tr>
<td> cell7 </td>
<td> cell8 </td>
</tr>
</table>
</td>
<td> cell2 </td>
</tr>
<tr>
<td> cell3 </td>
<td> cell4 </td>
</tr>
</table>
</body>
</html>
