How to create a html table using html and CSS

 Hi. in this article we will learn, how to create an HTML table. An HTML table is very important for a website site and website development. An HTML table can help us organize data.

Here is the demo HTML picture that we want to create.

How to create a HTML table using html and CSS

Html Table Code 

<div class="table__area">
        <table>
            <thead>
              <tr>
                <th>No</th>
                <th>User Name / <br> Client ID</th>
                <th>Email Address</th>
                <th>Mobile Number</th>
                <th>Packages / <br> Period</th>
                <th colspan="2">Registered/Expiry <br> Date</th>
                <th>Renewal <br> History</th>
                <th colspan="2">Payment History</th>
                <th colspan="2">Overwal <br> Request</th>
                <th>Remarks</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th rowspan="2">1.</th>
                <td rowspan="2">Ali Abu <br> 1234567</td>
                <td rowspan="2">abc@gmail.com</td>
                <td rowspan="2">+601*********</td>
                <td rowspan="2">Classic <br> (3mths)</td>
                <td>Join</td>
                <td>:D/M/Y</td>
                <td rowspan="2">None</td>
                <td>Jan</td>
                <td>:D/M/Y</td>
                <td>Workout Plan</td>
                <td>:1</td>
                <td rowspan="2"><a href="#">View</a> / <a href="#">Edit</a></td>
              </tr>
              <tr>
                <td>Expiry</td>
                <td>:D/M/Y</td>
                <td>Feb</td>
                <td>:D/M/Y</td>
                <td>Diet Plan</td>
                <td>:2</td>
              </tr>


              <tr>
                <th rowspan="2">2.</th>
                <td rowspan="2">Ali Abu <br> 1234567</td>
                <td rowspan="2">abc@gmail.com</td>
                <td rowspan="2">+601*********</td>
                <td rowspan="2">Classic <br> (6mths)</td>
                <td>Join</td>
                <td>:D/M/Y</td>
                <td rowspan="2">Classic <br> (6mths)</td>
                <td>Jan</td>
                <td>:D/M/Y</td>
                <td>Workout Plan</td>
                <td>:1</td>
                <td rowspan="2"><a href="#">View</a> / <a href="#">Edit</a></td>
              </tr>
              <tr>
                <td>Expiry</td>
                <td>:D/M/Y</td>
                <td>Feb</td>
                <td>:D/M/Y</td>
                <td>Diet Plan</td>
                <td>:2</td>
              </tr>

              <tr>
                <th rowspan="2">3.</th>
                <td rowspan="2">Ali Abu <br> 1234567</td>
                <td rowspan="2">abc@gmail.com</td>
                <td rowspan="2">+601*********</td>
                <td rowspan="2">Classic <br> (9mths)</td>
                <td>Join</td>
                <td>:D/M/Y</td>
                <td rowspan="2">None</td>
                <td>Jan</td>
                <td>:D/M/Y</td>
                <td>Workout Plan</td>
                <td>:1</td>
                <td rowspan="2"><a href="#">View</a> / <a href="#">Edit</a></td>
              </tr>
              <tr>
                <td>Expiry</td>
                <td>:D/M/Y</td>
                <td>Feb</td>
                <td>:D/M/Y</td>
                <td>Diet Plan</td>
                <td>:2</td>
              </tr>


              <tr>
                <th rowspan="2">4.</th>
                <td rowspan="2">Ali Abu <br> 1234567</td>
                <td rowspan="2">abc@gmail.com</td>
                <td rowspan="2">+601*********</td>
                <td rowspan="2">Classic <br> (12mths)</td>
                <td>Join</td>
                <td>:D/M/Y</td>
                <td rowspan="2">Classic <br> (6mths)</td>
                <td>Jan</td>
                <td>:D/M/Y</td>
                <td>Workout Plan</td>
                <td>:1</td>
                <td rowspan="2"><a href="#">View</a> / <a href="#">Edit</a></td>
              </tr>
              <tr>
                <td>Expiry</td>
                <td>:D/M/Y</td>
                <td>Feb</td>
                <td>:D/M/Y</td>
                <td>Diet Plan</td>
                <td>:2</td>
              </tr>

              <tr>
                <th rowspan="2">5.</th>
                <td rowspan="2">Ali Abu <br> 1234567</td>
                <td rowspan="2">abc@gmail.com</td>
                <td rowspan="2">+601*********</td>
                <td rowspan="2">Classic <br> (15mths)</td>
                <td>Join</td>
                <td>:D/M/Y</td>
                <td rowspan="2">None</td>
                <td>Jan</td>
                <td>:D/M/Y</td>
                <td>Workout Plan</td>
                <td>:1</td>
                <td rowspan="2"><a href="#">View</a> / <a href="#">Edit</a></td>
              </tr>
              <tr>
                <td>Expiry</td>
                <td>:D/M/Y</td>
                <td>Feb</td>
                <td>:D/M/Y</td>
                <td>Diet Plan</td>
                <td>:2</td>
              </tr>
            </tbody>
        </table>

    </div>

CSS Code 

        *{
	    box-sizing: border-box;
        }
        .table__area table{
            width: 100%;
            border-collapse: collapse;
            caption-side: bottom;
        }
        .table__area table, td, th{
            border: 2px solid orange;
            padding: 10px;
            text-align: center;
        }