html responsive table


A table is a great way to show you systematic data in a short amount of time if you're going to read a topic. It helps to understand the topic easily and understand the content easily.

Add HTML  responsive
Table to your Blogger & WordPress website. But, not all HTML Tables are mobile responsive, sometime the table will not fit the page and be shown unformatted and just we need to use a CSS - media screen to set the value as mobile-friendly especially when you insert multiple rows and columns.


$ads={1}


Now we use the Meta tag viewport method for mobile phones, computer screens, and tablet browsers on those devices scaled down the entire web page to fit the screen.

Most of the important HTML tables tag are using  <table>,<thead>,<tbody>,<th>,<tr>,<td> and all tag are have the closing tags you need more details means .I already create article about the tables and tags.

And I found some Html responsive table Generator to customize easy and edit click here

How to Add Html responsive table  in Blogger


Open the blogger and login -> dashboard

Open New Post left side corner will see the button composer HTML to HTML view.

Now ,Just  copy the above HTML Code and change the values

Now paste the code on your perfect place in the article and submit.


Now the html table responsive added to your blogger website.

 

CSS:




body
{
margin:0;
padding:20px;
font-family: 'Poppins', sans-serif;
}
*
{
box-sizing:border-box;
}
h1
{
text-align:center;
}
.table
{
width:100%;
border-collapse:collapse;
}
.table td,
.table th
{
padding:1rem 1.5rem;
border:1px solid #ddd;
text-align:left;
font-weight:500;
}
.table th
{
background-color: #1AA7EC; 
color:#fff;
}
.table tbody tr:nth-child(even)
{
background-color:#f5f5f5;
}
@media(max-width:500px){
 .table thead
{
  display:none;
}
.table,
.table tbody,
.table tr,
.table td
{
display:block;
width:100%;
}
.table tr
{
margin-bottom:15px;
}
}



HTML CODE:


Here I given two type of codes One have data-label for responsive data in single and single data and another html table to show normal and scroll table and responsive.


<h1>HTML Table Responsive</h1>
<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Location</th>
	  <th>MobileNo</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Name">Rahul</td>
      <td data-label="Email">Rahul12.4@gmail.com</td>
      <td data-label="Location">Tamilnadu</td>
	  <td data-label="MobileNo">9632587411</td>
      <td data-label="Age">21</td>
    </tr>
    <tr>
      <td data-label="Name">Vishnu Reddy</td>
      <td data-label="Email">V.reddy93@gmail.com</td>
      <td data-label="Location">Andhra Pradesh</td>
	  <td data-label="MobileNo">9874563211</td>
      <td data-label="Age">27</td>
    </tr>
    <tr>
      <td data-label="Name">Priya dhurai</td>
      <td data-label="Email">priyad.143@gmail.com</td>
      <td data-label="Location">karnataka</td>
	  <td data-label="MobileNo">9512365478</td>
      <td data-label="Age">28</td>
    </tr>
    <tr>
      <td data-label="Name">vidhiya Menon</td>
      <td data-label="Email">vidhiyamenon.y@gmail.com</td>
      <td data-label="Location">Kerala</td>
	  <td data-label="MobileNo">9873214566</td>
      <td data-label="Age">23</td>
    </tr>
    <tr>
      <td data-label="Name">Mohammed Fahil</td>
      <td data-label="Email">mohfahil97@gmail.com</td>
      <td data-label="Location">Delhi</td>
	  <td data-label="MobileNo">9987456322</td>
      <td data-label="Age">30</td>
    </tr>
  </tbody>
</table>



<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Location</th>
	  <th>MobileNo</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Rahul</td>
      <td>Rahul12.4@gmail.com</td>
      <td>Tamilnadu</td>
	  <td>9632587411</td>
      <td>21</td>
    </tr>
    <tr>
      <td>Vishnu Reddy</td>
      <td>V.reddy93@gmail.com</td>
      <td>Andhra Pradesh</td>
	  <td>9874563211</td>
      <td>27</td>
    </tr>
    <tr>
      <td>Priya dhurai</td>
      <td>priyad.143@gmail.com</td>
      <td>karnataka</td>
	  <td>9512365478</td>
      <td>28</td>
    </tr>
    <tr>
      <td>vidhiya Menon</td>
      <td>vidhiyamenon.y@gmail.com</td>
      <td>Kerala</td>
	  <td>9873214566</td>
      <td>23</td>
    </tr>
    <tr>
      <td>Mohammed Fahil</td>
      <td>mohammedrahil97@gmail.com</td>
      <td>Delhi</td>
	  <td>9987456322</td>
      <td>30</td>
    </tr>
  </tbody>
</table>



html responsive table

html responsive table

How to Add Html responsive table in WordPress


Creating a WordPress table is easy and there are two ways to do it. 

You can create a "table" with rows and columns using "create table". 

search for the "Custom HTML" block and insert the above code and publish the blog post.

 



html responsive table


html responsive table


html responsive table


html responsive table


 $ads={2}


How to Add Bootstrap table responsive for website

Bootstrap frameworks provide every nice and clean layout for building tables. In Blogger and WordPress are only a few themes that support "bootstrap tables". But you are creating a table for a website bootstrap is the best option to use and bootstrap tables have additional classes that you can use to style the markup and easy to customize the responsive table or using to create bootstrap table generator
 
 



<div class="table-responsive">
<table class="table table-striped table-bordered table-responsive">
  <thead class="bg-primary text-white">
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Location</th>
	  <th>MobileNo</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Rahul</td>
      <td>Rahul12.4@gmail.com</td>
      <td>Tamilnadu</td>
	  <td>9632587411</td>
      <td>21</td>
    </tr>
    <tr>
      <td>Vishnu Reddy</td>
      <td>V.reddy93@gmail.com</td>
      <td>Andhra Pradesh</td>
	  <td>9874563211</td>
      <td>27</td>
    </tr>
    <tr>
      <td>Priya dhurai</td>
      <td>priyad.143@gmail.com</td>
      <td>karnataka</td>
	  <td>9512365478</td>
      <td>28</td>
    </tr>
    <tr>
      <td>vidhiya Menon</td>
      <td>vidhiyamenon.y@gmail.com</td>
      <td>Kerala</td>
	  <td>9873214566</td>
      <td>23</td>
    </tr>
    <tr>
      <td>Mohammed Fahil</td>
      <td>mohammedrahil97@gmail.com</td>
      <td>Delhi</td>
	  <td>9987456322</td>
      <td>30</td>
    </tr>
  </tbody>
</table>
</div>  
  


html responsive table

Post a Comment

Previous Post Next Post