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

Cell parameters in HTML

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)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


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.

Total Number of eaten crocodiles
2004 2005
37 11 26

 

Read also

Table parameters in HTML

Table parameters in HTML

Creating tables in HTML

Creating tables in HTML

Table alignment in HTML

Table alignment in HTML

Tables and borders in HTML

Tables and borders in HTML

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation