HTML
Design you web page by yourself
Tables
Part12
When working with tables you will need sometimes to merge cells. Cells merging is accomplished by the use of colspan and rowspan attributes associated with the <td> tag.
Syntax is
<td colspan="n"> text</td>
Where n is the number of column to span
<td rowspan="n">text</td>
Where n is the number of rowa to span
<td colspan="n" rowspan="n">text</td>
A combination of colspan and rowspan can also be obtained
Example
<html>
<head>
<title>Table with merged cells</title>
</head>
<body>
<h1 align="center">Table with merged cells</h1>
<p> This is a table with merged cells.
<p>
<table border="1" align="center" width="85%" >
<tr>
<td colspan="3" bgcolor="#cae0ff" align="center">Sales Report</td>
</tr>
<tr>
<td align="center">Products Ctegory</td>
<td align="center">Product Name</td>
<td align="center">Sales $</td>
</tr>
<tr>
<td rowspan=3>Soft Drinks</td>
<td>Coca cola</td>
<td align="right">$840</td>
</tr>
<tr>
<td>7 up</td>
<td align="right">$1700</td>
</tr>
<tr>
<td>RC</td>
<td align="right">$2900</td>
</tr>
<tr>
<td rowspan=3>Ice creams</td>
<td>Milk</td>
<td align="right">$1800</td>
</tr>
<tr>
<td>Chocolate</td>
<td align="right">$752</td>
</tr>
<tr>
<td>Strawberry</td>
<td align="right">$350</td>
</tr>
<tr>
<td rowspan=3>Fruites</td>
<td>Apples</td>
<td align="right">$890</td>
</tr>
<tr>
<td>Oranges</td>
<td align="right">$552</td>
</tr>
<tr>
<td>Banana</td>
<td align="right">$650</td>
</tr>
<tr>
<td colspan="2" align="center" bgcolor="#bbaaff">Total Sales</td>
<td align="right" bgcolor="#bbaaff" >$5520</td>
</tr>
</table>
</body>
</html>
