Colspan And Rowspan in HTML5

Here, we will learn the use of colspan and rowspan in HTML5.

Introduction: When we work with table then many times we need a different table format. There are two important attributes for this. They are

colspan: It is used to span a cell into multiple columns.

rowspan: It is used to span a cell into multiple rows.

Now we create a table by writing following code.

<!doctype html >
<html>
<table border="3" cellspacing="2" cellpadding="20">
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></th>
<td></th>
<td></th>
<td></th>
<tr>
<td></th>
<td></th>
<td></th>
<td></th>
</tr>
</html>

The output will look like as below

table in html

colspan

We use colspan attribute in our code. Look at following code.

<!doctype html >
<html>
<table border="3" cellspacing="2" cellpadding="20">
<tr>
<th colspan="2"></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></th>
<td></th>
<td></th>
<td></th>
<tr>
<td></th>
<td></th>
<td></th>
<td></th>
</tr>
</html>

We run  this code. The output will look like as below figure

colspan in html

 

We note that there are three header column and first cell is spanned (Top Left Corner Cell). Because we have written colspan="2". Its syntax is given below

                                                colspan="value"

rowspan

Now we rowspan in our code. we write followinf code.


<!doctype html >
<html>
<table border="3" cellspacing="2" cellpadding="20">
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></th>
<td></th>
<td></th>
<tr>
<td></th>
<td></th>
<td></th>
<td></th>
</tr>
</html>

The output will look like as below

rowspan in html

Here we note that cell is spanned (First Middle Row). in code we have written rowspan="2". Its syntax is given below

                                                            rowspan="value"