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
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
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
Here we note that cell is spanned (First Middle Row). in code we have written
rowspan="2". Its syntax is given below
rowspan="value"