Number Keys Design Using Html And Css

When learning Html and Css as a beginner, you will be curious to make different designs and one design my students usually find interesting to do is the computer Number Keys Using Html And Css.

For a moment, you might ask why this kind of design? This design usually comes after learning Html table and its elements. So one of the way to test if they are comfortable with Html table is by asking them to design their computer number keys using Html table.

So in this tutorial, we will be creating a simple computer number keys layout Using Html And Css.

Html

<div class="main">
      <table class="main-table" cellpadding="5px" cellspacing="10px">
        <tr>
          <th colspan="4">Dell</th>
        </tr>
        <tr>
          <td>
            num <br />
            lock
          </td>
          <td>\</td>
          <td>*</td>
          <td>-</td>
        </tr>
        <tr>
          <td>7</td>
          <td>8</td>
          <td>9</td>
          <td rowspan="2">+</td>
        </tr>
        <tr>
          <td>4</td>
          <td>5</td>
          <td>6</td>
          <!-- <td>-</td> -->
        </tr>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <!-- <td></td> -->
          <td rowspan="2">Enter</td>
        </tr>
        <tr>
          <td colspan="2">0</td>
          <td>Del</td>
        </tr>
      </table>
    </div>

The properties that may be new to you there are;

• Colspan
• Rowspan
• Cellpadding
• Cellspacing

Here is a complete tutorial where I explain these four properties and some other Html table elements

Next we add Css to make our computer number keys design to look good and responsive

Css

.main {
      width: 60vw;
      margin: 0 auto;
      padding: 1rem;
      background-color: rgb(158, 141, 141);
      border-radius: 10px;
    }
    .main-table {
      width: 90%;
      margin: 0 auto;
      color: white;
      text-align: center;
    }
    .main-table tr td {
      border-left: 0.1px solid white;
      min-width: 50px;
      -webkit-box-shadow: 3px 3px 4px white;
              box-shadow: 3px 3px 4px white;
      background-color: black;
    }
    .main-table td,
    th {
      font-weight: 700;
      border-radius: 3px;
    }

When you add the Css code above correctly, you should have your good looking and responsive computer number keys on your browser as shown below

I know there are different design to the number keys of different keyboards but I am very convince that this short tutorial will give you a good idea on how to create a responsive computer number keys using Html table elements and Css.