Web Tutorials

</>   HTML Tutorial

HTML Forms

Tables

Form Practicals

Practicals

HTML

Hypertext Markup Language

Pachisi Practical

Source Code HTML + CSS

Click for download images Images Zip

  • <html>
  • <head>
  • <title>Pachisi using Pure CSS and HTML</title>
  • <style type="text/css">
  • .pachisi.table
  • {
  • border : 1px solid #fba43e !important;
  • margin : 20px auto !important;
  • width : 640px !important;
  • height : 640px;
  • border : 0px;
    •
  • }
  • .pachisi.table tr
  • {
  • background : none !important;
    •
  • }
  • .pachisi.table .empty
  • {
  • border : 0px !important;
    •
  • }
  • .pachisi.table .empty.red, .pachisi.table .empty.green, .pachisi.table .empty.yellow, .pachisi.table .empty.blue
  • {
  • width : 30px;
  • height : 30px;
  • border : 1px solid #fba43e !important;
    •
  • }
  • .pachisi.table .empty.red
  • {
  • background : #9f0e0e;
    •
  • }
  • .pachisi.table .empty.green
  • {
  • background : green;
    •
  • }
  • .pachisi.table .empty.yellow
  • {
  • background : yellow;
    •
  • }
  • .pachisi.table .empty.blue
  • {
  • background : blue;
    •
  • }
  • .pachisi.table .empty.Cyan
  • {
  • width : 30px;
  • height : 30px;
  • background : Cyan;
    •
  • }
  • .pachisi.table .img-td
  • {
  • text-align : center;
    •
  • }
  • </style>
  • </head>
  • <body>
  • <table class="pachisi table table-bordered">
  • <tbody>
  • <tr>
  • <td class="empty img-td" rowspan="8" colspan="2"style="vertical-align:top;">
    <img src="img/pachisi/board-coins1.png" /></td>
  • <td class="empty" rowspan="8" colspan="6"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty" rowspan="8" colspan="6"> </td>
  • <td class="empty img-td" rowspan="8" colspan="2"style="vertical-align:top;">
    <img src="img/pachisi/board-coins2.png" /></td>
  • </tr>
  • <tr>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
    •
  • </tr>
  • <tr>
  • <td class="empty red"> </td>
  • <td class="empty green"> </td>
  • <td class="empty red"> </td>
    •
  • </tr>
  • <tr>
  • <td class="empty green"> </td>
  • <td class="empty red"> </td>
  • <td class="empty green"> </td>
    •
  • </tr>
  • <tr>
  • <td class="empty red"> </td>
  • <td class="empty green"> </td>
  • <td class="empty red"> </td>
    •
  • </tr>
  • <tr>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
    •
  • </tr>
  • <tr>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
    •
  • </tr>
  • <tr>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
    •
  • </tr>
  • <tr>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty yellow"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty img-tdcnt" rowspan="3" colspan="3"><span class="valmd">
    <span class="valmd-in"><img src="img/pachisi/pachikalu.jpg" /></span></span></td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty Cyan"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
    •
  • </tr>
  • <tr>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty yellow"> </td>
  • <td class="empty red"> </td>
  • <td class="empty yellow"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty Cyan"> </td>
  • <td class="empty red"> </td>
  • <td class="empty Cyan"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
    •
  • </tr>
  • <tr>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty yellow"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty Cyan"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
    •
  • </tr>
  • <tr>
  • <td class="empty img-td" rowspan="8" colspan="2" style="vertical-align:bottom;">
    <img src="img/pachisi/board-coins3.png" /></td>
  • <td class="empty" rowspan="8" colspan="6"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty" rowspan="8" colspan="6"> </td>
  • <td class="empty img-td" rowspan="8" colspan="2" style="vertical-align:bottom;">
    <img src="img/pachisi/board-coins4.png" /></td>
    •
  • </tr>
  • <tr>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
    •
  • </tr>
  • <tr>
  • <td class="empty red"> </td>
  • <td class="empty blue"> </td>
  • <td class="empty red"> </td>
    •
  • </tr>
  • <tr>
  • <td class="empty blue"> </td>
  • <td class="empty red"> </td>
  • <td class="empty blue"> </td>
    •
  • </tr>
  • <tr>
  • <td class="empty red"> </td>
  • <td class="empty blue"> </td>
  • <td class="empty red"> </td>
    •
  • </tr>
  • <tr>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
    •
  • </tr>
  • <tr>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
  • <td class="empty red"> </td>
    •
  • </tr>
  • </tbody>
  • </table>
  • </body>
  • </html>