Colspan and Rowspan
A table is divided into rows and each row is divided into cells. In some situations we need the Table Cells span across (or merged) more than one column or row. In these situations we can use Colspan or Rowspan attributes.
Colspan
The colspan attribute defines the number of columns a cell should span (or merge) horizontally. That is, you want to merge two or more Cells in a row into a single Cell.
The above code will merge two Cells as one Cell horizontally.
The above image shows two tables . The first HTML Table has 2 rows and 2 columns in each row. The second HTML Table has 2 rows and 1 column in first row and 2 column in second row. In the second Table we merge first two Cells horizontally using Colspan attribute. You can see the second Table HTML code below.
How to colspan ?
HTML Source Code :
Colspan (Column Span) merged Cells horizontally that is from left to right. The default value of Colspan is 1 .
Rowspan
The rowspan attribute specifies the number of rows a cell should span vertically. That is , you want to merge two or more Cells in the same column as a single Cell vertically.
The above code will merge two Cells as one Cell vertically.
The above picture shows two tables. First table has 2 rows and each rows has 2 columns. The second Table has 2 rows in the first column and ony 1 row in the second column. That is we use Rowspan attribute vertically in the second column. You can see the second Table HTML code below.
How to Rowspan ?
HTML Source Code :
Rowsapn merged Cells vertically , that is from top to bottom.