articles

Home / DeveloperSection / Articles / What is Table Colspan and Rowspan in HTML?

What is Table Colspan and Rowspan in HTML?

What is Table Colspan and Rowspan in HTML?

Ashutosh Kumar Verma 237 05-Jun-2024

HTML Table colspan and rowspan

In HTML tables, colspan and rowspan are attributes used to span a cell across multiple columns or rows, respectively.

Table Colspan

  • colspan is an attribute used to specify the number of columns that a cell should span horizontally.
  • It allows a single cell to occupy space across multiple adjacent columns within a table row.
  • The value of colspan indicates the number of columns that the cell should span.

Example- 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table colspan</title>
</head>
<body>
    <table border="1">
        <tr>
          <td>Cell 1</td>
          <td colspan="2">Spanned Cell</td>
          <td>Cell 4</td>
        </tr>
    </table>          
</body>
</html>

Output- 

Cell 1 Spanned Cell Cell 4


Table Rowspan

  • rowspan is an attribute used to specify the number of rows that a cell should span vertically.
  • It allows a single cell to occupy space across multiple adjacent rows within a table column.
  • The value of rowspan indicates the number of rows that the cell should span.

Example- 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table rowspan</title>
</head>
<body>
    <table border="1">
        <tr>
          <td rowspan="2">Spanned Cell</td>
          <td>Cell 2</td>
          <td>Cell 3</td>
        </tr>
        <tr>
          <td>Cell 5</td>
          <td>Cell 6</td>
        </tr>
    </table>                
</body>
</html>

Output- 

Spanned Cell Cell 2 Cell 3
Cell 5 Cell 6

 

Using colspan and rowspan attributes allows for more complex table layouts and designs, where cells can span across multiple rows or columns, providing flexibility in organizing and presenting tabular data.

 


Updated 05-Jun-2024
Hi! This is Ashutosh Kumar Verma. I am a software developer at MindStick Software Pvt Ltd since 2021. I have added some new and interesting features to the MindStick website like a story section, audio section, and merge profile feature on MindStick subdomains, etc. I love coding and I have good knowledge of SQL Database.

Leave Comment

Comments

Liked By