Colspan And Rowspan in HTML5

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 the following code.
  1. <!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 the colspan attribute in our code. Look at the following code.
  1. <!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 is three header column and the 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 the following code:
  1. <!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"