Chess- (or checkerboard- ) in CSS

Can anyone point me to a table-free chessboard pattern in CSS? When I Google for this I see people talking about them, but all the actual examples I’ve found are just CSS styled- <tables>'s. It should be cross-browser compatible and behave like a real chessboard, ie. not wrap around or change its shape if the window is resized.

A couple of people have told me that I should be doing this with tables, but I don’t understand why chess pieces (or positions) would be regarded as tabular data.

I’ve just made this for you, is this what you mean?

I truly have no idea which HTML element semantically represents a chessboard square…

You just need two divs, one black and one white, with Xpx width and Xpx height, then you put them like black/white/black/white.

if you NEED tables just make a table with same rows as columns and change bground color.

You know, I hear the “I don’t understand why _____ would be considered tabular data” a lot, and it’s… I dunno. It has rows, it has columns… that’s a table… But then I think the same about complex site layout. Rows + Columns = table

But, you can do it… you have to use float:left DIV boxes, clearing the float every 8 boxes - the easiest way to do that is to just put all those DIV’s inside another DIV set to display:block; with the height and width set to 8* the height of your playing squares.

so, basically:

#chessboard, .black_square, .white_square {
	display:block;
	padding:0px;
	margin:0px;
}

#chessboard {
	width:384px;
	height:384px;
	border:4px solid #FF0000;
}

.black_square, .white_square {
	width:48px;
	height:48px;
	float:left;
}

.black_square {
	background-color:#000000;
}

.white_square {
	background-color:#FFFFFF;
}

and the HTML:

<div id="chessboard">
	<div>
		<div class="white_square" id="KR8"></div>
		<div class="black_square" id="KN8"></div>
		<div class="white_square" id="KB8"></div>
		<div class="black_square" id="K8"></div>
		<div class="white_square" id="Q8"></div>
		<div class="black_square" id="QB8"></div>
		<div class="white_square" id="QN8"></div>
		<div class="black_square" id="QR8"></div>
	</div>
	<div>
		<div class="black_square" id="KR7"></div>
		<div class="white_square" id="KN7"></div>
		<div class="black_square" id="KB7"></div>
		<div class="white_square" id="K7"></div>
		<div class="black_square" id="Q7"></div>
		<div class="white_square" id="QB7"></div>
		<div class="black_square" id="QN7"></div>
		<div class="white_square" id="QR7"></div>
	</div>
	<div>
		<div class="white_square" id="KR6"></div>
		<div class="black_square" id="KN6"></div>
		<div class="white_square" id="KB6"></div>
		<div class="black_square" id="K6"></div>
		<div class="white_square" id="Q6"></div>
		<div class="black_square" id="QB6"></div>
		<div class="white_square" id="QN6"></div>
		<div class="black_square" id="QR6"></div>
	</div>
	<div>
		<div class="black_square" id="KR5"></div>
		<div class="white_square" id="KN5"></div>
		<div class="black_square" id="KB5"></div>
		<div class="white_square" id="K5"></div>
		<div class="black_square" id="Q5"></div>
		<div class="white_square" id="QB5"></div>
		<div class="black_square" id="QN5"></div>
		<div class="white_square" id="QR5"></div>
	</div>
	<div>
		<div class="white_square" id="KR4"></div>
		<div class="black_square" id="KN4"></div>
		<div class="white_square" id="KB4"></div>
		<div class="black_square" id="K4"></div>
		<div class="white_square" id="Q4"></div>
		<div class="black_square" id="QB4"></div>
		<div class="white_square" id="QN4"></div>
		<div class="black_square" id="QR4"></div>
	</div>
	<div>
		<div class="black_square" id="KR3"></div>
		<div class="white_square" id="KN3"></div>
		<div class="black_square" id="KB3"></div>
		<div class="white_square" id="K3"></div>
		<div class="black_square" id="Q3"></div>
		<div class="white_square" id="QB3"></div>
		<div class="black_square" id="QN3"></div>
		<div class="white_square" id="QR3"></div>
	</div>
	<div>
		<div class="white_square" id="KR2"></div>
		<div class="black_square" id="KN2"></div>
		<div class="white_square" id="KB2"></div>
		<div class="black_square" id="K2"></div>
		<div class="white_square" id="Q2"></div>
		<div class="black_square" id="QB2"></div>
		<div class="white_square" id="QN2"></div>
		<div class="black_square" id="QR2"></div>
	</div>
	<div>
		<div class="black_square" id="KR1"></div>
		<div class="white_square" id="KN1"></div>
		<div class="black_square" id="KB1"></div>
		<div class="white_square" id="K1"></div>
		<div class="black_square" id="Q1"></div>
		<div class="white_square" id="QB1"></div>
		<div class="black_square" id="QN1"></div>
		<div class="white_square" id="QR1"></div>
	</div>
</div>

I went to the trouble of naming the squares properly for you too.

For your playing pieces, you could handle it two ways - the first is to set the background-image of the squares - while this stops you from texturing the squares, you can do it fairly easily without adding any HTML, using transparent .png or .gif to show through to the background-color… and you can set that to a blank image using javascript to actually implement the game.

The other way would be to add your images, assign them a position:absolute property, and move them around on the screen with javascript. The advantage to this is you could texture the squares, and put the pieces anywhere on the board letting you ‘animate’ their movements.

Just some ideas, hope this gets you pointed the right direction.

– edit – wow, a lot of responses while I was typing… Boy we’re a helpful lot.

A chess board surely is a table. It even has table headers (1-8 on the rows, and a-h on the columns).

Now, HTML wasn’t originally designed for games. But if you want to port a chess board to HTML, the <table> is the closest you can get. The cells get row- and column relation. With divs you don’t get any relation at all.

<table>
 <thead>
  <tr><th><th>a<th>b<th>c<th>d<th>e<th>f<th>g<th>h
 <tbody>
  <tr><th>8<td>&#9820;<td>&#9822;<td>&#9821;<td>&#9819;<td>&#9818;<td>&#9821;<td>&#9822;<td>&#9820;
  <tr><th>7<td>&#9823;<td>&#9823;<td>&#9823;<td>&#9823;<td>&#9823;<td>&#9823;<td>&#9823;<td>&#9823;
  <tr><th>6<td><td><td><td><td><td><td><td>
  <tr><th>5<td><td><td><td><td><td><td><td>
  <tr><th>4<td><td><td><td><td><td><td><td>
  <tr><th>3<td><td><td><td><td><td><td><td>
  <tr><th>2<td>&#9817;<td>&#9817;<td>&#9817;<td>&#9817;<td>&#9817;<td>&#9817;<td>&#9817;<td>&#9817;
  <tr><th>1<td>&#9814;<td>&#9816;<td>&#9815;<td>&#9813;<td>&#9812;<td>&#9815;<td>&#9816;<td>&#9814;
</table>