Loading..
How to Create Responsive Table with Search Bar in Blogger

Hello friends! Today in this article we are going to talk about How to Create Responsive Table with Search Bar in Blogger. We will know all the How to Create Responsive Table with Search Bar in Blogger. So stay with this article to know in more detail.


We need to create tables many times in our Blogger blog post. As you know we can't use any plugin in Blogger like we use in WordPress. Tables can be created very easily using the WordPress plugin. But to create a table in Blogger we need coding. In this post you will find a table creation script which also has a feature bar of search bar with table.


Responsive Table with Search Bar Script for Blogger

If you also use the Blogger platform for blogging, you will know that we do not have any feature in Blogger to add responsive tables. To create a table we have to use CSS, HTML and JavaScript coding. Which makes our table very responsive.

$ads={2}

A lot of people don't know coding. But now there is no need to worry because you will find the table making code in the post below. You just have to follow some steps which are given below. The special thing about this table is that you will also find a search bar to search in the table. Which is a wonderful feature for blogger.


How to Create Responsive Table with Search Bar in Blogger (Step by Step)


Before you know the steps to Create Responsive Table with Search Bar in Blogger, we would recommend you to make a backup of your Blog template, because if anything goes wrong then you have save your blog design safely.
  • Login to your Blogger.com dashboard
  • Click on Theme Section and then click on the Customize arrow
  • Now click on Edit HTML
  • Now click on the code section and press Ctrl+F, you will see a search bar on the display screen.
  • Copy the below code
  • Search for </head>, Paste the code above to this </head> code

$ads={2}


<style>

* {

  box-sizing: border-box;

}

#wikiInput {

  background-image: url('/css/searchicon.png');

  background-position: 10px 10px;

  background-repeat: no-repeat;

  width: 100%;

  font-size: 16px;

  padding: 12px 20px 12px 40px;

  border: 1px solid #ddd;

  margin-bottom: 12px;

}

#wikiTable {

  border-collapse: collapse;

  width: 100%;

  border: 1px solid #ddd;

  font-size: 18px;

  background-color: #15ff0038;

}

#wikiTable th, #wikiTable td {

  text-align: left;

  padding: 12px;

}

#wikiTable tr {

  border-bottom: 1px solid #ddd;

}

#wikiTable tr.header, #wikiTable tr:hover {

  background-color: #f1f1f1;

}

</style>


  • Click on Save theme icon.
  • Now again open your Blogger.com dashboard
  • Click on New Post and click on pencil icon.
  • Now Click on HTML View
  • Copy the below code and paste here.
$ads={2}


<input type="text" id="wikiInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in name">

<table id="wikiTable">

  <tr class="header">

    <th style="width:50%;">Name</th>

    <th style="width:50%;">Country</th>

  </tr>

  <tr>

    <td>Wiki 1</td>

    <td>Country 1</td>

  </tr>

  <tr>

    <td>Wiki 2</td>

    <td>Country 2</td>

  </tr>

  <tr>

    <td>Wiki 3</td>

    <td>Country 3</td>

  </tr>

  <tr>

    <td>Wiki 4</td>

    <td>Country 4</td>

  </tr>

  <tr>

    <td>Wiki 5</td>

    <td>Country 5</td>

  </tr>

  <tr>

    <td>Wiki 6</td>

    <td>Country 6</td>

  </tr>

  <tr>

    <td>Wiki 7</td>

    <td>Country 7</td>

  </tr>

  <tr>

    <td>Wiki 8</td>

    <td>Country 8</td>

  </tr>

</table>

<script>

function myFunction() {

  var input, filter, table, tr, td, i, txtValue;

  input = document.getElementById("wikiInput");

  filter = input.value.toUpperCase();

  table = document.getElementById("wikiTable");

  tr = table.getElementsByTagName("tr");

  for (i = 0; i < tr.length; i++) {

    td = tr[i].getElementsByTagName("td")[0];

    if (td) {

      txtValue = td.textContent || td.innerText;

      if (txtValue.toUpperCase().indexOf(filter) > -1) {

        tr[i].style.display = "";

      } else {

        tr[i].style.display = "none";

      }

    }       

  }

}

</script>


  • Now Publish your Post
  • You will Successfully create a Responsive Table with Search Bar in Blogger.


Conclusion:

The purpose of today post is to provide you with the How to Create Responsive Table with Search Bar in Blogger. Did you like these How to Create Responsive Table with Search Bar in Blogger? You must definitely give us your feedback in the comment box below. If you also want to give us any kind of Suggestion, then share your opinion with us in the Comment Box.

Thank You!
close