How To Create a Responsive HTML Table In Blogger

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.

TagDescription
<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.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *