જયેશ સુતરીયા વેબ બ્લૉગ : Table

❀ 👉 અહીં બ્લોગ કે વેબસાઈટ માં Table & Tabs button મૂકવા માટેના ઉપયોગી કોડ મુકવામાં આવેલ છે....

❆ Table _ Tabs create Button code Below ❆

❆ ➯ 12 Month Vertical Tabs create code click here

      

<style>
.tabs-container {
	width: 100%;
	display: flex;
	align-items: flex-start;
}
#tabs-nav {
	margin-right: -0px;
	position: relative;
	flex: 10%;
}
div#tabs-nav a:nth-child(even) {
	margin: 3px 0;
}
a.tabs-menu {
	display: block;
	background-color: #00b389;
	font-size: 12px;
	font-family: Arial;
  text-align:center;
	color: #fff;
	padding: 5px 5px;
	font-weight: bold;
	text-decoration: none;
	border: solid 0px black;
	border-right: 0;
	border-radius: 3px 0 0 3px;
}
a.tabs-menu.tabs-menu-active {
	background-color: #fff;
	border: solid 0px #001a14;
	color: #6b6b6b;
	border-right: 0;
}
.tabs-content {
	border: solid 1px #001a14;
  margin-top: 2px;
	background-color: #fff;
	overflow: hidden;
	flex: 90%;
	line-height: 1.3;
}
.tabs-panel {
	display: none;
	min-height: 150px;
	overflow: auto;
	padding: 10px;
	height: 500px;
	font-size: 13px;
}

/************ CSS Animation ***********/

.animated-tabs {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both; 
	animation-fill-mode: both;
}
@-webkit-keyframes flash { 
    0%, 50%, 100% {opacity: 1;} 
    25%, 75% {opacity: 0;} 
} 
@keyframes flash { 
    0%, 50%, 100% {opacity: 1;} 
    25%, 75% {opacity: 0;} 
} 
.flash { 
    -webkit-animation-name: flash; 
    animation-name: flash; 
}

</style>

<body>
<div class="tabs-container" id="hcg-tabs-0">

 <div id="tabs-nav">
   
   <a class="tabs-menu tabs-menu-active" data-target="tab_1" href="#">January</a>
	<a class="tabs-menu" data-target="tab_2" href="#">February </a>
	<a class="tabs-menu" data-target="tab_3" href="#">March </a>
	<a class="tabs-menu" data-target="tab_4" href="#">April</a>
	<a class="tabs-menu" data-target="tab_5" href="#">May</a>
	<a class="tabs-menu" data-target="tab_6" href="#">June</a>
	<a class="tabs-menu" data-target="tab_7" href="#">July</a>
	<a class="tabs-menu" data-target="tab_8" href="#">August</a>
	<a class="tabs-menu" data-target="tab_9" href="#">September</a>
	<a class="tabs-menu" data-target="tab_10" href="#">October</a>
	<a class="tabs-menu" data-target="tab_11" href="#">November</a>
	<a class="tabs-menu" data-target="tab_12" href="#">December</a>
   <a class="tabs-menu" data-target="tab_13" href="#">J.p.S.</a>
 </div>

 <div class="tabs-content">   
   
	<div class="tabs-panel" id="tab_1" style="display: block;">
		<div class="flex-content">
			Ohhh....? Contents Type here Tabs-1 
		</div>
	</div>

	<div class="tabs-panel" id="tab_2">
		<div class="flex-content">
			Ohhh....? Contents Type here Tabs-2
		</div>
	</div>

	<div class="tabs-panel" id="tab_3">
		<div class="flex-content">
			Ohhh....? Contents Type here Tabs-3
		</div>
	</div>

	<div class="tabs-panel" id="tab_4">
		<div class="flex-content">
			Ohhh....? Contents Type here Tabs-4
		</div>
	</div>

	<div class="tabs-panel" id="tab_5">
		<div class="flex-content">
			Ohhh....? Contents Type here Tabs-5
		</div>
	</div>

	<div class="tabs-panel" id="tab_6">
		<div class="flex-content">
			Ohhh....? Contents Type here Tabs-6
		</div>
	</div>

	<div class="tabs-panel" id="tab_7">
		<div class="flex-content">
			Ohhh....? Contents Type here Tabs-7
		</div>
	</div>

	<div class="tabs-panel" id="tab_8">
		<div class="flex-content">
			Ohhh....? Contents Type here Tabs-8
		</div>
	</div>

	<div class="tabs-panel" id="tab_9">
		<div class="flex-content">
			Ohhh....? Contents Type here Tabs-9
		</div>
	</div>

	<div class="tabs-panel" id="tab_10">
		<div class="flex-content">
			Ohhh....? Contents Type here Tabs-10
		</div>
	</div>

	<div class="tabs-panel" id="tab_11">
		<div class="flex-content">
			Ohhh....? Contents Type here Tabs-11
		</div>
	</div>

	<div class="tabs-panel" id="tab_12">
		<div class="flex-content">
			Ohhh....? Contents Type here Tabs-12
		</div>
	</div>

  <div class="tabs-panel" id="tab_13">
		<div class="flex-content">
          <pre style="background: rgb(253, 253, 236); border: 1px groove; font-family: bhuj unicode; font-size: 15px; line-height: inherit; margin-bottom: 0px; margin-top: 0px; outline: 0px; overflow-wrap: break-word; overflow: inherit; padding: 5px; text-align: left; vertical-align: baseline; white-space: pre-wrap;">

Ohhh....? Contents Type here Tabs-13
  This Section is working Mode <br />

			Jayeshkumar
          p.
          sutariya
          trapaj
          talaja
          bhavnagar
   
          
          
          
          </pre>
		</div>
	</div>
 
   
   
   
   
 </div>

</div>

<script>
(function () {
	var tabs_menu = document.getElementsByClassName("tabs-menu");
	for (var k = 0; k < tabs_menu.length; k++) {
		tabs_menu[k].onclick = js_tabs;
	}
	function js_tabs() {
		var tab_id = this.getAttribute("data-target");
		var tabs_panel = document.getElementsByClassName("tabs-panel");

		for (var i = 0; i < tabs_panel.length; i++) {
			tabs_panel[i].style.display = "none";
			tabs_panel[i].className = tabs_panel[i].className.replace(" animated-tabs flash", "");
		}
		for (var j = 0; j < tabs_menu.length; j++) {
			tabs_menu[j].className = tabs_menu[j].className.replace(" tabs-menu-active", "");
		}
		this.className += " tabs-menu-active";
		var current_tab = document.getElementById(tab_id);
		current_tab.style.display = "block";
		current_tab.className += " animated-tabs flash";
		return false;
	}
})();
</script>

</body>


➯ Type this code in Page in HTML mode

❆ ➯ Horizontal Tabs create code click here

 

<style>
.tabs-container {
	width: 100%;
}
div#tabs-nav {
	position: relative;
	display: flex;
	justify-content: flex-start;
}
div#tabs-nav a:nth-child(even) {
	margin: 0 1px;
}
a.tabs-menu {
	display: inline-block;
	background-color: #00b389;
	font-size: 12px;
	font-family: Arial;
	color: #fff;
	padding: 5px 10px;
	font-weight: None;
	text-decoration: none;
	border: solid 0px Black;
	border-bottom: 0;
	border-radius: 3px 3px 0 0;
}
a.tabs-menu.tabs-menu-active {
	background-color: #fff;
	border: solid 0px #001a14;
	color: #6b6b6b;
	border-bottom: 0;
}
.tabs-content {
	border: solid 1px #001a14;
	margin-top: 1px;
	background-color: #fff;
	overflow: hidden;
	line-height: 1.3;
}
.tabs-panel {
	display: none;
	min-height: 150px;
	overflow: auto;
	padding: 10px;
	height: 500px;
	font-size: 13px;
}
.flex-content {
	display: flex;
	height: 100%;
	justify-content: center;
	align-items: flex-start;
}

/************ CSS Animation ***********/

.animated-tabs {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both; 
	animation-fill-mode: both;
}
@-webkit-keyframes boingInUp {
    0% {
        opacity: 0;
       -webkit-transform-origin: 50% 0%;
        -webkit-transform: perspective(800px) rotateX(-90deg);
    }
    50% {
        opacity: 1;
        -webkit-transform-origin: 50% 0%;
        -webkit-transform: perspective(800px) rotateX(50deg);
    }
    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 0%;
        -webkit-transform: perspective(800px) rotateX(0deg);
    }
}
@keyframes boingInUp {
    0% {
        opacity: 0;
        transform-origin: 50% 0%;
        transform: perspective(800px) rotateX(-90deg);
    }
    50% {
        opacity: 1;
        transform-origin: 50% 0%;
        transform: perspective(800px) rotateX(50deg);
    }
    100% {
        opacity: 1;
        transform-origin: 50% 0%;
        transform: perspective(800px) rotateX(0deg);
    }
}
.boingInUp {
    -webkit-animation-name: boingInUp;
    animation-name: boingInUp;
}


