Merging Cells in HTML Tables

Introduction

Sometimes, it is necessary to merge cells in HTML tables to create a more complex structure or to span data across multiple cells.

Rowspan attribute: The rowspan attribute allows you to merge cells vertically. By specifying a value for rowspan, you can indicate how many rows a cell should span.
Colspan attribute: The colspan attribute, on the other hand, enables you to merge cells horizontally. It specifies the number of columns a cell should span.

Month	Savings
January	February
$100	$150	$250
$200	$300

<!DOCTYPE html>
<html>
<head>
  <title>Merging Cells in HTML Tables</title>
  <style>
    table {
      border-collapse: collapse;
    }
    
    td {
      border: 1px solid black;
      padding: 8px;
    }
  </style>
</head>
<body>
  <table id="myTable">
    <tr>
      <td colspan="2">Merged Cell 1</td>
      <td>Merged Cell 2</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>
    <tr>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
    </tr>
  </table>
  
  <script>
    function mergeCells() {
      var table = document.getElementById("myTable");
      var rowSpan = table.rows[0].cells[0].rowSpan;
      
      for (var i = 0; i < table.rows.length; i++) {
        for (var j = 0; j < table.rows[i].cells.length; j++) {
          var cell = table.rows[i].cells[j];
          if (cell.rowSpan !== rowSpan) {
            cell.rowSpan = rowSpan;
          }
        }
      }
    }
    
    mergeCells();
  </script>
</body>
</html>


 Merging Cells in HTML Tables
  

  
    
      Merged Cell 1
      Merged Cell 2
    
    
      Cell 1
      Cell 2
      Cell 3
    
    
      Cell 4
      Cell 5
      Cell 6

<!DOCTYPE html>
<html>
<head>
  <title>Merging Cells in HTML Tables</title>
  <style>
    table {
      border-collapse: collapse;
    }
    
    td {
      border: 1px solid black;
      padding: 8px;
    }
  </style>
</head>
<body>
  <table id="myTable">
    <tr>
      <td colspan="2">Merged Cell 1</td>
      <td>Merged Cell 2</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>
    <tr>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
    </tr>
  </table>
  
  <button onclick="mergeRows()">Merge Rows</button>
  <button onclick="mergeColumns()">Merge Columns</button>
  
  <script>
    function mergeRows() {
      var table = document.getElementById("myTable");
      var rowSpan = table.rows[0].cells[0].rowSpan;
      
      for (var i = 0; i < table.rows.length; i++) {
        for (var j = 0; j < table.rows[i].cells.length; j++) {
          var cell = table.rows[i].cells[j];
          if (cell.rowSpan !== rowSpan) {
            cell.rowSpan = rowSpan;
          }
        }
      }
    }
    
    function mergeColumns() {
      var table = document.getElementById("myTable");
      
      for (var i = 0; i < table.rows.length; i++) {
        var cells = table.rows[i].cells;
        var colSpan = cells[0].colSpan;
        
        for (var j = 1; j < cells.length; j++) {
          cells[j].parentNode.removeChild(cells[j]);
        }
        
        cells[0].colSpan = colSpan + cells.length - 1;
      }
    }
  </script>
</body>
</html>


  Merging Cells in HTML Tables
  
  
    
      Merged Cell 1
      Merged Cell 2
    
    
      Cell 1
      Cell 2
      Cell 3
    
    
      Cell 4
      Cell 5
      Cell 6

In this code, two buttons have been added below the table: "Merge Rows" and "Merge Columns." Clicking on these buttons triggers the JavaScript functions mergeRows() and mergeColumns() respectively.

The mergeRows() function merges all the cells in each row to have the same row span as the first cell in the first row, achieving vertical merging of rows.

The mergeColumns() function merges all the cells in each row into the first cell of that row by increasing its column span. It removes the extra cells and expands the first cell to span across the columns, achieving horizontal merging of columns.

<!DOCTYPE html>
<html>
<head>
  <title>Merging Cells in HTML Tables</title>
  <style>
    table {
      border-collapse: collapse;
    }
    
    td {
      border: 1px solid black;
      padding: 8px;
    }
  </style>
</head>
<body>
  <table id="myTable">
    <tr>
      <td colspan="2">Merged Cell 1</td>
      <td>Merged Cell 2</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>
    <tr>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
    </tr>
  </table>
  
  <button onclick="mergeRows()">Merge Rows</button>
  <button onclick="mergeColumns()">Merge Columns</button>
  <button onclick="addRow()">Add Row</button>
  <button onclick="addColumn()">Add Column</button>
  
  <script>
    function mergeRows() {
      var table = document.getElementById("myTable");
      var rowSpan = table.rows[0].cells[0].rowSpan;
      
      for (var i = 0; i < table.rows.length; i++) {
        for (var j = 0; j < table.rows[i].cells.length; j++) {
          var cell = table.rows[i].cells[j];
          if (cell.rowSpan !== rowSpan) {
            cell.rowSpan = rowSpan;
          }
        }
      }
    }
    
    function mergeColumns() {
      var table = document.getElementById("myTable");
      
      for (var i = 0; i < table.rows.length; i++) {
        var cells = table.rows[i].cells;
        var colSpan = cells[0].colSpan;
        
        for (var j = 1; j < cells.length; j++) {
          cells[j].parentNode.removeChild(cells[j]);
        }
        
        cells[0].colSpan = colSpan + cells.length - 1;
      }
    }
    
    function addRow() {
      var table = document.getElementById("myTable");
      var row = table.insertRow(-1);
      
      for (var i = 0; i < table.rows[0].cells.length; i++) {
        var cell = row.insertCell();
        cell.innerHTML = "New Cell";
      }
    }
    
    function addColumn() {
      var table = document.getElementById("myTable");
      
      for (var i = 0; i < table.rows.length; i++) {
        var cell = table.rows[i].insertCell(-1);
        cell.innerHTML = "New Cell";
      }
    }
  </script>
</body>
</html>

         
  Merging Cells in HTML Tables
  
  
    
      Merged Cell 1
      Merged Cell 2
    
    
      Cell 1
      Cell 2
      Cell 3
    
    
      Cell 4
      Cell 5
      Cell 6

Merging Cells in HTML Tables

Introduction

Here's an example of merged cells: