Responsive HTML Table In Blogger & WordPress

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 code in this article, which you can use it on your Blogger and WordPress website.

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.

responsive-Table-demo

This is how the table looks in Desktop Devices. If you see this table in Mobile than 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 it which ever you like.

HTML Table Tags

Here are the important terms used in a 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.

  1. Login 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

Now the Responsive Table is added to your Blogger website. You can further customize the heading color, font color, 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

how to add responsive HTML table in wordpress
  1. Login to your WordPress dashboard
  2. Open the blog post and search for “Custom HTML” block.
  3. Now change the data in the given code and paste it inside the block.
  4. 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, than do share it on social media and follow us on Twitter @key2blogging

Read More: How to Add Sticky Footer Ad in WordPress

Similar Posts

Leave a Reply

Your email address will not be published.