</style>

<body>
<div id="hcg-tabs-1" class="tabs-container">

 <div id="tabs-nav">
	<a href="#" data-target="tab_1" class="tabs-menu tabs-menu-active">Tab 1 </a>
	<a href="#" data-target="tab_2" class="tabs-menu">Tab 2</a>
	<a href="#" data-target="tab_3" class="tabs-menu">Tab 3</a>
	<a href="#" data-target="tab_4" class="tabs-menu">Tab 4</a>
   <a href="#" data-target="tab_5" class="tabs-menu">Tab 5</a>
   <a href="#" data-target="tab_6" class="tabs-menu">Tab 6 </a>
   <a href="#" data-target="tab_7" class="tabs-menu">Tab 7 </a>
   <a href="#" data-target="tab_8" class="tabs-menu">Tab 8 </a>
   <a href="#" data-target="tab_9" class="tabs-menu">Tab 9 </a>
   <a href="#" data-target="tab_10" class="tabs-menu">Tab 10 </a>
   <a href="#" data-target="tab_11" class="tabs-menu">Tab 11 </a>
   <a href="#" data-target="tab_12" class="tabs-menu">Tab 12 </a>
 </div>

 <div class="tabs-content">
	<div id="tab_1" class="tabs-panel" style="display:block">
		<div class="flex-content">
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus....
		</div>
	</div>

	<div id="tab_2" class="tabs-panel">
		<div class="flex-content">
			A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine....
		</div>
	</div>

	<div id="tab_3" class="tabs-panel">
		<div class="flex-content">
			Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo....
		</div>
	</div>

	<div id="tab_4" class="tabs-panel">
		<div class="flex-content">
			hujjjjjjjjjjjjjjjjjjjjjjjjj
		</div>
	</div>

 <div id="tab_5" class="tabs-panel">
		<div class="flex-content">
			kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
		</div>
	</div>
   
 <div id="tab_6" class="tabs-panel">
		<div class="flex-content">
			ttttttttttttttttttttttttttttttttttttttt
		</div>
	</div>
   
   <div id="tab_7" class="tabs-panel">
		<div class="flex-content">
			hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
		</div>
	</div>
   
   <div id="tab_8" class="tabs-panel">
		<div class="flex-content">
			aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		</div>
	</div>
   
   <div id="tab_9" class="tabs-panel">
		<div class="flex-content">
			ssssssssssssssssssssssssssssssssssssssssssssssssss
		</div>
	</div>
   
   <div id="tab_10" class="tabs-panel">
		<div class="flex-content">
			ooooooooooooooooooooooooooooooooooo
		</div>
	</div>
   
   <div id="tab_11" class="tabs-panel">
		<div class="flex-content">
			uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
		</div>
	</div>
   
   <div id="tab_12" class="tabs-panel">
		<div class="flex-content">
       <pre style="background: rgb(253, 253, 236); border: 1px groove; font-size: 15px; line-height: inherit; margin-bottom: 0px; margin-top: 0px; outline: 0px; overflow-wrap: break-word; font-family: bhuj unicode; text-align: left; overflow: inherit; padding: 5px; vertical-align: baseline; white-space: pre-wrap;">

  This Section is working Mode <br />
  
  lllllllllllllllllllllllllllllllllllllllllll
  
  
</pre>   
          
          

		</div>
	</div>
   
   
   
   
   
   
   
 </div>

</div>

<script>
(function () {
	var tabs_menu = document.getElementsByClassName("tabs-menu");
	for (var k = 0; k < tabs_menu.length; k++) {
		tabs_menu[k].onclick = js_tabs;
	}
	function js_tabs() {
		var tab_id = this.getAttribute("data-target");
		var tabs_panel = document.getElementsByClassName("tabs-panel");

		for (var i = 0; i < tabs_panel.length; i++) {
			tabs_panel[i].style.display = "none";
			tabs_panel[i].className = tabs_panel[i].className.replace(" animated-tabs boingInUp", "");
		}
		for (var j = 0; j < tabs_menu.length; j++) {
			tabs_menu[j].className = tabs_menu[j].className.replace(" tabs-menu-active", "");
		}
		this.className += " tabs-menu-active";
		var current_tab = document.getElementById(tab_id);
		current_tab.style.display = "block";
		current_tab.className += " animated-tabs boingInUp";
		return false;
	}
})();
</script>

</body>



➯ Type this code in Page in HTML mode

❆ ➯ Table Create code for 3 Column _ 15 Rows click here

 

<center>
<table bgcolor="" border="3" style="border: 2px solid black; height: 550px; width: 730px;">
<tbody>
<tr>
<td style="text-align: center; width: 56px;"><strong><span style="color: red;">NO</span></strong></td>
<td style="text-align: center; width: 245px;"><strong><span style="color: red;">SUBJECT DISCRIPTION</span></strong></td>
<td style="text-align: center; width: 300px;"><strong><span style="color: red;">RELATED VIDEO</span></strong></td>
</tr>
<tr>
<td style="text-align: center; width: 56px;"><span face=""arial" , "helvetica" , sans-serif" style="color: red;">1</span></td>
<td style="text-align: center; width: 245px;"><h3><span style="color: blue; font-family: arial; font-size: small; font-weight: normal;">###</span></h3>
</td>
<td style="text-align: center; width: 287px;">####</td>
</tr>
<tr>
<td style="text-align: center; width: 56px;"><span face=""arial" , "helvetica" , sans-serif" style="color: red;">2</span></td>
<td style="text-align: center; width: 245px;"><h3><span style="color: blue; font-family: arial; font-size: small; font-weight: normal;">###</span></h3>
</td>
<td style="text-align: center; width: 287px;">####</td>
</tr>
<tr>
<td style="text-align: center; width: 56px;"><span face=""arial" , "helvetica" , sans-serif" style="color: red;">3</span></td>
<td style="text-align: center; width: 245px;"><h3><span style="color: blue; font-family: arial; font-size: small; font-weight: normal;">###</span></h3>
</td>
<td style="text-align: center; width: 287px;">####</td>
</tr>
<tr>
<td style="text-align: center; width: 56px;"><span face=""arial" , "helvetica" , sans-serif" style="color: red;">4</span></td>
<td style="text-align: center; width: 245px;"><h3><span face=""bhavnagar unicode" , sans-serif" style="color: blue; font-weight: normal;">###.</span></h3>
</td>
<td style="text-align: center; width: 287px;">####</td>
</tr>
<tr>
<td style="text-align: center; width: 56px;"><span face=""arial" , "helvetica" , sans-serif" style="color: red;">5</span></td>
<td style="text-align: center; width: 245px;"><h3><span style="color: blue; font-family: arial; font-size: small; font-weight: normal;">###</span></h3>
</td>
<td style="text-align: center; width: 287px;">####</td>
</tr>
<tr>
<td style="text-align: center; width: 56px;"><span face=""arial" , "helvetica" , sans-serif" style="color: red;">6</span></td>
<td style="text-align: center; width: 245px;"><h3><span style="color: blue; font-family: arial; font-size: small; font-weight: normal;">###</span></h3>
</td>
<td style="text-align: center; width: 287px;">####</td>
</tr>
<tr>
<td style="text-align: center; width: 56px;"><span face=""arial" , "helvetica" , sans-serif" style="color: red;">7</span></td>
<td style="text-align: center; width: 245px;"><h3><span style="color: blue; font-family: arial; font-size: small; font-weight: normal;">###</span></h3>
</td>
<td style="text-align: center; width: 287px;">####</td>
</tr>
<tr>
<td style="text-align: center; width: 56px;"><span face=""arial" , "helvetica" , sans-serif" style="color: red;">8</span></td>
<td style="text-align: center; width: 245px;"><h3><span style="color: blue; font-family: arial; font-size: small; font-weight: normal;">###</span></h3>
</td>
<td style="text-align: center; width: 287px;">####</td>
</tr>
<tr>
<td style="text-align: center; width: 56px;"><span face=""arial" , "helvetica" , sans-serif" style="color: red;">9</span></td>
<td style="text-align: center; width: 245px;"><h3><span style="color: blue; font-family: arial; font-size: small; font-weight: normal;">###</span></h3>
</td>
<td style="text-align: center; width: 287px;">####</td>
</tr>
<tr>
<td style="text-align: center; width: 56px;"><span face=""arial" , "helvetica" , sans-serif" style="color: red;">10</span></td>
<td style="text-align: center; width: 245px;"><h3><span style="color: blue; font-family: arial; font-size: small; font-weight: normal;">###</span></h3>
</td>
<td style="text-align: center; width: 287px;">####</td>
</tr>
<tr>
<td style="text-align: center; width: 56px;"><span face=""arial" , "helvetica" , sans-serif" style="color: red;">11</span></td>
<td style="text-align: center; width: 245px;"><h3><span style="color: blue; font-family: arial; font-size: small; font-weight: normal;">###</span></h3>
</td>
<td style="text-align: center; width: 287px;">####</td>
</tr>
<tr>
<td style="text-align: center; width: 56px;"><span face=""arial" , "helvetica" , sans-serif" style="color: red;">12</span></td>
<td style="text-align: center; width: 245px;"><h3><span style="color: blue; font-family: arial; font-size: small; font-weight: normal;">###</span></h3>
</td>
<td style="text-align: center; width: 287px;">####</td>
</tr>
<tr>
<td style="text-align: center; width: 56px;"><span face=""arial" , "helvetica" , sans-serif" style="color: red;">13</span></td>
<td style="text-align: center; width: 245px;"><h3><span style="color: blue; font-family: arial; font-size: small; font-weight: normal;">###</span></h3>
</td>
<td style="text-align: center; width: 287px;">####</td>
</tr>
<tr>
<td style="text-align: center; width: 56px;"><span face=""arial" , "helvetica" , sans-serif" style="color: red;">14</span></td>
<td style="text-align: center; width: 245px;"><h3><span style="color: blue; font-family: arial; font-size: small; font-weight: normal;">###</span></h3>
</td>
<td style="text-align: center; width: 287px;">####</td>
</tr>
<tr>
<td style="text-align: center; width: 56px;"><span face=""arial" , "helvetica" , sans-serif" style="color: red;">15</span></td>
<td style="text-align: center; width: 245px;"><span face=""bhavnagar unicode" , sans-serif" style="color: blue;">Wel-come</span></td>
<td style="text-align: center; width: 287px;">300*400</td>
</tr>
</tbody>
</table>
</center>


