Since the HTML table with its CSS is "rendered" by the web browser you cannot simply send its code to the GD library and expect graphical output. What is does is just print the string as shown in your example.
What you could do is to draw without the HTML code ie as an image with geometric shapes filled with colors that is pretty perfect approach for GD library.
Let's think about it: a chessboard. Chessboard is a square with eight rows and eight columns colored with two basic colors light and dark.
So all you need is to:
- create an image such as 640 x 640 pixels manual
- position or 8 * 8 rectangles, each of size 1/8 of width and height, 80 x 80 pixels manual
- fill those rectangles with colors manual
- improve it with some lines, borders, shadows, etc.
- render final image manual
One of many tutorials over the internet is here or here.
EDIT
Here is an example with first column and first row without any optimization just proof of concept:
<?php
header('Content-type: image/png');
$png_image = imagecreate(180, 180);
$grey = imagecolorallocate($png_image, 229, 229, 229);
$black = imagecolorallocate($png_image, 0, 0, 0);
$white = imagecolorallocate($png_image, 255, 255, 255);
imagefilltoborder($png_image, 0, 0, $grey, $grey);
// first row
imagefilledrectangle ($png_image, 10, 10, 30, 30, $black);
imagefilledrectangle ($png_image, 30, 10, 50, 30, $white);
imagefilledrectangle ($png_image, 50, 10, 70, 30, $black);
imagefilledrectangle ($png_image, 70, 10, 90, 30, $white);
imagefilledrectangle ($png_image, 90, 10, 110, 30, $black);
imagefilledrectangle ($png_image, 110, 10, 130, 30, $white);
imagefilledrectangle ($png_image, 130, 10, 150, 30, $black);
imagefilledrectangle ($png_image, 150, 10, 170, 30, $white);
// first column
imagefilledrectangle ($png_image, 10, 10, 30, 30, $black);
imagefilledrectangle ($png_image, 10, 30, 30, 50, $white);
imagefilledrectangle ($png_image, 10, 50, 30, 70, $black);
imagefilledrectangle ($png_image, 10, 70, 30, 90, $white);
imagefilledrectangle ($png_image, 10, 90, 30, 110, $black);
imagefilledrectangle ($png_image, 10, 110, 30, 130, $white);
imagefilledrectangle ($png_image, 10, 130, 30, 150, $black);
imagefilledrectangle ($png_image, 10, 150, 30, 170, $white);
imagepng($png_image);
imagedestroy($png_image);
?>
The output is:
More explanation needed - here you are:
In the example above I use squares 20x20 pixels, so every row starts on +20 pixels down then previous and every column on +20 pixels then previous column.
The axes are named x horizontal counted from left to right, and y vertical counted from top to bottom.
The points 1 is the point of top left corner and 2 is bottom right corner of the square.
From this point of view the most top left corner of the image has all coordinates equal to zero, ie. x1 = 0, y1 = 0, x2 = 0, y2 = 0.
Now the squares
The first square in first row has padding 10 pixels from top and from left so the upper left coordinates are x1 = 10 (from left), y1 = 10 (from top), and the square has 20 pixels of dimension, so the bottom right coordinates are x2 = x1 + 20 and y2 = y2 + 20, ie. x2 = 30, y2 = 30.
The first square in second row has padding 10 pixels from left and is attached just bellow the first row square, keep the padding same as before, ie. x1 = 10 to keep the padding (from left) but move the starting point from top +20 pixels, ie. y1 = 30 (from top). And now set the bottom right corner to coordinates +20 pixels form x1 and y1, ie x2 = 30 and y2 = 50.
And so on.
Long story short:
First point top left corner of the square somewhere, this will set the x1 and y1 coordinates.
Second add given of pixels to both coordinates to create a square and multiply it with given row and column number, ie. if 20 pixels, then x2 = x1 + 20 * column_number, y2 = y2 + 20 * row_number.
Refer to PHP function imagerectangle()
