Home / Articles / Programming languages / Markup languages / HTML & CSS / Cell parameters in HTML

Cell parameters in HTML

Currently 0 out of 5 Stars.
1
2
3
4
5

Rating: 0/5 (0 votes cast)

Sep 20th 2012 02:25 pm 285654 0778

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 right center	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 midlle bottom	Vertical alignment of the contents of the cell	<td valign="top">
width	n n%	The minimal width of the cell can be set in pixels or percentage	<td width="90%">
height	n 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.