Topic: How to create table with different size? How to split the size of the
table columns?
Explanation:
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:
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 |
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.
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:
|
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 |
.jpg)
