Parameters cells

Table. 1 shows the parameters that can be added to the tag <TR>, <TH> and <TD>.

Table. 1. Cell Options
Property Value Description Example
align left
right
center 		Align cell contents. <Td align = "center">
background URL Sets the background image in the cell. <Td background = "pic.gif">
bgcolor
#rrggbb Cell background color. <Td bgcolor = "# ff9900">
valign
top
midlle
bottom 		Align the contents of the cell height. <Td valign = "top">
width n
n% 		The minimum width of the cell, can be set in pixels or percentages. <Td width = "90%">
height n
n% 		The minimum height of the cell, can be set in pixels or percentages. <Td height = "37">

Using some of the parameters shown in Example 1.

Example 1. Changing the type of cells

valid HTML
<DOCTYPE HTML PUBLIC! "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Cell Type </ title>
</ Head>
<Body>
<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%"> Tree </ 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>
</ Body>
</ Html>

The result of the example is shown below.

Fig. 1

Fig. 1. A table decorated with the help of the parameter bgcolor

Parameters used only for tag <TH> and <TD>, are listed in Table. 2.

Table. 2. Cell Properties
Property Value Description Example
nowrap Prevents line wrapping in the text <Td nowrap>
colspan n Number of columns united <Td colspan = "3">
rowspan n Number of lines merged <Td rowspan = "3">

Note

  • The contents of the cells by default left-aligned horizontally and in the center - vertical;
  • Parameters tag <TD> have a higher priority than the parameters of the tag <TR>, and the properties of the cells above the properties of the table itself.
  • Internet Explorer browser can not use some of the parameters applied to the tag <TR>. In this case, use the same arguments, but the tag <TD> or <TH>.

Example 2 shows the merging of cells horizontally and vertically by using parameters and colspan rowspan.

Example 2: Using the parameters of cells

valid HTML
<DOCTYPE HTML PUBLIC! "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Cell Options </ title>
</ Head>
<Body>
<Table width = "90%" border = "1" cellspacing = "0" cellpadding = "4">
<Tr>
<Th width = "27%" rowspan = "2" bgcolor = "# cccccc"> Total </ th>
<Th colspan = "2" bgcolor = "# cccccc"> The number of eaten crocodile </ 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>
</ Body>
</ Html>

The result of this example is shown in Fig. 2.

Fig. 2

Fig. 2. Merge cells horizontally and vertically

© Policy Copyright www.htmlbook.ru