What is the purpose of the colspan attribute in a HTML Table ? - Coding

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:

Screenshot-2024-01-23-162426

Reffered: https://www.geeksforgeeks.org

HTML

Related
How do you create a numbered list in HTML 5 ?
Explain the difference between head Tag and header Tag in HTML5 ?
HTML Table Borders
Browser Object Model
HTML Link Colors

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	17