Tuesday, December 31, 2013

Using Tables>>Table Row Span - (PART_27)

Topic:  I want a table where one my column will be of 2 rows wide while others are as usual?                 How to span the column rows in html tables?

Explanation:

Row Span
While using table, it will be need of time that some of our columns should be spanning across few rows. It can be easily achieved by using row span.
 

For example we have a table with three rows and three columns. Now I want the second column to be of two rows height.

Demo:
First Row
.
.
second Row
2
2
Third Row
3
3
First Row
spanned
.
second Row
2
Third Row
3
3
Table
Spanned Table



Here we have spanned one of the column in to two rows. It is done using the attribute rowspan="x". In this case, as the column should be spanned to two rows we will be adding a attribute "rowspan=2".

As we have spanned a column in first row to two rows, we should add only two columns in second row, as one more column will be spanned from first row.
 

Tag:
<table>
<tr><td>First Row</td>
 <td rowspan=2> spanned </td> <td> . </td></tr>
<tr><td>second Row</td><td> 2 </td></tr>
<tr><td>Third Row</td><td> 3 </td><td> 3 </td></tr>
</table>