Wednesday, November 13, 2013

Table Background in HTML

You can set table background using of the following two ways:
  1. Using bgcolor attribute: You can set background color for whole table or just for one cell.
  2. Using background attribute: You can set background image for whole table or just for one cell.
NOTE: You can set border color also using bordercolor attribute.

Here is an example of using bgcolor attribute:
<table border="5" bordercolor="green" bgcolor="gray">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td>
<td bgcolor="red">Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>

This will produce following result:
Column 1 Column 2 Column 3
 Row 1 Cell 1

 Row 1 Cell 2 Row 1 Cell 3
 Row 2 Cell 2 Row 2 Cell 3
 Row 3 Cell 1


Table height and width:
You can set a table width and height using width and height attributes. You can specify table width or height in terms of integer value or in terms of percentage of available screen area. Following is the example:

<table border="1" width="400" height="150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>


This will produce following result:
Row 1, Column 1

 Row 1, Column 2 
Row 2, Column 1

 Row 2, Column 2 

No comments:

Post a Comment