4.5 Working with HTML Table cells

Each row in an HTML table contains one or more cells, with each cell defined by a <td> tag. Each row has its own cells defined separately from other rows, which means that there is no such thing as a “column” in an HTML table. There is no column tag that you can use to effect the appearance of an entire column in a table. So, you must work with the <td> tags within each row.

Below are the attributes which can be used with table cells:

• align: Can be right, left, center or justify. Determines the horizontal alignment of text or images with cell. The default is left.
• bgcolor: A color name, an RGB() value or a hex value(#xxxxxx). Specifies the background color of the row.
• height: A number. Sets the height of the cell in pixels.
• valign: Can be top, middle or bottom. Determines the vertical alignment of content in cells of the row. The default is middle.
• width: A number. Sets the width of the cell in pixels or as a percent of the table width.

Note 
The height, width, and bgcolor attributes of the <td> tag are not supported in XHTML.

You would have noticed that the <td> tag shares the align, bgcolor, and valign attributes with the <tr> tag. Settings for an individual row override for the table as whole.

Merging Cells

Many times you might need to merge your cells, combining two or more adjacent cells into a single cell. The resulting merged cell can span two or more original cells horizontally, vertically, or both. You create merged cells by using the following two attributes in a <td> tag:

• Colspan: set to the number of cells to be spanned horizontally.
• Rowspan: set to the number of cells to be spanned vertically.

Let us take a simple example. This code creates a table with a basic structure of five rows and two columns. By inserting the attribute rowspan=”5” into the first <td> tag in the first row, the top left cell in the table is merged over five rows – its own row and the four below it.

<table border=1 cellpadding=5 width=100%>
<tr>
<td width=50% rowspan=5>Merged cell</td>
<td width=50%>Original cell 1</td>
</tr>
<tr>
<td width=50%>Original cell 2</td>
</tr>
<tr>
<td width=50%>Original cell 3</td>
</tr>
<tr>
<td width=50%>Original cell 4</td>
</tr>
<tr><td width=50%>Original cell 5</td>
</tr>
</table> 

Try it yourself

See the output below:

Try using in the similar way merging horizontally using colspan.

Finally, we look at at table that contains a cell that is merged both vertically and horizontally. This will include both the colspan and rowspan attributes in the <td> tag of the merged cell like given below:

<table border=”1” cellpadding+5 width=”90%”>
<tr>
<td width=15%>Original cell</td>
<td width=15%>Original cell</td>
<td width=15%>Original cell</td>
<td width=15%>Original cell</td>
</tr>
<tr>
<td width=15%>Original cell</td>
<td width=50% coslpan=2 rowspan=2>Merged cell</td>
<td width=15%>Original cell</td>
</tr>
<tr>
<td width=15%>Original cell</td>
<td width=15%>Original cell</td>
</tr>
<tr>
<td width=15%>Original cell</td>
<td width=15%>Original cell</td>
<td width=15%>Original cell</td>
<td width=15%>Original cell</td>
</tr>
</table>

Try it yourself

Next figure shows the result: