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: