CSS Chess Board
Simple CSS Chess Board marked up with tables and styled with CSS3 psuedo classes. Basic use of :nth-child(odd)
and :nth-child(even)
to achieve the alternate black and white checkboxes. Check out the CSS code - it's dead simple!
<table>
<table>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
body {
body {
background: #abdc28;
padding: 20px;
}
table {
margin: 0 auto;
border-collapse: collapse;
background: black;
}
td {
width: 40px; height: 40px;
}
tr:nth-child(odd) td:nth-child(even), tr:nth-child(even) td:nth-child(odd) {
background: white;
}