Home
Blogging

How To Create a Responsive HTML Table In Blogger

Discover a straightforward method for incorporating a responsive HTML table into your Blogger site.

Using a table is an effective method for presenting organized data to readers. This approach facilitates better comprehension of the subject matter and makes it easier to digest the content.

How To Add Responsive HTML Table In Blogger

Making the subject matter easier to comprehend is important. Adding an HTML table is one way to achieve this on your Blogger website. 

However, not all tables are mobile-responsive, especially when they contain multiple rows and columns. To address this issue, I have provided two codes for responsive HTML tables that can be used on both Blogger and WordPress websites. 

You can easily copy the code and modify the table data to meet your needs by learning the basics of HTML table codes. The table will look different on mobile devices depending on your chosen style, and I have included two different mobile types for your convenience.

HTML Table Tags

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

Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines table data
<thead> Groups the header content in a table
<tbody> Group the body content in a table

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.

Post a Comment