➯ Type this code in Page in HTML mode

❆ ➯ Table Create code for 3 Column _ 10 Rows Blank click here

 

<center>
<table bgcolor="" border="3" style="border: 2px solid black; height: 550px; width: 730px;">
<tbody>
<tr>
<td style="text-align: center; width: 56px;"><strong><span style="color: red;">NO</span></strong></td>
<td style="text-align: center; width: 245px;"><strong><span style="color: red;">SUBJECT DISCRIPTION</span></strong></td>
<td style="text-align: center; width: 300px;"><strong><span style="color: red;">RELATED VIDEO</span></strong></td>
</tr>
<tr style="height: 52px;">
<td style="height: 52px; text-align: center; width: 36px;"><span face=""arial" , "helvetica" , sans-serif" style="color: red;">1</span></td>
<td style="height: 52px; text-align: center; width: 117px;"><h3>
 </h3>
</td>
<td style="height: 52px; text-align: center; width: 435px;"></td>
</tr>
<tr style="height: 61px;">
<td style="height: 61px; text-align: center; width: 36px;"><span face=""arial" , "helvetica" , sans-serif" style="color: red;">2</span></td>
<td style="height: 61px; text-align: center; width: 117px;"><h3>
 </h3>
</td>
<td style="height: 61px; text-align: center; width: 435px;"></td>
</tr>
<tr style="height: 54px;">
<td style="height: 54px; text-align: center; width: 36px;"><span face=""arial" , "helvetica" , sans-serif" style="color: red;">3</span></td>
<td style="height: 54px; text-align: center; width: 117px;"><h3>
 </h3>
</td>
<td style="height: 54px; text-align: center; width: 435px;"></td>
</tr>
<tr style="height: 58px;">
<td style="height: 58px; text-align: center; width: 36px;"><span face=""arial" , "helvetica" , sans-serif" style="color: red;">4</span></td>
<td style="height: 58px; text-align: center; width: 117px;"><h3>
 </h3>
</td>
<td style="height: 58px; text-align: center; width: 435px;"></td>
</tr>
<tr style="height: 56px;">
<td style="height: 56px; text-align: center; width: 36px;"><span face=""arial" , "helvetica" , sans-serif" style="color: red;">5</span></td>
<td style="height: 56px; text-align: center; width: 117px;"><h3>
 </h3>
</td>
<td style="height: 56px; text-align: center; width: 435px;"></td>
</tr>
<tr style="height: 26px;">
<td style="height: 26px; text-align: center; width: 36px;"><span face=""arial" , "helvetica" , sans-serif" style="color: red;">6</span></td>
<td style="height: 26px; text-align: center; width: 117px;"><h3>
 </h3>
</td>
<td style="height: 26px; text-align: center; width: 435px;"></td>
</tr>
<tr style="height: 47px;">
<td style="height: 47px; text-align: center; width: 36px;"><span face=""arial" , "helvetica" , sans-serif" style="color: red;">7</span></td>
<td style="height: 47px; text-align: center; width: 117px;"><h3>
 </h3>
</td>
<td style="height: 47px; text-align: center; width: 435px;"></td>
</tr>
<tr style="height: 46px;">
<td style="height: 46px; text-align: center; width: 36px;"><span face=""arial" , "helvetica" , sans-serif" style="color: red;">8</span></td>
<td style="height: 46px; text-align: center; width: 117px;"><h3>
 </h3>
</td>
<td style="height: 46px; text-align: center; width: 435px;"></td>
</tr>
<tr style="height: 45px;">
<td style="height: 45px; text-align: center; width: 36px;"><span face=""arial" , "helvetica" , sans-serif" style="color: red;">9</span></td>
<td style="height: 45px; text-align: center; width: 117px;"><h3>
 </h3>
</td>
<td style="height: 45px; text-align: center; width: 435px;"></td>
</tr>
<tr style="height: 20px;">
<td style="height: 20px; text-align: center; width: 36px;"><span face=""arial" , "helvetica" , sans-serif" style="color: red;">10</span></td>
<td style="height: 20px; text-align: center; width: 117px;"><span face=""bhavnagar unicode" , sans-serif" style="color: blue;">Wel-come</span></td>
<td style="height: 20px; text-align: center; width: 435px;">600*480 </td>
</tr>
</tbody>
</table>
</center>

❆ ➯ MP3 song table ctreate code click here

 

<center>
<table bgcolor="" border="1" style="border: 1px solid black; height: 550px; width: 700px;">
<tbody>
<tr style="height: 2px;">
<td style="height: 2px; text-align: center; width: 11px;">No</td>
<td style="height: 2px; text-align: center; width: 249px;">Prayer MP3  </td>
<td style="height: 2px; text-align: center; width: 10px;">No</td>
<td style="height: 2px; text-align: center; width: 253px;">Prayer MP3 </td>
</tr>
<tr style="height: 11px;">
<td style="height: 11px; text-align: center; width: 11px;"> 1</td>
<td style="height: 11px; text-align: center; width: 249px;"><audio controls="controls">

<source src="##"></source></audio> <br />  Caption type here </td>
<td style="height: 11px; text-align: center; width: 10px;">11 </td>
<td style="height: 11px; text-align: center; width: 253px;"><audio controls="controls">

<source src="##"></source></audio> <br />  Caption type here </td>
</tr>
<tr style="height: 30px;">
<td style="height: 30px; text-align: center; width: 11px;">2 </td>
<td style="height: 30px; text-align: center; width: 249px;"><audio controls="controls">

<source src="##"></source></audio> <br />   Caption type here </td>
<td style="height: 30px; text-align: center; width: 10px;">12 </td>
<td style="height: 30px; text-align: center; width: 253px;"><audio controls="controls">

<source src="##"></source></audio> <br />   Caption type here </td>
</tr>
<tr style="height: 29px;">
<td style="height: 29px; text-align: center; width: 11px;">3 </td>
<td style="height: 29px; text-align: center; width: 249px;"><audio controls="controls">

<source src="##"></source></audio> <br />  Caption type here </td>
<td style="height: 29px; text-align: center; width: 10px;">13 </td>
<td style="height: 29px; text-align: center; width: 253px;"><audio controls="controls">

