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.
- <!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 the colspan attribute in our code. Look at the 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 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:
- <!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"