TAG
CSS
JavaScript
Result
Run
License
<table id="mytable" class="simplely"> <tbody> <tr> <td>Korea</td> <td>Seoul</td> </tr> </tbody> </table>
.simplely { border-collapse: collapse; } .simplely caption { padding: 5px; } .simplely > thead { font-weight: bold; text-align: center; background-color: lightgray; } .simplely th, .simplely td { border: 1px solid gray; padding: 5px 10px; }
window.addEventListener("load", () => { const $elTable = document.querySelector("#mytable"); const $elTHead = $elTable.createTHead(); let elRow = $elTHead.insertRow(0); let elCell = elRow.insertCell(0); elCell.append("Country"); elCell = elRow.insertCell(1); elCell.append("Capital"); const $elTbody = $elTable.createTBody(); elRow = $elTbody.insertRow(0); elCell = elRow.insertCell(0); elCell.append("United State"); elCell = elRow.insertCell(1); elCell.append("Washington D.C."); const $elTFoot = $elTable.createTFoot(); elRow = $elTFoot.insertRow(0); elCell = elRow.insertCell(0); elCell.colSpan = 2; elCell.append("Total countries: 2"); });
Console
expand_less
License
License
by DevDic
Close