Untitled

dabblet.css

.table {display:table;width:100%;background:white;height:auto;}
.table.table {height:50%;}
.cell {display:table-cell;vertical-align:middle;border:solid;text-align:center;
background:turquoise;}
.table .table .cell:nth-child(1n) {background:white;}
.table .table .cell:nth-child(2n) {background:gold;}
.table .table .cell:nth-child(3n) {background:#ddd;}
.table .table .cell:nth-child(4n) {background:#159;}
html {background:#333;}

dabblet.html

<section class="table">
	<aside class="cell"><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	-:/* C */:-<br/><br/><br/><br/><br/><br/>
	</aside>
	<article class="cell">
		<section class="table">
				<p class="cell">D</p><p class="cell">D</p><p class="cell">D</p><p class="cell">-:/* D */:-</p><p class="cell">D</p><p class="cell">D</p><p class="cell">D</p><p class="cell">D</p><p class="cell">D</p><p class="cell">D</p><p class="cell">D</p><p class="cell">D</p><p class="cell">D</p><p class="cell">D</p><p class="cell">D</p><p class="cell">D</p>
		</section>
		<section class="table">
				<p class="cell">E</p><p class="cell">-:/* E */:-</p><p class="cell">E</p><p class="cell">E</p><p class="cell">E</p><p class="cell">E</p><p class="cell">E</p>

		</section>
	</article>
</section>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}