Colspan And Rowspan in HTML5

  • A K
  • A K
  • Updated date, Oct 18, 2019

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"