Table with rowspan and colspan.

by Ankit Patidar

HTML

<html ng-app="excelApp">
<head>
  <title>Excel Sheet</title>
</head>
<body ng-controller="excelController">
  <table>
    <thead>
      <tr>
        <th></th>
        <th ng-repeat="col in columns" colspan="{{col.colspan}}">{{col.title}}</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="row in rows">
        <td>{{row.rowTitle}}</td>
        <td ng-repeat="cell in row.cells" colspan="{{cell.colspan}}" rowspan="{{cell.rowspan}}">{{cell.value}}</td>
      </tr>
    </tbody>
  </table>
  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</body>
</html>

CSS

table {
    font-size: 3rem;
}
th {
    background-color: #ccc;
}
td {
    background-color: antiquewhite;
}

JavaScript

angular.module("excelApp", []).controller("excelController", function($scope) {
    $scope.columns = [
      { title: "A", colspan: 1 },
      { title: "B", colspan: 2 },
      { title: "C", colspan: 1 }
    ];

    $scope.rows = [
      {
        rowTitle: "1",
        cells: [
          { value: "A1", colspan: 1, rowspan: 1 },
          { value: "B1", colspan: 2, rowspan: 1 },
          { value: "C1", colspan: 1, rowspan: 1 }
        ]
      },
      {
        rowTitle: "2",
        cells: [
          { value: "A2", colspan: 1, rowspan: 1 },
          { value: "B2", colspan: 1, rowspan: 2 },
          { value: "C2", colspan: 1, rowspan: 1 }
        ]
      },
      {
        rowTitle: "3",
        cells: [
          { value: "A3", colspan: 1, rowspan: 1 },
          { value: "C3", colspan: 1, rowspan: 1 }
        ]
      }
    ];
  });