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 1 | Cell 2 | Cell 3 | Cell 4 | Cell 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 A | Cell B | ||
Cell 1 | Cell 2 | Cell 3 | Cell 4 | Cell 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-5 | Cell 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 :)
thank u so much.really helped me in my exam
ReplyDelete