Jak na šachové symboly a šachovnice v HTML

Pokud jste fanoušci šachů a chcete na svých webových stránkách zobrazovat šachovnici/šachové koncovky, tak je to možné přímo pomocí HTML znaků. Ukážeme si jednoduše jak.

Figurky v HTML

Nejdříve se podívejme na kódy, které nahrazují figurky na šachovnici:

Bilé figurky HTML kód
král ♔
dáma ♕
věž ♖
střelec ♗
kůň ♘
pěšec ♙

Černé figurky HTML kód
král ♚
dáma ♛
věž ♜
střelec ♝
kůň ♞
pěšec ♟

Šachovnice

Takto pak může vypadat výsledná šachovnice za použití výše uvedeného HTML kódu:

8
7
6
5
4
3
2
1
a b c d e f g h

Zdrojový kód šachovnice

Zdrojový kód celé šachovnice je pak tento:

<table style="text-align:center;border-spacing:0pt;font-family:'Arial Unicode MS'; border-collapse:collapse; border-color: silver; border-style: solid; border-width: 0pt 0pt 0pt 0pt;background-color: #ffffff;color:#000000;">

<tr style="vertical-align:bottom;">
<td style="vertical-align:middle;width:12pt">8</td>
<td style="width:40pt; height:40pt; border-collapse:collapse; border-color: silver; border-style: solid; border-width: 1pt 0pt 0pt 1pt;background-color: #ffffff;"><span style="font-size:250%;">&#9820;</span></td>
<td style="background:silver;"><span style="font-size:250%;">&#9822;</span></td>
<td style="width:40pt; height:40pt; border-collapse:collapse; border-color: silver; border-style: solid; border-width: 1pt 0pt 0pt 0pt;background-color: #ffffff;"><span style="font-size:250%;">&#9821;</span></td>
<td style="background:silver;"><span style="font-size:250%;">&#9819;</span></td>
<td style="width:40pt; height:40pt; border-collapse:collapse; border-color: silver; border-style: solid; border-width: 1pt 0pt 0pt 0pt;background-color: #ffffff;"><span style="font-size:250%;">&#9818;</span></td>
<td style="background:silver;"><span style="font-size:250%;">&#9821;</span></td>
<td style="width:40pt; height:40pt; border-collapse:collapse; border-color: silver; border-style: solid; border-width: 1pt 0pt 0pt 0pt;background-color: #ffffff;"><span style="font-size:250%;">&#9822;</span></td>
<td style="background:silver;"><span style="font-size:250%;">&#9820;</span></td>
</tr>

<tr style="vertical-align:bottom;">
<td style="vertical-align:middle;width:12pt">7</td>
<td style="background:silver;"><span style="font-size:250%;">&#9823;</span></td>
<td style="width:40pt; height:40pt;background-color: #ffffff;"><span style="font-size:250%;">&#9823;</span></td>
<td style="background:silver;"><span style="font-size:250%;">&#9823;</span></td>
<td style="width:40pt; height:40pt;background-color: #ffffff;"><span style="font-size:250%;">&#9823;</span></td>
<td style="background:silver;"><span style="font-size:250%;">&#9823;</span></td>
<td style="width:40pt; height:40pt;background-color: #ffffff;"><span style="font-size:250%;">&#9823;</span></td>
<td style="background:silver;"><span style="font-size:250%;">&#9823;</span></td>
<td style="width:40pt; height:40pt; border-collapse:collapse; border-color: black; border-style: solid; border-width: 0pt 1pt 0pt 0pt"><span style="font-size:250%;">&#9823;</span></td>
</tr>

<tr style="vertical-align:bottom;">
<td style="vertical-align:middle;width:12pt">6</td>
<td style="width:40pt; height:40pt; border-collapse:collapse; border-color: silver; border-style: solid; border-width: 0pt 0pt 0pt 1pt;background-color: #ffffff;"></td>
<td style="background:silver;"></td>
<td style="width:40pt; height:40pt;background-color: #ffffff;"></td>
<td style="background:silver;"></td>
<td style="width:40pt; height:40pt;background-color: #ffffff;"></td>
<td style="background:silver;"></td>
<td style="width:40pt; height:40pt;background-color: #ffffff;"></td>
<td style="background:silver;"></td>
</tr>

