13-table-layout-in-css/formatting-grid-cells-basis.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Grid cells form the basis of table layout</title>
<link rel="stylesheet" type="text/css" href="c/baseline.css">
<style type="text/css">
body {float: left;}
#g02 {margin-right: 0;}

table {border-collapse: separate; border-spacing: 4px; padding: 0; margin: -1px;
	position: relative; z-index: 1;}
td {color: gray; border: 1px solid orange; padding: 0.5em;
	text-align: center;
	background: rgba(255,255,255,0.667);
	text-shadow: 0 0 1px white, 0 0 2px white, 0 0 4px white;}
.grid {position: relative; float: left; margin-right: 2em;}
.grid .lines {position: absolute; z-index: 0; width: 100%; height: 100%;
	border: 2px dotted black; box-sizing: border-box;}
.grid .lines span {position: absolute; box-sizing: border-box;}
.grid .lines .row {border-bottom: 2px dotted black; width: 100%;}
.grid .lines .col {border-right: 2px dotted black; height: 100%;}

#g01 span.row {height: 51%;}
#g01 span.col {width: 52.5%;}

#g02 span.row:nth-child(1) {height: 34.5%;}
#g02 span.row:nth-child(2) {height: 66.667%;}
#g02 span.col:nth-of-type(3) {width: 25%;}
#g02 span.col:nth-of-type(4) {width: 49%;}
#g02 span.col:nth-of-type(5) {width: 76%;}

</style>
</head>
<body>

<div class="grid" id="g01">
<div class="lines">
<span class="row"></span>
<span class="col"></span>
</div>
<table>
<tr>
<td>cell mitosis</td>
<td>cell phone</td>
</tr>
<tr>
<td>cell walls</td>
<td>hard cell</td>
</tr>
</table>
</div>

<div class="grid" id="g02">
<div class="lines">
<span class="row"></span>
<span class="row"></span>
<span class="col"></span>
<span class="col"></span>
<span class="col"></span>

</div>
<table>
<tr>
<td>cellery</td>
<td rowspan="2">tall cell</td>
<td colspan="2">wide cell</td>
</tr>
<tr>
<td>soft cell</td>
<td>cellulose</td>
<td rowspan="2">end cell</td>
</tr>
<tr>
<td colspan="3">basal cell</td>
</tr>
</table>
</div>

</body>
</html>