The table is defined with <table></table> tag and a table is divided into row with <tr></tr> tag and row is divided into column with <td></td> tag. The <td>content</td> tag contain can contain page content. Please see structure below.
Now I will introduce with you with the table tags and their attributes.
Can be used to put space between cells / objects in invisible tables [If you use border="0"]
<table> <tr> <td>Place your content here.</td> </tr> </table>
Now I will introduce with you with the table tags and their attributes.
Table Border:
You have to define a table border size to display the table area or hide the table area [ie border=0.]. Please see example below.Code | Result | ||
<table border="0"> <tr> <td>Place your content here.</td> </tr> </table>Note: The table area is disappear; due to the border "0" value. |
|
||
<table border="1"> <tr> <td>Place your content here.</td> </tr> </table> |
|
||
<table border="3"> <tr> <td>Place your content here.</td> </tr> </table> |
|
||
<table border="5"> <tr> <td>Place your content here.</td> </tr> </table> |
|
Table Width:
We can use width by percentage or fixed. Let's experiment with table width.Code | Result | ||
<table boreder="1" width="50%"> <tr> <td>Place your content here.</td> </tr> </table> |
|
||
<table border="3" width="100%"> <tr> <td>Place your content here.</td> </tr> </table> |
|
||
<table border="200"> <tr> <td>Place your content here.</td> </tr> </table>Note: We are using fixed width [width="200"] here. |
|
Table Cellspacing:
Cellspacing create width between border lines.Can be used to put space between cells / objects in invisible tables [If you use border="0"]
Code | Result | ||
<table boreder="1" width="50%" cellspacing="0"> <tr> <td>Place your content here.</td> </tr> </table> |
|
||
<table border="3" width="100%" cellspacing="1"> <tr> <td>Place your content here.</td> </tr> </table> |
|
||
<table border="200" cellspacing="3"> <tr> <td>Place your content here.</td> </tr> </table> |
|
Table cellpadding:
Cellpadding create minimum space between objects and the inner table border.Code | Result | ||
<table boreder="1" width="50%" cellspacing="0" cellpadding="0"> <tr> <td>Place your content here.</td> </tr> </table> |
|
||
<table border="3" width="100%" cellspacing="1" cellpadding="5"> <tr> <td>Place your content here.</td> </tr> </table> |
|
||
<table border="200" cellspacing="3" cellpadding="10"> <tr> <td>Place your content here.</td> </tr> </table> |
|
Table Align:
The td align control the object/content position inbetween the td cell.Code | Result | |
<table boreder="1" width="50%" cellspacing="0" cellpadding="0"> <tr> <td align="left">Place your content here.</td> </tr> </table> |
|
|
<table border="3" width="100%" cellspacing="1" cellpadding="5"> <tr> <td align="right">Place your content here.</td> </tr> </table> |
|
|
<table border="200" cellspacing="3" cellpadding="10"> <tr> <td align="center">Place your content here.</td> </tr> </table> |
|
TD collspan:
The colspan make one data cell wider than others above or below. Please see example below.Code | Result | ||||
<table border="1" width="50%" cellspacing="0" cellpadding="0"> <tr> <td>Use Colspan</td> <td>Use Colspan</td> </tr> <tr> <td colspan="2"> Your content Your content Your content Your content </td> </tr> </table> |
|
TD rowspan:
The rowspan make one column cell wider than others next to it. Please see example below.Code | Result | |||
<table border="1" width="50%" cellspacing="0" cellpadding="0"> <tr> <td>Use Rowspan</td> <td rowspan="2"> Your content Your content Your content Your content </td> </tr> <tr> <td>Use Rowspan</td> </tr> </table> |
|
Table, TR, TD BG color:
You can use background color of the above tags. Please see example.Code | Result | |||||||||
- Tabale BG color:
<table border="1" width="90%" cellspacing="0"
cellpadding="0" bgcolor="#FF0000">
<tr>
<td>Heading 1</td>
<td>Heading 2</td>
<td>Heading 3</td>
</tr>
<tr>
<td>Place your content</td>
<td>Place your content</td>
<td>Place your content</td>
</tr>
<tr>
<td>Place your content</td>
<td>Place your content</td>
<td>Place your content</td>
</tr>
</table>
|
|
|||||||||
- TR BG color:
<table border="1" width="90%" cellspacing="0"
cellpadding="0" bgcolor="#FF0000">
<tr bgcolor="#33CCFF">
<td>Heading 1</td>
<td>Heading 2</td>
<td>Heading 3</td>
</tr>
<tr>
<td>Place your content</td>
<td>Place your content</td>
<td>Place your content</td>
</tr>
<tr>
<td>Place your content</td>
<td>Place your content</td>
<td>Place your content</td>
</tr>
</table>
|
|
|||||||||
- TD BG color:
<table border="1" width="90%" cellspacing="0" cellpadding="0" bgcolor="#FF0000"> <tr> <td>Heading 1</td> <td>Heading 2</td> <td bgcolor="#FFCC00">Heading 3</td> </tr> <tr> <td>Place your content</td> <td bgcolor="#00CCFF">Place your content</td> <td>Place your content</td> </tr> <tr> <td bgcolor="#99CC00">Place your content</td> <td>Place your content</td> <td>Place your content</td> </tr> </table> |
|
Now try to create a complete page with the above tags and their attributes.
Code | Result | |||||||||||
<table border="0" width="90%" cellspacing="1" cellpadding="5" align="center" bgcolor="#CCCCCC"> <tr bgcolor="#d5d5d5"> <td>Heading 1</td> <td>Heading 2</td> <td>Heading 3</td> </tr> <tr bgcolor="#f6f6f6"> <td colspan="3">I am using colspan 3 for this td.</td> </tr> <tr bgcolor="#f6f6f6"> <td rowspan="2">Using rwospan 2.</td> <td colspan="2">Using colspan 2</td> </tr> <tr bgcolor="#f6f6f6"> <td colspan="2">Using colspan 2</td> </tr> </table> |
|
No comments:
Post a comment