Chess div
by StefanG
HTML
<html>
<body>
<div class="table">
<div class="row">
<div class="square">♜</div>
<div class="square">♞</div>
<div class="square">♝</div>
<div class="square">♛</div>
<div class="square">♚</div>
<div class="square">♝</div>
<div class="square">♞</div>
<div class="square">♜</div>
</div>
<div class="row">
<div class="square">♝</div>
<div class="square">♝</div>
<div class="square">♝</div>
<div class="square">♝</div>
<div class="square">♝</div>
<div class="square">♝</div>
<div class="square">♝</div>
<div class="square">♝</div>
</div>
<div class="row">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="row">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="row">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="row">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div...
CSS
body {
background: #3f50b5;
}
.table {
margin: auto;
width: 640px;
height: 640px;
}
.square {
height: 80px;
width: 80px;
background-color: gray;
font-size: 48px;
text-align: center;
vertical-align: middle;
display: table-cell;
}
.row:nth-child(odd) .square:nth-child(even),
.row:nth-child(even) .square:nth-child(odd) {
background: white;
}