<source src="##"></source></audio> <br />   Caption type here </td>
</tr>
<tr style="height: 29px;">
<td style="height: 29px; text-align: center; width: 11px;">4 </td>
<td style="height: 29px; text-align: center; width: 249px;"><audio controls="controls">

<source src="##"></source></audio> <br />Caption type here.</td>
<td style="height: 29px; text-align: center; width: 10px;">14 </td>
<td style="height: 29px; text-align: center; width: 253px;"><audio controls="controls">

<source src="##"></source></audio> <br />   Caption type here  </td>
</tr>
<tr style="height: 33px;">
<td style="height: 33px; text-align: center; width: 11px;"> 5 </td>
<td style="height: 33px; text-align: center; width: 249px;"><audio controls="controls">

<source src="##"></source></audio> <br />Caption type here</td>
<td style="height: 33px; text-align: center; width: 10px;">15 </td>
<td style="height: 33px; text-align: center; width: 253px;"> <br />Caption type here</td>
</tr>
<tr style="height: 47px;">
<td style="height: 47px; text-align: center; width: 11px;">6 </td>
<td style="height: 47px; text-align: center; width: 249px;"> <br />Caption type here</td>
<td style="height: 47px; text-align: center; width: 10px;">16 </td>
<td style="height: 47px; text-align: center; width: 253px;"> <br />Caption type here</td>
</tr>
</tbody>
</table>
</center>


➯ Type this code first page and work it up

❆ ➯ Table _ Tabs Create Online web site click here

❆ ➯ Single line simple Table create code Click Here

 
<style>
table , td, th {
	border: 1px solid #595959;
	border-collapse: collapse;
}
td, th {
	padding: 3px;
	width: 30px;
	height: 25px;
}
th {
	background: #f0e6cc;
}
.even {
	background: #fbf8f0;
}
.odd {
	background: #fefcf9;
}
</style>
<body>
<table>
	<tbody>
		<tr>
			<td colspan="3" style="text-align:center; color:blue; font-size: 17px; font-family: bhuj unicode;"> Tital Here </td>
		</tr>
		<tr>
			<td></td>
			<td></td>
            <td></td>
		</tr>
	</tbody>
</table>
</body>

❆ ➯ One by One different line table code click here

 
<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family:arial;
  font-size: 18px;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  font-size: 13px;
  text-align: left;
  padding: 5px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>

<h2 style=" color:green; font-size:17px; font-family: bhuj unicode; text-align:center;"> suvichar </h2>

<table>
  <tr>
    <th> suvichar-1 </th> 
  </tr>
  <tr>
    <td> suvichar-2 </td>
  </tr>
  <tr>
    <td> suvichar-3 </td>
  </tr>
  <tr>
    <td> suvichar-4 </td>
    </tr>
  <tr>
    <td> suvichar-5 </td>
  </tr>
  <tr>
    <td> suvichar-6 </td>
  </tr>
  <tr>
    <td> suvichar-7 </td>
  </tr>
  <tr>
    <td> suvichar-8 </td>
  </tr>
 
  <tr>
    <td> suvichar-9 </td>
  </tr>
  
  <tr>
    <td> suvichar-10 </td>
  </tr>
  
  <tr>
    <td> suvichar-11 </td>
  </tr>
  
</table>

</body>
</html>

❆ ➯ Searchable table create code click here

 

<style>
* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 5px 5px;
  background-repeat: no-repeat;
  width: 50%;
  font-size: 14px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 5px;
   height:20px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #0d0d;
  font-size: 12px;
}

#myTable th, #myTable td {
  text-align: left;
  padding: 6px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  background-color:#b6e2bd;
}
</style>

<body>

<h2 style="text-align:center; font-family:arial; font-size:14px; color: green;"> Education & Teacher use Letter </h2>

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

<table id="myTable">
  <tr class="header">
    <th style="width:89%;text-align:center;"> Letter Discription </th>
    <th style="width:11%;"> Download </th>
  </tr>
  <tr>
    <td>Letter no - 1 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr>
  
  <tr>
    <td>Letter no - 2 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr>
  
  <tr>
    <td>Letter no - 3 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr>
  
  <tr>
    <td>Letter no - 4 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr>
  
  <tr>
    <td>Letter no - 5 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr>
  
  <tr>
    <td>Letter no - 6 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr>
  
  <tr>
    <td>Letter no - 7 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr>
  
  <tr>
    <td>Letter no - 8 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr>
  
  <tr>
    <td>Letter no - 9 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr>
  
  <tr>
    <td>Letter no - 10 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr>
  
  <tr>
    <td>Letter no - 11 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr>
  
  <tr>
    <td>Letter no - 12 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr>
  
  <tr>
    <td>Letter no - 13 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr>
  
  <tr>
    <td>Letter no - 14 કોઈપણ સરકારી પ્રમાણપત્ર/દાખલો કઢાવવા કયા ડોકયુમેન્ટ જોઈએ અને કયાથી નીકળશે તેનુ લીસ્ટ </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr>
  
  <tr>
    <td>Letter no - 15 તમામ સરકારી યોજનાઓ ની માહિતી અને તેનો લાભ લેવા કયા ડોકયુમેન્ટ જોઈએ તેનુ લીસ્ટ </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr>
  
</table>

<script>
function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  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>

</body>

❆ ➯ Letter type Searchable Table create one in three table click here

 

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;"><img border="0" data-original-height="30" data-original-width="229" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJDhGS1sRtO7GqHXncKsPS0C0NpbU_EnsazZUxKdag17d2uc2ZTqk3EjoUeOb-NN7SSSKy3wBnwJbCvFSK7RyAQ8VXyIZo8kPKZMCtqkVBlCQxGVrgD_cyxsUDsA4MG-jO0cmu2gQLWOE/s0/cooltext389253650644427.png" /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="color: red;"><span><span face=""verdana" , sans-serif"><span style="font-size: large;">➯</span> </span></span><span style="background-color: white; font-family: "bhuj unicode"; font-size: 17.3333px; text-align: justify;">અહીં શૈક્ષણિક વિષયને લગતા મહત્વના પરિપત્રો અને જરૂરી બાબતો મુકવામાં આવશે.</span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" data-original-height="24" data-original-width="900" height="16" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7L4Qz6LGPr09qAc9P1ZPnGsKOWd6QqmisXUUUQbp6MBOE6jOB-y9WycfdnL79VeiVFWJ9cIO8Txj4_OcUL5fEzBeUkiS1CBbPsZK5bmPQOf9VRi7r19rLcLw9_TXc9AOU5fTd1USDbR8/s640/47.png" width="640" /></div>
<style>
	@import url('https://fonts.googleapis.com/css?family=Arial');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Arial', sans-serif;
  background-color: #34495e;
  color: #fff;
}
h1 {
  text-align: center;
  margin: 1rem 0;
  font-size: 2.5rem;
}

.accordion {
  width: 100%;
  max-width: 1000px;
  margin: 0rem auto;
}
.accordion-item {
  background-color: #fff;
  color: #111;
  margin: 0.2rem 0;
  border-radius: 0.5rem;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
}
.accordion-item-header {
  padding: 0.5rem 3rem 0.5rem 1rem;
  min-height: 1.5rem;
  line-height: 1.25rem;
  font-weight: none;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.accordion-item-header::after {
  content: "\002B";
  font-size: 1.2rem;
  position: absolute;
  right: 1rem;
}
.accordion-item-header.active::after {
  content: "\2212";
}
.accordion-item-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.accordion-item-body-content {
  padding: 0.5rem;
  line-height: 1.3rem;
  border-top: 1px solid;
  border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
}

@media(max-width:1350px) {
  html {
    font-size: 13px;
  }
}
  table {
  font-family:arial;
  font-size: 16px;
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #0d0d;
}

td, th {
  border: 0px solid #0d0;
  font-size: 13px;
  text-align: left;
  font-family: arial;
  padding: 5px;
  box-shadow: 0 1px 20px 0px rgba(10,0,0,0.20);
}

tr:nth-child(even) {
  background-color:#b6e2bd;
}
  
* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 5px 5px;
  background-repeat: no-repeat;
  width: 50%;
  font-size: 14px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 5px;
   height:20px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #0d0d;
  font-size: 9px;
}

#myTable th, #myTable td {
  text-align: left;
  padding: 6px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  background-color:#ffffb3;
}  
  
* {
  box-sizing: border-box;
}

#mInput {
  background-image: url('/css/searchicon.png');
  background-position: 5px 5px;
  background-repeat: no-repeat;
  width: 50%;
  font-size: 14px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 5px;
   height:20px;
}

#mTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #0d0d;
  font-size: 9px;
}

#mTable th, #mTable td {
  text-align: left;
  padding: 6px;
}

#mTable tr {
  border-bottom: 1px solid #ddd;
}

#mTable tr.aheader, #mTable tr:hover {
  background-color:#ffffb3;
}    
  
  

* {
  box-sizing: border-box;
}

#yInput {
  background-image: url('/css/searchicon.png');
  background-position: 5px 5px;
  background-repeat: no-repeat;
  width: 50%;
  font-size: 14px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 5px;
   height:20px;
}

#yTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #0d0d;
  font-size: 9px;
}

#yTable th, #yTable td {
  text-align: left;
  padding: 6px;
}

#yTable tr {
  border-bottom: 1px solid #ddd;
}

#mTable tr.abheader, #yTable tr:hover {
  background-color:#ffffb3;
}    
    
  
  
</style>

<body>
 
  <h2 style="color: green; font-family: bhavnagar unicode; font-size: 15px; text-align: center;"> શૈક્ષણિક વિષયને લગતા મહત્વના પરિપત્રો </h2>

  <div class="accordion-item">
    <div class="accordion-item-header">
     ❆ ➯ Letter Related Web site- Click here
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content">
        <pre style="background: rgb(253, 253, 236); border: 1px groove; color: #009933; font-family: bhuj unicode; font-size: 15px; line-height: inherit; margin-bottom: 0px; margin-top: 0px; outline: 0px; overflow-wrap: break-word; overflow: inherit; padding: 5px; text-align: left; vertical-align: baseline; white-space: pre-wrap;">
<table> <tbody>
		<tr class="header">
    <th style="color: red; font-family: bhavnagar unicode; font-size: 16px; text-align: center; width: 87%;">  વિવિધ પરીપત્રો માટેની વેબસાઈટ </th>
    <th style="color: red; font-family: bhavnagar unicode; font-size: 16px; text-align: center; width: 13%;"> વેબસાઈટ </th>
  </tr>
  
  <tr>
    <td>  ➯ વેબસાઈટ : </td>
       <td> <a href="##" target="_blank"> Click here </a> </td>
  </tr>
  
  
  <tr>
    <td>  ➯ વેબસાઈટ </td>
       <td> <a href="##" target="_blank">Click here </a> </td>
  </tr>
    
    
    <tr>
    <td>  ➯ Wel-Come to Blog </td>
       <td> <a href="##" target="_blank">Click here </a> </td>
  </tr>
  
</tbody>  
</table>
</pre>
        
      </div>
    </div>
  </div> 
  

    <div class="accordion-item">
    <div class="accordion-item-header">
      ❆ ➯ Educational useful Letter for Long Time Part - 1 Click here
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content">
        <pre style="background: rgb(253, 253, 236); border: 1px groove; color: green; font-family: bhuj unicode; font-size: 15px; line-height: inherit; margin-bottom: 0px; margin-top: 0px; outline: 0px; overflow-wrap: break-word; overflow: inherit; padding: 5px; text-align: left; vertical-align: baseline; white-space: pre-wrap;">
<h2 style="color: green; font-family: bhavnagar unicode; font-size: 14px; text-align: center;"> શૈક્ષણિક વિષયને લગતા મહત્વના પરિપત્રો </h2>

<input id="myInput" onkeyup="myFunction()" placeholder="Search for Letter form  here .." title="Type in a Letter Discription name" type="text" />
<table id="myTable">
  <tr class="header">
    <th style="color: red; text-align: center; width: 88%;">  useful Letter  Discription </th>
    <th style="color: red; text-align: center; width: 12%;"> Download </th>
  </tr>
    
  <tr>
    <td> ➯ 0001 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr>
  
    
  <tr>
    <td> ➯ 0002 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr>
  
    
  <tr>
    <td> ➯ 0003 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr>
  
    
  <tr>
    <td> ➯ 0004 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr>
  
    
  <tr>
    <td> ➯ 0005 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr>
  
     
  <tr>
    <td> ➯ 0006 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr>
  
    
  <tr>
    <td> ➯ 0007 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr> 
  
  
  
</table>
</pre>
      </div>
    </div>
  </div> 


    <div class="accordion-item">
    <div class="accordion-item-header">
      ➯ Educational useful Letter for short Time Part - 2 Click here
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content">
        <pre style="background: rgb(253, 253, 236); border: 1px groove; color: green; font-family: bhuj unicode; font-size: 15px; line-height: inherit; margin-bottom: 0px; margin-top: 0px; outline: 0px; overflow-wrap: break-word; overflow: inherit; padding: 5px; text-align: left; vertical-align: baseline; white-space: pre-wrap;">
<h2 style="color: green; font-family: bhavnagar unicode; font-size: 14px; text-align: center;"> શૈક્ષણિક વિષયને લગતા મહત્વના પરિપત્રો </h2>
<input id="mInput" onkeyup="mFunction()" placeholder="Search for Letter  here .." title="Type in a  Letter  Discription name" type="text" />
<table id="mTable">
  <tr class="aheader">
    <th style="color: red; text-align: center; width: 88%;"> useful Letter  Discription </th>
    <th style="color: red; text-align: center; width: 12%;"> Download </th>
  </tr>
  
  <tr>
    <td> ➯ 0001 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr>
  
    
  <tr>
    <td> ➯ 0002 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr>
  
    
  <tr>
    <td> ➯ 0003 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr>
  
    
  <tr>
    <td> ➯ 0004 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr>
  
    
  <tr>
    <td> ➯ 0005 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr>
  
     
  <tr>
    <td> ➯ 0006 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr>
  
    
  <tr>
    <td> ➯ 0007 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr> 
  
  
  
</table>
</pre>
      </div>
    </div>
  </div>   
  


  
    <div class="accordion-item">
    <div class="accordion-item-header">
      ➯ Educational  useful Letter Part - 3  Click here
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content">
        <pre style="background: rgb(253, 253, 236); border: 1px groove; color: green; font-family: bhuj unicode; font-size: 15px; line-height: inherit; margin-bottom: 0px; margin-top: 0px; outline: 0px; overflow-wrap: break-word; overflow: inherit; padding: 5px; text-align: left; vertical-align: baseline; white-space: pre-wrap;">
<h2 style="color: green; font-family: bhavnagar unicode; font-size: 14px; text-align: center;"> શૈક્ષણિક વિષયને લગતા મહત્વના પરિપત્રો  </h2>
<input id="yInput" onkeyup="yFunction()" placeholder="Search for Letter here .." title="Type in a Letter Discription name" type="text" />
<table id="yTable">
  <tr class="abheader">
    <th style="color: red; text-align: center; width: 88%;"> Educational useful Letter  Discription </th>
    <th style="color: red; text-align: center; width: 12%;"> Download </th>
  </tr>
  
  <tr>
    <td> ➯ 0001 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr>
  
    
  <tr>
    <td> ➯ 0002 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr>
  
    
  <tr>
    <td> ➯ 0003 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr>
  
    
  <tr>
    <td> ➯ 0004 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr>
  
    
  <tr>
    <td> ➯ 0005 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr>
  
     
  <tr>
    <td> ➯ 0006 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr>
  
    
  <tr>
    <td> ➯ 0007 </td>
    <td> <a href="#" target="_blank"> Click Here </a></td>
  </tr> 
  
  
  
</table>
</pre>
      </div>
    </div>
  </div>   
  
  
  
 <div class="accordion-item">
    <div class="accordion-item-header">
      ➯ More...
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content">
        <pre style="background: rgb(253, 253, 236); border: 1px groove; color: #111; font-family: arial; font-size: 13px; line-height: inherit; margin-bottom: 0px; margin-top: 0px; outline: 0px; overflow-wrap: break-word; overflow: inherit; padding: 5px; text-align: left; vertical-align: baseline; white-space: pre-wrap;">

  This section is working mode ....
  
</pre>
      </div>
    </div>
  </div>
 
  

  
</body></div>
  
	<script type="text/javascript">
		const accordionItemHeaders = document.querySelectorAll(".accordion-item-header");

accordionItemHeaders.forEach(accordionItemHeader => {
  accordionItemHeader.addEventListener("click", event => {
    
    // Uncomment in case you only want to allow for the display of only one collapsed item at a time!
    
    // const currentlyActiveAccordionItemHeader = document.querySelector(".accordion-item-header.active");
    // if(currentlyActiveAccordionItemHeader && currentlyActiveAccordionItemHeader!==accordionItemHeader) {
    //   currentlyActiveAccordionItemHeader.classList.toggle("active");
    //   currentlyActiveAccordionItemHeader.nextElementSibling.style.maxHeight = 0;
    // }

    accordionItemHeader.classList.toggle("active");
    const accordionItemBody = accordionItemHeader.nextElementSibling;
    if(accordionItemHeader.classList.contains("active")) {
      accordionItemBody.style.maxHeight = accordionItemBody.scrollHeight + "px";
    }
    else {
      accordionItemBody.style.maxHeight = 0;
    }
    
  });
});
      
