Sunday, November 1, 2009

Colspan and Rowspan in HTML Table

Part 1: HTML
Part 2: HTML Attributes
Part 3: HTML Table
Part 4: Colspan and Rowspan

Colspan and rowspan are html attributes used to span table cells across more than a column or row. Colspan is short for “column span” or indicates “how many across” while a rowspan indicates “how many down”.

Colspan is used within a <td> tag to specify how many columns it should span.
Here, i give you the example:

<table border="1">
<tr>
<td colspan="5">Cell 1-5 combined</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</table>

and here is the outcome:
Cell 1-5 combined
Cell 1Cell 2Cell 3Cell 4Cell 5

By setting colspan to "5", the cell in the first row spans five columns. Here below is another example for better understanding:

<table border="1">
<tr>
<td colspan="3">Cell 1-3</td>
<td>Cell A</td>
<td>Cell B</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</table>

Here when you see in a browser:

Cell 1-3
Cell ACell B
Cell 1Cell 2Cell 3Cell 4Cell 5


Rowspan sets how many rows a cell spans.
Example:

<table border="1">
<tr>
<td rowspan="5">Cell 1-5</td>
<td>Cell 1</td>
</tr>
<tr>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 5</td>
</tr>
</table>

and here the result when you see in the browser:
Cell 1-5Cell 1
Cell 2
Cell 3
Cell 4
Cell 5

Not as hard as you think right?, and with a number of practices, it should get easier and you might get used to it :)


1 comment:

  1. thank u so much.really helped me in my exam

    ReplyDelete