<tr style="vertical-align:bottom;">
<td style="vertical-align:middle;width:12pt">5</td>
<td style="background:silver;"></td>
<td style="width:40pt; height:40pt;background-color: #ffffff;"></td>
<td style="background:silver;"></td>
<td style="width:40pt; height:40pt;background-color: #ffffff;"></td>
<td style="background:silver;"></td>
<td style="width:40pt; height:40pt;background-color: #ffffff;"></td>
<td style="background:silver;"></td>
<td style="width:40pt; height:40pt; border-collapse:collapse; border-color: silver; border-style: solid; border-width: 0pt 1pt 0pt 0pt;background-color: #ffffff;"></td>
</tr>

<tr style="vertical-align:bottom;">
<td style="vertical-align:middle;width:12pt">4</td>
<td style="width:40pt; height:40pt; border-collapse:collapse; border-color: silver; border-style: solid; border-width: 0pt 0pt 0pt 1pt;background-color: #ffffff;"></td>
<td style="background:silver;"></td>
<td style="width:40pt; height:40pt;background-color: #ffffff;"></td>
<td style="background:silver;"></td>
<td style="width:40pt; height:40pt;background-color: #ffffff;"></td>
<td style="background:silver;"></td>
<td style="width:40pt; height:40pt;background-color: #ffffff;"></td>
<td style="background:silver;"></td>
</tr>

<tr style="vertical-align:bottom;">
<td style="vertical-align:middle;width:12pt">3</td>
<td style="background:silver;"></td>
<td style="width:40pt; height:40pt;background-color: #ffffff;"></td>
<td style="background:silver;"></td>
<td style="width:40pt; height:40pt;background-color: #ffffff;"></td>
<td style="background:silver;"></td>
<td style="width:40pt; height:40pt;background-color: #ffffff;"></td>
<td style="background:silver;"></td>
<td style="width:40pt; height:40pt; border-collapse:collapse; border-color: silver; border-style: solid; border-width: 0pt 1pt 0pt 0pt;background-color: #ffffff;"></td>
</tr>

<tr style="vertical-align:bottom;">
<td style="vertical-align:middle;width:12pt">2</td>
<td style="width:40pt; height:40pt; border-collapse:collapse; border-color: silver; border-style: solid; border-width: 0pt 0pt 0pt 1pt;background-color: #ffffff;"><span style="font-size:250%;">&#9817;</span></td>
<td style="background:silver;"><span style="font-size:250%;">&#9817;</span></td>
<td style="width:40pt; height:40pt;background-color: #ffffff;"><span style="font-size:250%;">&#9817;</span></td>
<td style="background:silver;"><span style="font-size:250%;">&#9817;</span></td>
<td style="width:40pt; height:40pt;background-color: #ffffff;"><span style="font-size:250%;">&#9817;</span></td>
<td style="background:silver;"><span style="font-size:250%;">&#9817;</span></td>
<td style="width:40pt; height:40pt;background-color: #ffffff;"><span style="font-size:250%;">&#9817;</span></td>
<td style="background:silver;"><span style="font-size:250%;">&#9817;</span></td>
</tr>

<tr style="vertical-align:bottom;">
<td style="vertical-align:middle;width:12pt">1</td>
<td style="background:silver;"><span style="font-size:250%;">&#9814;</span></td>
<td style="width:40pt; height:40pt; border-collapse:collapse; border-color: silver; border-style: solid; border-width: 0pt 0pt 1pt 0pt;background-color: #ffffff;"><span style="font-size:250%;">&#9816;</span></td>
<td style="background:silver;"><span style="font-size:250%;">&#9815;</span></td>
<td style="width:40pt; height:40pt; border-collapse:collapse; border-color: silver; border-style: solid; border-width: 0pt 0pt 1pt 0pt;background-color: #ffffff;"><span style="font-size:250%;">&#9813;</span></td>
<td style="background:silver;"><span style="font-size:250%;">&#9812;</span></td>
<td style="width:40pt; height:40pt; border-collapse:collapse; border-color: silver; border-style: solid; border-width: 0pt 0pt 1pt 0pt;background-color: #ffffff;"><span style="font-size:250%;">&#9815;</span></td>
<td style="background:silver;"><span style="font-size:250%;">&#9816;</span></td>
<td style="width:40pt; height:40pt; border-collapse:collapse; border-color: silver; border-style: solid; border-width: 0pt 1pt 1pt 0pt;background-color: #ffffff;"><span style="font-size:250%;">&#9814;</span></td>
</tr>

<tr>
<td></td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>

</table>

Publikováno 20.4.2015 v 02:42 | Kategorie: HTML