function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  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";
      }
    }       
  }
}      
      
function mFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("mInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("mTable");
  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";
      }
    }       
  }
}            
 
function yFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("yInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("yTable");
  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>

 </div></div></div> 
<div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><img border="0" data-original-height="24" data-original-width="900" height="16" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7L4Qz6LGPr09qAc9P1ZPnGsKOWd6QqmisXUUUQbp6MBOE6jOB-y9WycfdnL79VeiVFWJ9cIO8Txj4_OcUL5fEzBeUkiS1CBbPsZK5bmPQOf9VRi7r19rLcLw9_TXc9AOU5fTd1USDbR8/w640-h16/47.png" width="640" /></div><span><a name='more'></a></span><div class="separator" style="clear: both; text-align: center;"><br /></div>

<center>
<script src="https://apis.google.com/js/platform.js"></script>

<div class="g-ytsubscribe" data-channelid="UCoppYSb2AubfBN3yCf3asNw" data-count="default" data-layout="full">
</div>
</center>

<a class="twitter-follow-button" data-show-count="false" href="https://twitter.com/jpsutariya1?ref_src=twsrc%5Etfw">Follow @jpsutariya1</a><script async="" charset="utf-8" src="https://platform.twitter.com/widgets.js"></script>

❆ ➯ pop up massenger image over text code Click Here

 

<style>
 #pop{ 
height: 325px; 
width: 700px; 
position: fixed; 
bottom: 40%; 
right: 25%; 
border: 5px solid; 
padding: 10px;
 background: #b6e2bd; 
border-radius: 8px;
}
 #close{ 
right:5;
 top:5; 
float:right; 
}
</style>
 <div id="pop">
 <button id="close" onclick="document.getElementById ('pop').style.display='none'"> <img src="https://img.icons8.com/color/2x/close-window.png" width="20px" height="20px" /></button>
<style>
body, html {
  height: 80%;
  margin: 0;
}

.bg {
  /* The image used */
  background-image: url("Type image url here");

  /* Full height */
  height: 100%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>

<div class="bg">
<marquee height="230" behavior="scroll" scrollamount="2" direction="up"  onmouseover="this.stop();" onmouseout="this.start(); ">
<span style="font-size:17px; color:#FFFFFF; font-family:arial;">
<h3 style="color:white;"> " Wel-Come My Web Blog for Visit " </h3>
<br/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmkktSqPfuGCDA6avgRrsXg9k9RR4EQ-U2HXhO2hEWgBnl_nDGTWFQySr2pmYbHfUUNW4DCB2CxvwZQ-i5B-PXXx2V1VwmnUWzNYBoxkuX0FnrpWmupHA0-etL2aJXlYrC0fJBptGc7BU/s1600/882141_3dfa5.gif" width="40px" height="30px" />tital-1<a href="###" target="_blank"> Click Me ! </a>
<br/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmkktSqPfuGCDA6avgRrsXg9k9RR4EQ-U2HXhO2hEWgBnl_nDGTWFQySr2pmYbHfUUNW4DCB2CxvwZQ-i5B-PXXx2V1VwmnUWzNYBoxkuX0FnrpWmupHA0-etL2aJXlYrC0fJBptGc7BU/s1600/882141_3dfa5.gif" width="40px" height="30px" />tital-1<a href="###" target="_blank"> Click Me ! </a>
<br/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmkktSqPfuGCDA6avgRrsXg9k9RR4EQ-U2HXhO2hEWgBnl_nDGTWFQySr2pmYbHfUUNW4DCB2CxvwZQ-i5B-PXXx2V1VwmnUWzNYBoxkuX0FnrpWmupHA0-etL2aJXlYrC0fJBptGc7BU/s1600/882141_3dfa5.gif" width="40px" height="30px" />tital-1<a href="###" target="_blank"> Click Me ! </a>
<br/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmkktSqPfuGCDA6avgRrsXg9k9RR4EQ-U2HXhO2hEWgBnl_nDGTWFQySr2pmYbHfUUNW4DCB2CxvwZQ-i5B-PXXx2V1VwmnUWzNYBoxkuX0FnrpWmupHA0-etL2aJXlYrC0fJBptGc7BU/s1600/882141_3dfa5.gif" width="40px" height="30px" />tital-1<a href="###" target="_blank"> Click Me ! </a>
<br/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmkktSqPfuGCDA6avgRrsXg9k9RR4EQ-U2HXhO2hEWgBnl_nDGTWFQySr2pmYbHfUUNW4DCB2CxvwZQ-i5B-PXXx2V1VwmnUWzNYBoxkuX0FnrpWmupHA0-etL2aJXlYrC0fJBptGc7BU/s1600/882141_3dfa5.gif" width="40px" height="30px" />tital-1<a href="###" target="_blank"> Click Me ! </a>
<br/>

<a href="url" target="_blank"> Wel-come Blog </a>

</span>
 

</marquee>

</div>


 </div>

❆ ➯ Link Table And File Logo More useful code ( All In One ) Click Here

 
<center><table id="jTable" style="box-shadow: 0 1px 20px 0px rgba(10,0,0,0.20); width:inherit;">
<tr><td style="background-color:aque;padding:5px;"><a href="00" target="_blank"> ❆ type Name here </a></td></tr>
</table></center>




<center><p style="color: green; border-radius: 15px 15px 15px 15px; font-family: sans-serif; font-size: 13px; text-align: center; text-shadow: 2px 2px 5px #005807; box-shadow: 1px 1px 4px #005807; width: 50%;"> ❆ 000000 ❆</p></center>





<p style="color: #111;padding-left: 5px; font-family: sans-serif; font-size: 13px;  text-shadow: 2px 2px 5px #005807;"> ❆ ➯ 0000000000  </p>


https://docs.google.com/uc?export=download&id=

https://drive.google.com/uc?export=download&id=


https://drive.google.com/uc?export=download&id=1Xu1iGv83dqlhEfHaeP_iap-Me5g7vT0t



<a href="00" target="_blank">  000 </a>


border-bottom: 0.5pt solid black; border-left: none; border-right: none; border-top: 0.5pt solid black;


style="background-color:#ffcc99;"

style="background-color:#cde67c;"

colour code 

#fdb568 

#639c84

#fdfd - LIGHT PINK

#b6e2bd  - LIGHT GREEN

#ffffb3  - LIGHT YELLOW

❆

❇

style="width:80%;"


<span style="color:blue; font-size:14px;"> 00  </span>
..........................................................
Excel

  
<tr>
    <td> ➯ wel_come </td>
    <td style="text-align: center;"><a href="00" target="_blank"><img height="20" width="35" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9zrJgdt_TGt1m4FBMDIQoDZh5yor-POMBXvqchfxkm6-Krw5SGvQ3jDDdh-zN-TOUHrHpNGc-FtoK95ZAiIPPeCcSJ6dxAX9u3OmsAIptxiNAkXBH27m9WLVZZqevV82_XM5I-sNAPcI/s1600/5.png"/></a></td>
  </tr> 
 



......................................................
word



  
 <tr>
    <td> ➯ wel_come </td>
    <td style="text-align: center;"><a href="00" target="_blank"><img height="22" width="22" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjklhUYjeEK8ryr3a05MTdxdjErDzx0PAXJF0lmc4DeXHTMK4bTJLUrrfHqbcBTe4gNkVe9UWOm2qTeXeVhCtef7jcufqRPTONo5tvUXRuySqvoBUKucKQJczCmgPZumYXoMKLVUVpWpqI/s1600/word-icon.png"/></a></td>
  </tr> 
 
 
..........................................................
PDF


<tr>
    <td> ➯ Wel_come </td>
    <td style="text-align: center;"><a href="00" target="_blank"><img height="18" width="16" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3Z70FPb4ZBz4r4WE3_wTRRY8x9wnV9VXhtxBrXM9o770KvuxmX9MzxGqgi4A3dMzKYGQV3hw783-7QlnpBEh5zmBUkx1AUIgPz_-d0sxwFqnQLZOfWb56ZAhlvsafLwsW4HMtBMsyL9k/s0/small.gif"/></a></td>
  </tr>  




..........................................................
PPT


<tr>
    <td> ➯ Wel_come </td>
    <td style="text-align: center;"><a href="00" target="_blank"><img height="18" width="16" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKBErS3b9AEhAti1IO3_mR_pYezMKawqLpBfrAcZPVcXwU2oXfTc7ro3xMaWIy9iv94XorLaP2XiqJrx7aq25PGmkCHnfOhbeqOT66PWlLLj-4_2QAeyhANMPYCtfD0hD7hNFOrkSBmCcLoDaFKIhyMsecjMzv29umgsDzeiKM1JFCeCff8oHsVn3a/w200-h196/ppt.png"/></a></td>
  </tr>

❆ ➯ Two table searchable code in one table Click Here

 

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;"><img border="0" data-original-height="30" data-original-width="229" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJDhGS1sRtO7GqHXncKsPS0C0NpbU_EnsazZUxKdag17d2uc2ZTqk3EjoUeOb-NN7SSSKy3wBnwJbCvFSK7RyAQ8VXyIZo8kPKZMCtqkVBlCQxGVrgD_cyxsUDsA4MG-jO0cmu2gQLWOE/s0/cooltext389253650644427.png" /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="color: red;"><span><span face=""verdana" , sans-serif"><span style="font-size: large;">➯</span> </span></span><span style="background-color: white; font-family: "bhuj unicode"; font-size: 17.3333px; text-align: justify;">અહીં શૈક્ષણિક વિષયને લગતા મહત્વના પરિપત્રો અને જરૂરી બાબતો મુકવામાં આવશે.</span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" data-original-height="24" data-original-width="900" height="16" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7L4Qz6LGPr09qAc9P1ZPnGsKOWd6QqmisXUUUQbp6MBOE6jOB-y9WycfdnL79VeiVFWJ9cIO8Txj4_OcUL5fEzBeUkiS1CBbPsZK5bmPQOf9VRi7r19rLcLw9_TXc9AOU5fTd1USDbR8/s640/47.png" width="640" /></div>
<style>
	@import url('https://fonts.googleapis.com/css?family=Arial');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Arial', sans-serif;
  background-color: #34495e;
  color: #fff;
}
h1 {
  text-align: center;
  margin: 1rem 0;
  font-size: 2.5rem;
}

