Definition :
- table is a container which is meant for displaying the content is rows and columns fashion.
- Table is a heavy weight container so performance will be low.
Program :
<html>
<body>
<table>
<tr>
<td> <font color=”red”> Hello </font> </td>
<td> Hello1 </td>
</tr>
<tr>
<td> Hello2 </td>
<td> Hello3 </td>
</tr>
</table>
</body>
</html>
Border and Header :
Program :
<html>
<body>
<table border=”5″ bordercolor=”red” width=”100″ height=”100″>
<tr>
<td > Hello </td>
<td> Hello1 </td>
</tr>
<tr>
<td> Hello2 </td>
<td> Hello3 </td>
</tr>
</table>
</body>
</html>
. When we have to fix the screen size to use for 100% this is called as responsive web designing
Program :
<html>
<body>
<table border=”5″ bordercolor=”red” width=”100%” height=”100%”>
<tr>
<td > Hello </td>
<td> Hello1 </td>
</tr>
<tr>
<td> Hello2 </td>
<td> Hello3 </td>
</tr>
</table>
</body>
</html>
Cell Spacing :
- Cell spacing is an attribute which provide space between one cell and another cell.
Program :
<html>
<body>
<table border=”5″ bordercolor=”red” width=”100%” height=”100%” cellspacing=”0″>
<tr>
<td > Hello </td>
<td> Hello1 </td>
</tr>
<tr>
<td> Hello2 </td>
<td> Hello3 </td>
</tr>
</table>
</body>
</html>
Cell padding :
- This is meant for providing the pattern to cell on the text
Program :
<html>
<body>
<table border=”5″ bordercolor=”red” width=”100%” height=”100%” cellspacing=”0″ cellpadding=”50″>
<tr>
<td > Hello </td>
<td> Hello1 </td>
</tr>
<tr>
<td> Hello2 </td>
<td> Hello3 </td>
</tr>
</table>
</body>
</html>
Colspan :
- Column span, combining the columns.
- This is meant for occupy the column space.
Program :
<html>
<body>
<table border=”5″ bordercolor=”red” width=”100%” height=”100%” cellspacing=”0″ cellpadding=”50″>
<tr>
<td colspan=”3″> <center> Hello </center> </td>
</tr>
<tr>
<td> Hello1 </td>
<td> Hello2 </td>
<td> Hello3 </td>
</tr>
</table>
</body>
</html>
Rowspan :
- This is meant for occupy the row space.
Program :
<html>
<body>
<table border=”5″ bordercolor=”red” width=”100%” height=”100%” cellspacing=”0″ cellpadding=”50″>
<tr>
<td rowspan=”3″> <center> Hello </center> </td>
<td> Hello1 </td>
</tr>
<tr>
<td> Hello2 </td>
</tr>
<tr>
<td> Hello3 </td>
</tr>
</table>
</body>
</html>
How to provide background color :
Program :
<html>
<body>
<table border=”5″ bordercolor=”red” width=”100%” height=”100%” cellspacing=”0″ cellpadding=”50″>
<tr bgcolor=”green”>
<td rowspan=”3″> <center> Hello </center> </td>
<td> Hello1 </td>
</tr>
<tr bgcolor=”red”>
<td> Hello2 </td>
</tr>
<tr bgcolor=”yellow”>
<td> Hello3 </td>
</tr>
</table>
</body>
</html>
How to provide Heading :
Program :
<html>
<body>
<table border=”5″ bordercolor=”red” width=”100%” height=”100%” cellspacing=”0″ cellpadding=”50″>
<th colspan=”3″ bgcolor=”cyan”> WHATSMYSUGGESTION </th>
<tr bgcolor=”green”>
<td rowspan=”3″> <center> Hello </center> </td>
<td> Hello1 </td>
</tr>
<tr bgcolor=”red”>
<td> Hello2 </td>
</tr>
<tr bgcolor=”yellow”>
<td> Hello3 </td>
</tr>
</table>
</body>
</html>