JSFiddle - React, Tailwind, and code Playground
HTML
<table id="table">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th colspan="2">5</th>
</tr>
<tr>
<td rowspan="3">1</td>
<td>2</td>
<td>3</td>
<td rowspan="2" colspan="2">4</td>
<td>5</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>6</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
CSS
table {
border-collapse: collapse;
border-spacing: 0;
margin: 30px;
}
td, th {
border: 1px solid #000;
padding: 10px;
text-align: center;
}
JavaScript
function TableGrid() {
if (!(this instanceof TableGrid)) {
return new TableGrid(arguments[0]);
}
this.init(arguments[0]);
}
TableGrid.prototype = {
init: function(table) {
if (typeof table === 'string') {
this.table = document.querySelector(table);
} else if (table && table.tagName && table.tagName.toLowerCase() === 'table') {
this.table = table;
}
if (this.table) {
this.createGrid();
}
},
createGrid: function() {
this.tableGrid = [];
var tr = this.table.querySelectorAll('tr');
var td = tr[0].querySelectorAll('td, th');
var i, j, k, c, n, m;
this.TRlength = tr.length;
this.TDlength = 0;
for (i = 0, j = td.length; i < j; i++) {
var colspan = parseInt(td[i].getAttribute('colspan'), 10) || 1;
for (k = 0; k < colspan; k++) {
this.TDlength++;
}
}
for (i = 0; i < this.TRlength; i++) {
this.tableGrid[i] = [];
for (j = 0; j < this.TDlength; j++) {
this.tableGrid[i][j] = false;
}
}
for (i = 0, k = this.tableGrid.length; i < k; i++) {
td = tr[i].querySelectorAll('td, th');
c = 0;
for (j = 0; j < this.TDlength; j++) {
if (!this.tableGrid[i][j]) {
var colspan = parseInt(td[c].getAttribute('colspan'), 10) || 1;
var rowspan = parseInt(td[c].getAttribute('rowspan'), 10) || 1;
for (n = 0; n < colspan; n++) {
for (m = 0; m < rowspan; m++) {
this.tableGrid[i + m][j + n] = td[c]
}
}
c++;
}
}
}
},
getCell: function(coords) {
var row =...