.accordion {
  width: 100%;
  max-width: 1000px;
  margin: 0rem auto;
}
.accordion-item {
  background-color: #fff;
  color: #111;
  margin: 0.2rem 0;
  border-radius: 0.5rem;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
}
.accordion-item-header {
  padding: 0.5rem 3rem 0.5rem 1rem;
  min-height: 1.5rem;
  line-height: 1.25rem;
  font-weight: none;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.accordion-item-header::after {
  content: "\002B";
  font-size: 1.2rem;
  position: absolute;
  right: 1rem;
}
.accordion-item-header.active::after {
  content: "\2212";
}
.accordion-item-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.accordion-item-body-content {
  padding: 0.5rem;
  line-height: 1.3rem;
  border-top: 1px solid;
  border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
}

@media(max-width:1350px) {
  html {
    font-size: 13px;
  }
}
  table {
  font-family:arial;
  font-size: 16px;
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #0d0d;
}

td, th {
  border: 0px solid #0d0;
  font-size: 13px;
  text-align: left;
  font-family: arial;
  padding: 5px;
  box-shadow: 0 1px 20px 0px rgba(10,0,0,0.20);
}

tr:nth-child(even) {
  background-color:#b6e2bd;
}
  
* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 5px 5px;
  background-repeat: no-repeat;
  width: 50%;
  font-size: 14px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 5px;
   height:20px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #0d0d;
  font-size: 9px;
}

#myTable th, #myTable td {
  text-align: left;
  padding: 6px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  background-color:#ffff;
}  
  
* {
  box-sizing: border-box;
}

#mInput {
  background-image: url('/css/searchicon.png');
  background-position: 5px 5px;
  background-repeat: no-repeat;
  width: 50%;
  font-size: 14px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 5px;
   height:20px;
}

#mTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #0d0d;
  font-size: 9px;
}

#mTable th, #mTable td {
  text-align: left;
  padding: 6px;
}

#mTable tr {
  border-bottom: 1px solid #ddd;
}

#mTable tr.aheader, #mTable tr:hover {
  background-color:#ffff;
}    
  
  

* {
  box-sizing: border-box;
}

#yInput {
  background-image: url('/css/searchicon.png');
  background-position: 5px 5px;
  background-repeat: no-repeat;
  width: 50%;
  font-size: 14px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 5px;
   height:20px;
}

#yTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #0d0d;
  font-size: 9px;
}

#yTable th, #yTable td {
  text-align: left;
  padding: 6px;
}

#yTable tr {
  border-bottom: 1px solid #ddd;
}

#yTable tr.abheader, #yTable tr:hover {
  background-color:#ffff;
}    


  
  
* {
  box-sizing: border-box;
}

#jInput {
  background-image: url('/css/searchicon.png');
  background-position: 5px 5px;
  background-repeat: no-repeat;
  width: 50%;
  font-size: 14px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 5px;
   height:20px;
}

#jTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #0d0d;
  font-size: 9px;
}

#jTable th, #jTable td {
  text-align: left;
  padding: 6px;
}

#jTable tr {
  border-bottom: 1px solid #ddd;
}

#jTable tr.jheader, #jTable tr:hover {
  background-color:#ffff;
} 
 


  
* {
  box-sizing: border-box;
}

#kInput {
  background-image: url('/css/searchicon.png');
  background-position: 5px 5px;
  background-repeat: no-repeat;
  width: 50%;
  font-size: 14px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 5px;
   height:20px;
}

#kTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #0d0d;
  font-size: 9px;
}

#kTable th, #kTable td {
  text-align: left;
  padding: 6px;
}

#kTable tr {
  border-bottom: 1px solid #ddd;
}

#kTable tr.jheader, #kTable tr:hover {
  background-color:#ffff;
} 
  
  
  

.bg1 {
  /* The image used */
  background-image: url("https://blogger.googleusercontent.com/img/a/AVvXsEjK-Qn_TfA7Nuhk8W0KZ44LkmyCUpce0ImrhhFG_CyVgrDus_arNzMH6X-Htg2ed6cteaEhPkYbu82FA7gwTaP9redyERp5Y6tdZlWBpNSfT5JmfXwXHshQwQmJ6ul8EAHctXBq6_GBkaKh6_XKvEZ9S1LnB7WQGnfO1wIcy2rLMuKAML3IDuNaj_4h=w640-h358");

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}  
  

.bg2 {
  /* The image used */
  background-image: url("https://blogger.googleusercontent.com/img/a/AVvXsEh8CBPAiaWPKisvSqPHFhQsbqb4-47SRlOn2WSfkTSvrzfekSelvefBioPj4dGl7nzCU1UWgaYRxtBDsbeZAqs9g_e3_5WPLO8i1E3bXJJHL2DcgQES_s49qcgTB9sIPlPhV59tvdMqYlRoWnhsIP8sa1GveO6T4tL97_63YucTgvmIfX8CSaeZM-7j=w640-h358");

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}  
  
  
</style>

<body>
 
  <h2 style="color: green; font-family: bhavnagar unicode; font-size: 15px; text-align: center;"> ❆ શૈક્ષણિક વિષયને લગતા મહત્વના પરિપત્રો ❆ </h2>

  
  
  <div class="accordion-item">
    <div class="accordion-item-header">
     ❆ ➯ SSA e-Learning Courses web site Click here
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content">
        <pre style="background: rgb(253, 253, 236);color: #111; border: 1px groove; font-family: arial; font-size: 13px; line-height: inherit; margin-bottom: 0px; margin-top: 0px; outline: 0px; overflow-wrap: break-word; overflow: inherit; padding: 1px; text-align: left; vertical-align: baseline; white-space: pre-wrap;"><div class="bg1">
<center><select id="mylinks" name="mylinks" style="height: 27px; padding: 2px; width: 250px;">

<option value="00"> wel_come </option>

	<option value="000"> Soon__  </option>
    
    <option value="000"> Soon__  </option>
    
    <option value="000"> Soon__  </option>
	
</select>

