How To Add A Responsive HTML Table In Blogger & WordPress

A table is a great way to display systematic data to the readers. It helps them understand the topic easier and digest the content much easier.

That’s why you need to Add an HTML Table to your Blogger & WordPress website. But, not all table is Mobile responsive, especially when you insert multiple rows and column.

To solve this problem, I have given two Responsive HTML table codes in this article, which you can use on your Blogger and WordPress websites.

You can easily copy the code and replicate the table data and modify it according to your requirements. You just need to learn the basics of HTML table codes and how it works.

This is how the table looks in Desktop Devices. If you see this table on Mobile then you can see that it will load differently according to the style you have chosen.

I have included two different styles for mobile view. Try the below HTML codes and use them whichever you like.

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>	Groups the body content in a table

HTML Table code (Style-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">[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 (Style-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>Abhishek</td>
      <td>[email protected]</td>
      <td>India</td>
      <td>24</td>
    </tr>
    <tr>
      <td>Mark Ruffalo</td>
      <td>[email protected]</td>
      <td>United States</td>
      <td>54</td>
    </tr>
    <tr>
      <td>Tom Holland</td>
      <td>[email protected]</td>
      <td>United Kingdom</td>
      <td>25</td>
    </tr>
    <tr>
      <td>Tony Stark</td>
      <td>[email protected]</td>
      <td>United States</td>
      <td>57</td>
    </tr>
    <tr>
      <td>Benedict</td>
      <td>[email protected]</td>
      <td>UK</td>
      <td>45</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.

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

Now the Responsive Table is added to your Blogger website. You can further customize the heading color, font color, and font weight by changing the CSS code.

How to Add Responsive HTML Table in WordPress

To Add the Responsive Table in WordPress, follow the below steps

Login to your WordPress dashboard
Open the blog post and search for the “Custom HTML” block.
Now change the data in the given code and paste it inside the block.
Now publish the blog post.

Now the HTML table is added to your WordPress website. You can check the responsiveness of the table by opening it in Mobile view.

Conclusion

I hope you have successfully added a responsive HTML Table to your Blogger & WordPress website. If you have any doubts regarding this, you can ask me in the comment section.

If you like this content, then do share it on social media and follow us on Twitter @key2blogging