How to make a full chess board in html- FULL TUTORIAL

-


 First open your your notepad to add code. In this tutorial we need to add the chess board so type in this code. 

<!DOCTYPE html>

<html>

<center>

    <head>

        <title></title>

        <meta charset="UTF-8">

        <style>

            .chess-board { border-spacing: 0; border-collapse: collapse; }

            .chess-board th { padding: .5em; }

            .chess-board th + th { border-bottom: 1px solid #000; }

            .chess-board th:first-child,

            .chess-board td:last-child { border-right: 1px solid #000; }

            .chess-board tr:last-child td { border-bottom: 1px solid; }

            .chess-board th:empty { border: none; }

            .chess-board td { width: 1.5em; height: 1.5em; text-align: center; font-size: 32px; line-height: 0;}

            .chess-board .light { background: #eee; }

            .chess-board .dark { background: #aaa; }

        </style>

    </head>

    <body>

        <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="light">♜</td>

                    <td class="dark">♞</td>

                    <td class="light">♝</td>

                    <td class="dark">♛</td>

                    <td class="light">♚</td>

                    <td class="dark">♝</td>

                    <td class="light">♞</td>

                    <td class="dark">♜</td>

                </tr>

                <tr>

                    <th>7</th>

                    <td class="dark">♟</td>

                    <td class="light">♟</td>

                    <td class="dark">♟</td>

                    <td class="light">♟</td>

                    <td class="dark">♟</td>

                    <td class="light">♟</td>

                    <td class="dark">♟</td>

                    <td class="light">♟</td>

                </tr>

                <tr>

                    <th>6</th>

                    <td class="light"></td>

                    <td class="dark"></td>

                    <td class="light"></td>

                    <td class="dark"></td>

                    <td class="light"></td>

                    <td class="dark"></td>

                    <td class="light"></td>

                    <td class="dark"></td>

                </tr>

                <tr>

                    <th>5</th>

                    <td class="dark"></td>

                    <td class="light"></td>

                    <td class="dark"></td>

                    <td class="light"></td>

                    <td class="dark"></td>

                    <td class="light"></td>

                    <td class="dark"></td>

                    <td class="light"></td>

                </tr>

                <tr>

                    <th>4</th>

                    <td class="light"></td>

                    <td class="dark"></td>

                    <td class="light"></td>

                    <td class="dark"></td>

                    <td class="light"></td>

                    <td class="dark"></td>

                    <td class="light"></td>

                    <td class="dark"></td>

                </tr>

                <tr>

                    <th>3</th>

                    <td class="dark"></td>

                    <td class="light"></td>

                    <td class="dark"></td>

                    <td class="light"></td>

                    <td class="dark"></td>

                    <td class="light"></td>

                    <td class="dark"></td>

                    <td class="light"></td>

                </tr>

                <tr>

                    <th>2</th>

                    <td class="light">♙</td>

                    <td class="dark">♙</td>

                    <td class="light">♙</td>

                    <td class="dark">♙</td>

                    <td class="light">♙</td>

                    <td class="dark">♙</td>

                    <td class="light">♙</td>

                    <td class="dark">♙</td>

                </tr>

                <tr>

                    <th>1</th>

                    <td class="dark">♖</td>

                    <td class="light">♘</td>

                    <td class="dark">♗</td>

                    <td class="light">♕</td>

                    <td class="dark">♔</td>

                    <td class="light">♗</td>

                    <td class="dark">♘</td>

                    <td class="light">♖</td>

                </tr>

            </tbody>

        </table>

    </body>

</center>

</html>

Comments

Post a Comment