<input onclick="window.open(document.getElementById('mylinks').value, '_blank')" type="button" value="Click Me !" /></center>
</div></pre>
</div></div></div> 
 
  

 <div class="accordion-item">
    <div class="accordion-item-header">
     ❆ ➯ Table data discription Click here
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content">
        <pre style="background: rgb(253, 253, 236); border: 1px groove; color: green; font-family: arial; font-size: 13px; line-height: inherit; margin-bottom: 0px; margin-top: 0px; outline: 0px; overflow-wrap: break-word; overflow: inherit; padding: 1px; text-align: left; vertical-align: baseline; white-space: pre-wrap;"><div class="bg2">
<center><table id="kTable" style="box-shadow: 0 1px 20px 0px rgba(10,0,0,0.20); width:97%;">
<tr><td style="background-color:aque;">
<span style="color:blue; font-size:14px;"> ❆ file data Tital❆  </span>

type data here  

<center>------+------+------+-------+------</center>

type data here 

</td></tr></table></center>
</div></pre>
</div></div></div>

  
  
  
  
  
   
 <div class="accordion-item">
    <div class="accordion-item-header">
     ❆ ➯ two table search in one table 1  Click here
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content">
        <pre style="background: rgb(253, 253, 236);color: green; border: 1px groove; font-family: arial; font-size: 13px; line-height: inherit; margin-bottom: 0px; margin-top: 0px; outline: 0px; overflow-wrap: break-word; overflow: inherit; padding: 1px; text-align: left; vertical-align: baseline; white-space: pre-wrap;"><div class="bg2">
<center><table style="width:99%;">
<tr>
<td> <h2 style="color: green; font-family: sans-serif; font-size: 13px; text-align: center;"> ❆ Tital 1 ❆ </h2>
<input id="myInput" onkeyup="myFunction()" placeholder="Search for data form  here .." title="Type in a data Discription name" type="text" />
<center><table id="myTable" style="width:95%;">
  <tr class="header" style="background-color:#cde67c;">
    <th style="color: green; text-align: center; width: 95%;">  useful Letter  1 Discription </th>
   </tr>
 
<tr>
    <td> ➯ wel_come </td>
    </tr> 
 
 <tr>
    <td> ➯ wel_come </td>
  </tr> 
 
<tr>
    <td> ➯ wel_come </td>
    </tr> 
 
 <tr>
    <td> ➯ wel_come </td>
    </tr> 
        
</table></center>  </td>

<td>
<h2 style="color: green; font-family: sans-serif; font-size: 13px; text-align: center;"> ❆ tital 2 ❆ </h2>
<input id="mInput" onkeyup="mFunction()" placeholder="Search for data  here .." title="Type in a  data  Discription name" type="text" />
<center><table id="mTable" style="width:95%;">
<tr class="header" style="background-color:#cde67c;">
    <th style="color: green; text-align: center; width: 95%;">  useful Letter  2 Discription </th>
   </tr>
 
<tr>
    <td> ➯ wel_come </td>
    </tr> 
 
 <tr>
    <td> ➯ wel_come </td>
  </tr> 
 
<tr>
    <td> ➯ wel_come </td>
    </tr> 
 
 <tr>
    <td> ➯ wel_come </td>
    </tr> 
        
</table></center>  </td>

</tr>
</table></center>
</div></pre>
</div></div></div> 
 
  


   
 <div class="accordion-item">
    <div class="accordion-item-header">
     ❆ ➯ two table search in one table 2  Click here
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content">
        <pre style="background: rgb(253, 253, 236);color: green; border: 1px groove; font-family: arial; font-size: 13px; line-height: inherit; margin-bottom: 0px; margin-top: 0px; outline: 0px; overflow-wrap: break-word; overflow: inherit; padding: 1px; text-align: left; vertical-align: baseline; white-space: pre-wrap;"><div class="bg2">
<center><table style="width:99%;">
<tr>
<td> <h2 style="color: green; font-family: sans-serif; font-size: 13px; text-align: center;"> ❆ Tital 3 ❆ </h2>
<input id="yInput" onkeyup="yFunction()" placeholder="Search for data form  here .." title="Type in a data Discription name" type="text" />
<center><table id="yTable" style="width:95%;">
  <tr class="abheader" style="background-color:#cde67c;">
    <th style="color: green; text-align: center; width: 95%;">  useful Letter  3 Discription </th>
   </tr>
 
<tr>
    <td> ➯ wel_come </td>
    </tr> 
 
 <tr>
    <td> ➯ wel_come </td>
  </tr> 
 
<tr>
    <td> ➯ wel_come </td>
    </tr> 
 
 <tr>
    <td> ➯ wel_come </td>
    </tr> 
        
</table></center>  </td>

<td>
<h2 style="color: green; font-family: sans-serif; font-size: 13px; text-align: center;"> ❆ tital 4 ❆ </h2>
<input id="jInput" onkeyup="jFunction()" placeholder="Search for data  here .." title="Type in a  data  Discription name" type="text" />
<center><table id="jTable" style="width:95%;">
<tr class="jheader" style="background-color:#cde67c;">
    <th style="color: green; text-align: center; width: 95%;">  useful Letter  4 Discription </th>
   </tr>
 
<tr>
    <td> ➯ wel_come </td>
    </tr> 
 
 <tr>
    <td> ➯ wel_come </td>
  </tr> 
 
<tr>
    <td> ➯ wel_come </td>
    </tr> 
 
 <tr>
    <td> ➯ wel_come </td>
    </tr> 
        
</table></center>  </td>

</tr>
</table></center>
</div></pre>
</div></div></div> 
   
  
  
  
  
  <div class="accordion-item">
    <div class="accordion-item-header">
     ❆ ➯ More...
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content">
        <pre style="background: rgb(253, 253, 236); color: #111; border: 1px groove; font-family: arial; font-size: 13px; line-height: inherit; margin-bottom: 0px; margin-top: 0px; outline: 0px; overflow-wrap: break-word; overflow: inherit; padding: 1px; text-align: left; vertical-align: baseline; white-space: pre-wrap;"><div class="bg1">

  ❆ ➯ This section is working mode_ 
  
</div></pre></div>
    </div>
  </div>
  
  
  

  
</body></div>
  
  
  
	<script type="text/javascript">
		const accordionItemHeaders = document.querySelectorAll(".accordion-item-header");

accordionItemHeaders.forEach(accordionItemHeader => {
  accordionItemHeader.addEventListener("click", event => {
    
    // Uncomment in case you only want to allow for the display of only one collapsed item at a time!
    
    // const currentlyActiveAccordionItemHeader = document.querySelector(".accordion-item-header.active");
    // if(currentlyActiveAccordionItemHeader && currentlyActiveAccordionItemHeader!==accordionItemHeader) {
    //   currentlyActiveAccordionItemHeader.classList.toggle("active");
    //   currentlyActiveAccordionItemHeader.nextElementSibling.style.maxHeight = 0;
    // }

    accordionItemHeader.classList.toggle("active");
    const accordionItemBody = accordionItemHeader.nextElementSibling;
    if(accordionItemHeader.classList.contains("active")) {
      accordionItemBody.style.maxHeight = accordionItemBody.scrollHeight + "px";
    }
    else {
      accordionItemBody.style.maxHeight = 0;
    }
    
  });
});
      
function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  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";
      }
    }       
  }
}      
      
function mFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("mInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("mTable");
  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";
      }
    }       
  }
}            
 
function yFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("yInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("yTable");
  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";
      }
    }       
  }
}                  
      
function jFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("jInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("jTable");
  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";
      }
    }       
  }
}                  
         
function kFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("kInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("kTable");
  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>

 </div></div></div> 
<div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><img border="0" data-original-height="24" data-original-width="900" height="16" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7L4Qz6LGPr09qAc9P1ZPnGsKOWd6QqmisXUUUQbp6MBOE6jOB-y9WycfdnL79VeiVFWJ9cIO8Txj4_OcUL5fEzBeUkiS1CBbPsZK5bmPQOf9VRi7r19rLcLw9_TXc9AOU5fTd1USDbR8/w640-h16/47.png" width="640" /></div><span><!--more--></span><div class="separator" style="clear: both; text-align: center;"><br /></div>

<center>
<script src="https://apis.google.com/js/platform.js"></script>

<div class="g-ytsubscribe" data-channelid="UCoppYSb2AubfBN3yCf3asNw" data-count="default" data-layout="full">
</div>
</center>

<a class="twitter-follow-button" data-show-count="false" href="https://twitter.com/jpsutariya1?ref_src=twsrc%5Etfw">Follow @jpsutariya1</a><script async="" charset="utf-8" src="https://platform.twitter.com/widgets.js"></script>

❆ ➯ More...

 

code paste here


 ❆ ➯ This section is working mode ...

Follow @jpsutariya1

Monday, 29 March 2021

Table - Tabs create code