Now we will try to create a table with one column having a background image



Example Code:


<table border=1 bgcolor=green>


<tr>

<td>

This is 1st row 1st column

</td>

<td>

This is 1st row 2nd column

</td>

</tr>




<tr>

<td>

This is 2nd row 1st column

</td>

<td background="./test.jpg">

This is 2nd row 2nd column
<br><br>

Nice background


</td>

</tr>


</table>


Result:

The result for above tag will be as
Table Size We can set the size of the table based of pixels or percentage. First we will see how to set size based on pixels. The attribute width and height will be used. Example Code: <table border=1 bgcolor="green" width=300 height=100> <tr height=30> <td> This is 1st row 1st column </td> <td> This is 1st row 2nd column </td> </tr> <tr height=70> <td> This is 2nd row 1st column </td> <td background="./test.jpg"> This is 2nd row 2nd column <br><br> Nice background </td> </tr> </table> Now we have set the total table width as 300 and height as 100 and split them as 30 to first row and 70 to second row. Result:

This is 1st row 1st column	This is 1st row 2nd column
This is 2nd row 1st column	This is 2nd row 2nd column Nice background

This is 1st row 1st column	This is 1st row 2nd column
This is 2nd row 1st column	This is 2nd row 2nd column Nice background

Table Size in percentage Table width and height can be set using percentage. e.g: width=60%. This means that the table with be drawn to 60% width of the current component. i.e. if we are drawing a table inside a body tag and using width as 100%, then the width of the table will be equal to the browser width. Table can be drawn inside tables. We will see about it later. Example Code: <table border=1 bgcolor="green" width=80% height=20%> <tr height=30%> <td> This is 1st row 1st column </td> <td> This is 1st row 2nd column </td> </tr> <tr height=70%> <td> This is 2nd row 1st column </td> <td background="./test.jpg"> This is 2nd row 2nd column <br><br> Nice background </td> </tr> </table> Now we have set the total table width as 80% and height as 30% and split the height as 30% to first row and 70% to second row. To explain in depth, say we have the component size as width=500,height=500 so the table will now take 80% of 500 (400) as its total width and 30% of 500 (150) as its total height. Then it will split that 150 height in to 30% for first row and 70% for second row. Result: Table Alignment Tables can be aligned to the left/right/center using the attribute "align" inside table tag. Example Code: <table border=1 bgcolor="green" width=300 height=100 align=center> <tr height=30> <td> HAI </td> <td> Hello </td> </tr> <tr height=70> <td> Table Alignment </td> <td background="./test.jpg"> This is 2nd row 2nd column <br><br> Nice background </td> </tr> </table> Result:

This is 1st row 1st column	This is 1st row 2nd column
This is 2nd row 1st column	This is 2nd row 2nd column Nice background

HAI	Hello
Table Alignment	This is 2nd row 2nd column Nice background

Aligning Content (text) in columns The content (text,image,etc..) inside the columns can be aligned horizontally using the tag attribute "align" The content (text,image,etc..) inside the columns can be aligned vertically using the tag attribute "valign" ALIGN can take the values as LEFT/RIGHT/CENTER VALIGN can take the values as TOP/BOTTOM/CENTER Example Code: <table border=1 bgcolor="green" width=80% height=30%ALIGN=center> <tr height=20%> <td align=center> center </td> <td align=right> right </td> </tr> <tr height=70% > <td valign=top> top </td> <td valign=bottom align=right background="./test.jpg"> Bottom <br><br> </td> </tr> </table> Result:

Subscribe to: Post Comments (Atom)

Search This Blog

center	right
top	bottom right