<!doctype html>
<style>
div[contenteditable] {
font: 20px/25px monospace;
border: solid 1px green;
padding: 5px;
}
td {
padding: 0px;
vertical-align: top;
width: 100px;
}
.sim {
border-spacing: 0px;
width: 300px;
}
</style>
<div contenteditable id="target" style="width: 300px">
<table class="sim"><tr id="r0"></table>
</div>
<script>
const selection = window.getSelection();
const row = document.getElementById('r0');
const target = document.getElementById('target');
let column;
for (let i = 0; i < 10; ++i) {
if (i % 4 === 0)
column = row.appendChild(document.createElement('td'));
column.innerHTML += `<span id="c${i}">line ${i}<br></span>`;
}
selection.collapse(document.getElementById('c5').firstChild, 3);
</script>