How To Create a Responsive HTML Table In Blogger

HTML Table Tags

Here are the important terms used in an HTML Table code. You can learn more
about it here.

HTML Table code Code [1]

<table>
  <thead>
    <tr>
      <th scope="col">First Name</th>
      <th scope="col">Email Address</th>
      <th scope="col">Location</th>
      <th scope="col">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="First Name">Abhishek</td>
      <td data-label="Email Address">[email protected]</td>
      <td data-label="Location">India</td>
      <td data-label="Age">24</td>
    </tr>
    <tr>
      <td data-label="First Name">Mark Ruffalo</td>
      <td data-label="Email Address">[email protected]</td>
      <td data-label="Location">United States</td>
      <td data-label="Age">54</td>
    </tr>
    <tr>
      <td data-label="First Name">Tom Holland</td>
      <td data-label="Email Address">TomH[email protected]</td>
      <td data-label="Location">United Kingdom</td>
      <td data-label="Age">25</td>
    </tr>
    <tr>
      <td data-label="First Name">Tony Stark</td>
      <td data-label="Email Address">[email protected]</td>
      <td data-label="Location">United States</td>
      <td data-label="Age">57</td>
    </tr>
    <tr>
      <td data-label="First Name">Benedict</td>
      <td data-label="Email Address">[email protected]</td>
      <td data-label="Location">UK</td>
      <td data-label="Age">45</td>
    </tr>
  </tbody>
</table>
<style> 
table {border-collapse: collapse;border-spacing: 0;margin: 2rem 0; width: 100%;}
th, td {padding: 1rem 1.5rem; text-align: left;}
th {background-color: #008c5f; /* header background color */ color: #fff; /* header text color */ font-weight: 600;}
tr { padding: 0;}
td {vertical-align: middle;}
tr:nth-child(even) td {background-color: rgba(0, 0, 0, .075); /* striped background color */}
@media screen and (max-width: 640px) {
  thead, th {display: none;}
  tr, td { display: block;}
  tr {border: 1px solid rgba(0, 0 , 0 ,.15);margin-bottom: 2rem;}
  tr:last-child {margin-bottom: 0;}
  tr:nth-child(even) td { background-color: transparent;}
  td {clear: both;text-align: right;}
  td:before {
    content: attr(data-label)': ';float: left;font-weight: bold;margin-right: 1rem;}}
</style>

HTML Table Code [2]

<div class="Side_scroll_table">
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Location</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Priyansh</td>
      <td>[email protected]</td>
      <td>India</td>
      <td>16</td>
    </tr>
    <tr>
      <td>Riya Kumar</td>
      <td>[email protected]</td>
      <td>India</td>
      <td>23</td>
    </tr>
    <tr>
      <td>Harsh Gupta</td>
      <td>[email protected]</td>
      <td>India</td>
      <td>33</td>
    </tr>
    <tr>
      <td>Tony Goe</td>
      <td>[email protected]</td>
      <td>United States</td>
      <td>31</td>
    </tr>
    <tr>
      <td>Ben Stroke</td>
      <td>[email protected]</td>
      <td>USA</td>
      <td>32</td>
    </tr>
  </tbody>
</table>
</div>  
<style> 
.Side_scroll_table {margin: 1.5rem 0;overflow: auto;white-space: nowrap;}
table {border-collapse: collapse;border-spacing: 0;width: 100%;}
th, td {padding: 1rem 1.5rem;text-align: left;}
th {background-color: #008c5f; /* header background color */ color: #fff; /* header text color */font-weight: 600;}
tr {padding: 0;}
td {vertical-align: top;}
tr:nth-child(even) td {background-color: rgba(0, 0, 0, .075); /* striped background color */}
</style>

How to Add Responsive HTML Table in Blogger

To Add the responsive Table in Blogger, follow the below steps.

1. Log in to your Blogger dashboard
2. Open the Blog post in HTML View
3. Now copy the above HTML code and change the value
4. Now paste the code in the post editor and publish the blog post

I hope that you have successfully added a responsive HTML table to your
website on both Blogger. If you have any doubts or questions about this,
please feel free to ask me.