Шахматная доска на HTML5
Просто шаблончик, например, для простой главной страницы сайта, только разметка и стиль. Жалко удалять в свете того, что сегодня, наконец, точно закончится серия бесконечных ничьих у Каруаны с Карлсеном, подробней вот здесь.
Официальную валидацию эта разметка проходит и не содержит устаревших атрибутов align.
Доска центрируется относительно своего родительского контейнера box,
текст внутри полей доски, если его туда вписать, тоже будет центрироваться. Полям доски уже даны "правильные" id, то есть, a1, b1 и т.д.
Ниже показано, как выглядит в браузере шахматная доска HTML5 и приводится листинг файла, который может быть сохранён в документ типа .html с кодировкой UTF-8:
шахматная доска HTML5 и CSS, скриншот
<!DOCTYPE html>
<html lang="EN">
<head>
<title>Chess Board HTML5</title>
<meta charset="UTF-8">
<style>
.box { text-align: center; background-color: #eeeeee; }
.centered { display: inline-block; margin: 0; }
.chess-board { border-spacing: 0; border-collapse: collapse; }
.chess-board th { padding: .5em; }
.chess-board td { border: 1px solid; width: 5em; height: 5em; text-align: center; vertical-align: middle; }
.chess-board .white { background: #f0d9b5; }
.chess-board .black { background: #b58863; }
</style>
</head>
<body>
<div class="box">
<div class="centered">
<table class="chess-board">
<tbody>
<tr>
<th></th>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
<th>f</th>
<th>g</th>
<th>h</th>
</tr>
<tr>
<th>8</th>
<td class="white" id="a8"></td>
<td class="black" id="b8"></td>
<td class="white" id="c8"></td>
<td class="black" id="d8"></td>
<td class="white" id="e8"></td>
<td class="black" id="f8"></td>
<td class="white" id="g8"></td>
<td class="black" id="h8"></td>
</tr>
<tr>
<th>7</th>
<td class="black" id="a7"></td>
<td class="white" id="b7"></td>
<td class="black" id="c7"></td>
<td class="white" id="d7"></td>
<td class="black" id="e7"></td>
<td class="white" id="f7"></td>
<td class="black" id="g7"></td>
<td class="white" id="h7"></td>
</tr>
<tr>
<th>6</th>
<td class="white" id="a6"></td>
<td class="black" id="b6"></td>
<td class="white" id="c6"></td>
<td class="black" id="d6"></td>
<td class="white" id="e6"></td>
<td class="black" id="f6"></td>
<td class="white" id="g6"></td>
<td class="black" id="h6"></td>
</tr>
<tr>
<th>5</th>
<td class="black" id="a5"></td>
<td class="white" id="b5"></td>
<td class="black" id="c5"></td>
<td class="white" id="d5"></td>
<td class="black" id="e5"></td>
<td class="white" id="f5"></td>
<td class="black" id="g5"></td>
<td class="white" id="h5"></td>
</tr>
<tr>
<th>4</th>
<td class="white" id="a4"></td>
<td class="black" id="b4"></td>
<td class="white" id="c4"></td>
<td class="black" id="d4"></td>
<td class="white" id="e4"></td>
<td class="black" id="f4"></td>
<td class="white" id="g4"></td>
<td class="black" id="h4"></td>
</tr>
<tr>
<th>3</th>
<td class="black" id="a3"></td>
<td class="white" id="b3"></td>
<td class="black" id="c3"></td>
<td class="white" id="d3"></td>
<td class="black" id="e3"></td>
<td class="white" id="f3"></td>
<td class="black" id="g3"></td>
<td class="white" id="h3"></td>
</tr>
<tr>
<th>2</th>
<td class="white" id="a2"></td>
<td class="black" id="b2"></td>
<td class="white" id="c2"></td>
<td class="black" id="d2"></td>
<td class="white" id="e2"></td>
<td class="black" id="f2"></td>
<td class="white" id="g2"></td>
<td class="black" id="h2"></td>
</tr>
<tr>
<th>1</th>
<td class="black" id="a1"></td>
<td class="white" id="b1"></td>
<td class="black" id="c1"></td>
<td class="white" id="d1"></td>
<td class="black" id="e1"></td>
<td class="white" id="f1"></td>
<td class="black" id="g1"></td>
<td class="white" id="h1"></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Вот пример файла доски, где подписи столбцов перенесены вниз, а клетки заполнены.
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Chess Board HTML5</title>
<meta charset="UTF-8">
<style>
.body { background-color: #eeeeee; }
.box { text-align: center; }
.centered { display: inline-block; margin: 0; }
.chess-board { border-spacing: 0; border-collapse: collapse; }
.chess-board th { padding: .5em; }
.chess-board td { border: 1px solid; width: 5em; height: 5em; text-align: center; vertical-align: middle; }
.chess-board .white { background: #f0d9b5; }
.chess-board .black { background: #b58863; }
a:link,a:active {
text-decoration: none; color : #006699;
}
a:visited {
text-decoration: none; color : #003399;
}
a:hover {
text-decoration: underline; color : #006900;
}
</style>
</head>
<body>
<div class="box">
<p> </p>
<div class="centered">
<table class="chess-board">
<tbody>
<tr>
<th>8</th>
<td class="white" id="a8"></td>
<td class="black" id="b8"></td>
<td class="white" id="c8"></td>
<td class="black" id="d8"></td>
<td class="white" id="e8"></td>
<td class="black" id="f8"></td>
<td class="white" id="g8">убежище</td>
<td class="black" id="h8"></td>
</tr>
<tr>
<th>7</th>
<td class="black" id="a7"></td>
<td class="white" id="b7">бермуды</td>
<td class="black" id="c7"></td>
<td class="white" id="d7"></td>
<td class="black" id="e7"></td>
<td class="white" id="f7">виктим</td>
<td class="black" id="g7">бермуды</td>
<td class="white" id="h7"></td>
</tr>
<tr>
<th>6</th>
<td class="white" id="a6"></td>
<td class="black" id="b6"></td>
<td class="white" id="c6"></td>
<td class="black" id="d6"></td>
<td class="white" id="e6"></td>
<td class="black" id="f6"></td>
<td class="white" id="g6"></td>
<td class="black" id="h6"></td>
</tr>
<tr>
<th>5</th>
<td class="black" id="a5"></td>
<td class="white" id="b5"></td>
<td class="black" id="c5"></td>
<td class="white" id="d5">нерезиновск</td>
<td class="black" id="e5">нерезиновск</td>
<td class="white" id="f5"></td>
<td class="black" id="g5">мистика</td>
<td class="white" id="h5">детское</td>
</tr>
<tr>
<th>4</th>
<td class="white" id="a4"></td>
<td class="black" id="b4"></td>
<td class="white" id="c4"></td>
<td class="black" id="d4">нерезиновск</td>
<td class="white" id="e4">нерезиновск</td>
<td class="black" id="f4"></td>
<td class="white" id="g4"></td>
<td class="black" id="h4"></td>
</tr>
<tr>
<th>3</th>
<td class="black" id="a3"></td>
<td class="white" id="b3"></td>
<td class="black" id="c3"></td>
<td class="white" id="d3"></td>
<td class="black" id="e3"></td>
<td class="white" id="f3"></td>
<td class="black" id="g3"></td>
<td class="white" id="h3"></td>
</tr>
<tr>
<th>2</th>
<td class="white" id="a2"></td>
<td class="black" id="b2">бермуды</td>
<td class="white" id="c2"></td>
<td class="black" id="d2"></td>
<td class="white" id="e2"></td>
<td class="black" id="f2">виктим</td>
<td class="white" id="g2">бермуды</td>
<td class="black" id="h2"></td>
</tr>
<tr>
<th>1</th>
<td class="black" id="a1">анализ</td>
<td class="white" id="b1"></td>
<td class="black" id="c1"></td>
<td class="white" id="d1"></td>
<td class="black" id="e1"></td>
<td class="white" id="f1"></td>
<td class="black" id="g1">убежище</td>
<td class="white" id="h1"></td>
</tr>
<tr>
<th></th>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
<th>f</th>
<th>g</th>
<th>h</th>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Посмотреть в работе, открыть в текущем окне/вкладке (4 Кб)
И, таки да, есть люди, по мнению которых это эф-фиктивней:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chess Board HTML5</title>
<meta charset="UTF-8">
<style>
.body { background-color: #eeeeee; }
.box { text-align: center; background-color: #eeeeee; }
.centered { display: inline-block; margin: 0; }
.chess-board { border-spacing: 0; border-collapse: collapse; }
.chess-board tr td {
border: 1px solid; width: 5em; height: 5em; text-align: center; vertical-align: middle;
background: #b58863;
}
.chess-board tr:nth-child(odd) td:nth-child(even) {
background: #f0d9b5;
}
.chess-board tr:nth-child(even) td:nth-child(odd) {
background: #f0d9b5;
}
</style>
</head>
<body>
<div class="box">
<div class="centered">
<table class="chess-board">
<tbody>
<tr>
<th>8</th>
<td id="a8"></td>
<td id="b8"></td>
<td id="c8"></td>
<td id="d8"></td>
<td id="e8"></td>
<td id="f8"></td>
<td id="g8"></td>
<td id="h8"></td>
</tr>
<tr>
<th>7</th>
<td id="a7"></td>
<td id="b7"></td>
<td id="c7"></td>
<td id="d7"></td>
<td id="e7"></td>
<td id="f7"></td>
<td id="g7"></td>
<td id="h7"></td>
</tr>
<tr>
<th>6</th>
<td id="a6"></td>
<td id="b6"></td>
<td id="c6"></td>
<td id="d6"></td>
<td id="e6"></td>
<td id="f6"></td>
<td id="g6"></td>
<td id="h6"></td>
</tr>
<tr>
<th>5</th>
<td id="a5"></td>
<td id="b5"></td>
<td id="c5"></td>
<td id="d5"></td>
<td id="e5"></td>
<td id="f5"></td>
<td id="g5"></td>
<td id="h5"></td>
</tr>
<tr>
<th>4</th>
<td id="a4"></td>
<td id="b4"></td>
<td id="c4"></td>
<td id="d4"></td>
<td id="e4"></td>
<td id="f4"></td>
<td id="g4"></td>
<td id="h4"></td>
</tr>
<tr>
<th>3</th>
<td id="a3"></td>
<td id="b3"></td>
<td id="c3"></td>
<td id="d3"></td>
<td id="e3"></td>
<td id="f3"></td>
<td id="g3"></td>
<td id="h3"></td>
</tr>
<tr>
<th>2</th>
<td id="a2"></td>
<td id="b2"></td>
<td id="c2"></td>
<td id="d2"></td>
<td id="e2"></td>
<td id="f2"></td>
<td id="g2"></td>
<td id="h2"></td>
</tr>
<tr>
<th>1</th>
<td id="a1"></td>
<td id="b1"></td>
<td id="c1"></td>
<td id="d1"></td>
<td id="e1"></td>
<td id="f1"></td>
<td id="g1"></td>
<td id="h1"></td>
</tr>
<tr>
<th></th>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
<th>f</th>
<th>g</th>
<th>h</th>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
28.11.2018, 14:36 [30010 просмотров]