| a | b | c | d | e | f | g | h | |
|---|---|---|---|---|---|---|---|---|
| 8 | r | n | b | q | k | b | n | r |
| 7 | p | p | p | p | p | p | p | p |
| 6 | ||||||||
| 5 | ||||||||
| 4 | ||||||||
| 3 | ||||||||
| 2 | P | P | P | P | P | P | P | P |
| 1 | R | N | B | Q | K | B | N | R |
This is an example of custom written HTML for a table representing a Chessboard. This version does not use CSS and instead styles every single element individually. The reason is because I am unable to control the CSS of WordPress the way I want. This should work for embedding a table of a Chessboard into any WordPress post I want. Creating an HTML table is an idea I had to save disk space if I were to make a personal database of Chess positions and my thoughts on various moves.
There are other ways to make a text form of a Chess board. For example, consider this table made using Markdown:
| a | b | c | d | e | f | g | h | |
|---|---|---|---|---|---|---|---|---|
| 8 | r | n | b | q | k | b | n | r |
| 7 | p | p | p | p | p | p | p | p |
| 6 | ||||||||
| 5 | ||||||||
| 4 | ||||||||
| 3 | ||||||||
| 2 | P | P | P | P | P | P | P | P |
| 1 | R | N | B | Q | K | B | N | R |
The Markdown code that makes the above table is:
||a|b|c|d|e|f|g|h|
|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
| 8 | r | n | b | q | k | b | n | r |
| 7 | p | p | p | p | p | p | p | p |
| 6 | | | | | | | | |
| 5 | | | | | | | | |
| 4 | | | | | | | | |
| 3 | | | | | | | | |
| 2 | P | P | P | P | P | P | P | P |
| 1 | R | N | B | Q | K | B | N | R |
However, the Markdown version, although it displays fine when viewed on Github, does not play well with WordPress. Therefore, the HTML version at the top of this post is much more reliable for WordPress posts.
Reading the code on the other hand is another story! The following HTML code made the table at the very top of this post.
<table style="width: 720px;height: 720px;border: 1px solid black;border-collapse: collapse">
<tbody>
<tr>
<th style="text-align: center"></th>
<th style="text-align: center">a</th>
<th style="text-align: center">b</th>
<th style="text-align: center">c</th>
<th style="text-align: center">d</th>
<th style="text-align: center">e</th>
<th style="text-align: center">f</th>
<th style="text-align: center">g</th>
<th style="text-align: center">h</th>
</tr>
<tr>
<th style="text-align: center">8</th>
<td style="text-align: center;border: 1px solid black">r</td>
<td style="text-align: center;border: 1px solid black">n</td>
<td style="text-align: center;border: 1px solid black">b</td>
<td style="text-align: center;border: 1px solid black">q</td>
<td style="text-align: center;border: 1px solid black">k</td>
<td style="text-align: center;border: 1px solid black">b</td>
<td style="text-align: center;border: 1px solid black">n</td>
<td style="text-align: center;border: 1px solid black">r</td>
</tr>
<tr>
<th style="text-align: center">7</th>
<td style="text-align: center;border: 1px solid black">p</td>
<td style="text-align: center;border: 1px solid black">p</td>
<td style="text-align: center;border: 1px solid black">p</td>
<td style="text-align: center;border: 1px solid black">p</td>
<td style="text-align: center;border: 1px solid black">p</td>
<td style="text-align: center;border: 1px solid black">p</td>
<td style="text-align: center;border: 1px solid black">p</td>
<td style="text-align: center;border: 1px solid black">p</td>
</tr>
<tr>
<th style="text-align: center">6</th>
<td style="text-align: center;border: 1px solid black"></td>
<td style="text-align: center;border: 1px solid black"></td>
<td style="text-align: center;border: 1px solid black"></td>
<td style="text-align: center;border: 1px solid black"></td>
<td style="text-align: center;border: 1px solid black"></td>
<td style="text-align: center;border: 1px solid black"></td>
<td style="text-align: center;border: 1px solid black"></td>
<td style="text-align: center;border: 1px solid black"></td>
</tr>
<tr>
<th style="text-align: center">5</th>
<td style="text-align: center;border: 1px solid black"></td>
<td style="text-align: center;border: 1px solid black"></td>
<td style="text-align: center;border: 1px solid black"></td>
<td style="text-align: center;border: 1px solid black"></td>
<td style="text-align: center;border: 1px solid black"></td>
<td style="text-align: center;border: 1px solid black"></td>
<td style="text-align: center;border: 1px solid black"></td>
<td style="text-align: center;border: 1px solid black"></td>
</tr>
<tr>
<th style="text-align: center">4</th>
<td style="text-align: center;border: 1px solid black"></td>
<td style="text-align: center;border: 1px solid black"></td>
<td style="text-align: center;border: 1px solid black"></td>
<td style="text-align: center;border: 1px solid black"></td>
<td style="text-align: center;border: 1px solid black"></td>
<td style="text-align: center;border: 1px solid black"></td>
<td style="text-align: center;border: 1px solid black"></td>
<td style="text-align: center;border: 1px solid black"></td>
</tr>
<tr>
<th style="text-align: center">3</th>
<td style="text-align: center;border: 1px solid black"></td>
<td style="text-align: center;border: 1px solid black"></td>
<td style="text-align: center;border: 1px solid black"></td>
<td style="text-align: center;border: 1px solid black"></td>
<td style="text-align: center;border: 1px solid black"></td>
<td style="text-align: center;border: 1px solid black"></td>
<td style="text-align: center;border: 1px solid black"></td>
<td style="text-align: center;border: 1px solid black"></td>
</tr>
<tr>
<th style="text-align: center">2</th>
<td style="text-align: center;border: 1px solid black">P</td>
<td style="text-align: center;border: 1px solid black">P</td>
<td style="text-align: center;border: 1px solid black">P</td>
<td style="text-align: center;border: 1px solid black">P</td>
<td style="text-align: center;border: 1px solid black">P</td>
<td style="text-align: center;border: 1px solid black">P</td>
<td style="text-align: center;border: 1px solid black">P</td>
<td style="text-align: center;border: 1px solid black">P</td>
</tr>
<tr>
<th style="text-align: center">1</th>
<td style="text-align: center;border: 1px solid black">R</td>
<td style="text-align: center;border: 1px solid black">N</td>
<td style="text-align: center;border: 1px solid black">B</td>
<td style="text-align: center;border: 1px solid black">Q</td>
<td style="text-align: center;border: 1px solid black">K</td>
<td style="text-align: center;border: 1px solid black">B</td>
<td style="text-align: center;border: 1px solid black">N</td>
<td style="text-align: center;border: 1px solid black">R</td>
</tr>
</tbody>
</table>
When considering the difficulty of getting a workable table to display on my blog, you may wonder why I bother? Consider the following image which is the equivalent starting position of Chess.
Obviously, this image looks better than the lame table at the top of this post, but it comes with a few downsides.
First, the amount of time it takes to load up inkscape, move the pieces around for the image, choose a file name to save as, upload the file to my WordPress media account, and then write a Markdown link to the image is far more than the time it takes to edit the HTML code to mode the pieces of text around.
Second, linking to image files adds the dependency of external files existing and the internet connection working. By keeping the table as plain text, it allows me to work offline and save time and space in the creation of the image and my explanations of that position.
Therefore, I have decided to use the HTML table method for some time as I build content for my next Chess book. However, it will not be done any time soon. The first book was for beginners, but the next book will hopefully be for the more advanced and skilled player.
Also, if you haven’t already, go read my first book, Chastity’s Chess Chapters.
Chastity's Chess Challenge 
Please leave me any comments or questions you have! I will update posts if necessary based on user feedback!