What is the purpose of the colspan attribute in a HTML Table ?
Last Updated :
23 Jan, 2024
The colspan attribute in an HTML table is used to specify the number of columns a cell should span horizontally. It enables you to merge multiple adjacent table columns into a single cell, making it useful for creating tables with complex layouts or merging cells across multiple columns. The purpose of colspan is as follows:
- Combine Cells: The colspan attribute helps you make a table cell cover more than one column.
- Horizontal Span: It specifies how many columns the cell should span horizontally.
- Layout Flexibility: It is useful for creating more complex and flexible table layouts.
- Used in Cells: It is used within <td> or <th> tags to define the span of a specific cell.
- Simplifies Structure: Makes it easier to structure tables with merged or grouped cells.
Syntax
This specifies that a cell should span two columns in a table. Adjust the value of to match the number of columns the cell should occupy.
<td colspan="2">
Cell content spanning 2 columns
</td>
Example: Illustrattion of the HTML Table colspan attribute.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 .0">
< title >HTML Table colspan attribute</ title >
</ head >
< body >
< table border = "1" >
< tr >
< td >R1C1</ td >
< td >R1C2</ td >
</ tr >
< tr >
< td colspan = "2" >Geeks</ td >
</ tr >
< tr >
< td >R3C1</ td >
< td >R3C2</ td >
</ tr >
</ table >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...