Я помещал шахматные фигуры (пешки, изображения) на свою «изготовленную на заказ» шахматную доску, я использовал изображение размером 100 пикселей, поэтому вместо этого я изменил размер на 50 пикселей и выровнял по центру. Когда я сделал то же самое с белыми пешками, я заметил, что черные пешки заметно больше белых пешек.
Код (HTML):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="example.css">
<title>Chess</title>
</head>
<body>
<table border="1">
<tr>
<td></td>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
</tr>
<!--Added Black Pawns-->
<tr>
<td bgcolor="black"> <img src="blck_pawn.png" alt="Black Pawn" height="50" width="50" align= center> </td>
<td> <img src="blck_pawn.png" alt="Black Pawn" height="50" width="50" align= center> </td>
<td bgcolor="black"> <img src="blck_pawn.png" alt="Black Pawn" height="50" width="50" align= center> </td>
<td> <img src="blck_pawn.png" alt="Black Pawn" height="50" width="50" align= center> </td>
<td bgcolor="black"> <img src="blck_pawn.png" alt="Black Pawn" height="50" width="50" align= center> </td>
<td> <img src="blck_pawn.png" alt="Black Pawn" height="50" width="50" align= center> </td>
<td bgcolor="black"> <img src="blck_pawn.png" alt="Black Pawn" height="50" width="50" align= center> </td>
<td> <img src="blck_pawn.png" alt="Black Pawn" height="50" width="50" align= center> </td>
</tr>
<!--Added Black pawns-->
<tr>
<td></td>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
</tr>
<tr>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
<td></td>
</tr>
<tr>
<td></td>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
</tr>
<tr>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
<td></td>
</tr>
<tr>
<td> <img src="wht_pawn.png" alt="White Pawn" height="50" width="50" align= center> </td>
<td bgcolor="black"> <img src="wht_pawn.png" alt="White Pawn" height="50" width="50" align= center> </td>
<td> <img src="wht_pawn.png" alt="White Pawn" height="50" width="50" align= center> </td>
<td bgcolor="black"> <img src="wht_pawn.png" alt="White Pawn" height="50" width="50" align= center> </td>
<td> <img src="wht_pawn.png" alt="White Pawn" height="50" width="50" align= center> </td>
<td bgcolor="black"> <img src="wht_pawn.png" alt="White Pawn" height="50" width="50" align= center> </td>
<td> <img src="wht_pawn.png" alt="White Pawn" height="50" width="50" align= center> </td>
<td bgcolor="black"> <img src="wht_pawn.png" alt="White Pawn" height="50" width="50" align= center> </td>
</tr>
<tr >
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
<td></td>
<td bgcolor="black"></td>
<td></td>
</tr>
</table>
</body>
</html>
CSS (пример. css):
table {
background-color:none;
}
td {
background-color:none;
width:50px;
height:50px;
}
Изображения загружены с: https://opengameart.org/content/chess-pieces-and-board-squares - PNG, NoShadow, 1x, -> b_pawn, w_pawn
Как это выглядит: https://pasteboard.co/IW24oTG.png