Cell parameters in HTML

Thanks to many properties of the cell, you can change the look and design of the table.
Table 1 shows the parameters that can be added to the tags tr, th and td.
Table 1. Cell parameters.
Attribute | Value | Description | Example |
---|---|---|---|
align |
left | Alignment of the contents of the cell | <td align="center"> |
background | URL | Sets background image in a cell | <td background="pic.gif"> |
bgcolor | #rrggbb | Background color of a cell | <td bgcolor="#ff9900"> |
valign |
top | Vertical alignment of the contents of the cell | <td valign="top"> |
width |
n | The minimal width of the cell can be set in pixels or percentage | <td width="90%"> |
height |
n | The minimal height of the cell can be set in pixels or percentage | <td height="37"> |
The usage of these parameters is shown in example 1.
Example 1. Changing the appearance of the cell.
<table width="100%" border="1" cellspacing="0" cellpadding="4"> <tr bgcolor="#ffcc00"> <td width="18%">Total</td> <td width="40%">Forest</td> <td width="42%">Wood</td> </tr> <tr> <td bgcolor="#cccccc">83</td> <td>49</td> <td>34</td> </tr> <tr> <td bgcolor="#cccccc">98</td> <td>32</td> <td>76</td> </tr> </table>
The result of the example is given below.
Total | Forest | Wood |
83 | 49 | 34 |
98 | 32 | 76 |
Parameters used only for the tags th and td, are given in table 2.
Table 2. Cell properties.
Attribute | Value | Description | Example |
---|---|---|---|
nowrap | Disables line brake in the text | <td nowrap> |
|
colspan | n | Number of merged columns | <td colspan="3"> |
rowspan | n | Number of merged rows | <td rowspan="3"> |
Note:
- The cell content by default is left-aligned horizontally and when centered - vertically.
- Parameters of the tag td have higher priority than the tag parameters tr, and cell properties are higher then the properties of the table.
- Internet Explorer may not implement all the parameters attached to the tag tr. In that case, use the same arguments, but to tags td or th.
Example 2 shows how to merge cells horizontally and vertically using parameters colspan and rowspan.
Example 2. Usage of cell parameters.
<table width="60%" border="1" cellspacing="0" cellpadding="4"> <tr> <th width="27%" rowspan="2" bgcolor="#cccccc">Total</th> <th colspan="2" bgcolor="#cccccc">Number of eaten crocodiles</th> </tr> <tr> <th width="37%" bgcolor="#cccccc">2004</th> <th width="36%" bgcolor="#cccccc">2005</th> </tr> <tr> <td>37</td> <td>11</td> <td>26</td> </tr> </table>
The result of the example is given below.
Total | Number of eaten crocodiles | |
---|---|---|
2004 | 2005 | |
37 | 11 | 26 |