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

flag

❆*_PARIKSHA PE CHARCHA MARCH_2024..._Celebrate Indi@_ *❆

_ભાષા અધ્યયન નિષ્પત્તિઓ (ક્ષમતાઓ) ધોરણ ૬ થી ૮_

_ધોરણ ૬ થી ૮ કવિતાઓ _

_ વાર્ષિક તેમજ માસિક પાઠ આયોજન અને નિબંધ આયોજન _

_PRAISA સોફટવેરને લગતી મહત્વની માહિતી _

_ભાષા ટેક્સ બુક ધોરણ ૬ થી ૮_

_વિદ્યાસહાયક પુરા પગાર / ઉચ્ચતર પગાર દરખાસ્ત _

_ સર્વગ્રાહી મૂલ્યાંકન સોફ્ટવેર _

_બિટ કેળવણી નિરીક્ષકની પરીક્ષા ઉપયોગી માહિતી _

_શાળા ઉપયોગી એક્સલ સોફ્ટવેર _

_ "The Beauty Of the Work Depends Upon the Way, We meet it_ _

"આ બ્લોગને વ્યવસ્થિત જોવા માટે આપણા કમ્પ્યુટર-લેપટોપમાં Bhuj Unicode,Bhavnagar Unicode આ પ્રમાણેના ફોન્ટ હોવા જરૂરી છે જે આપને સોફ્ટવેર મેનુના સબ મેનુમાં કોમ્પ્યુટર ફોન્ટ મેનુ માંથી મળશે જે ઇન્સ્ટોલ કરી રિસ્ટાર્ટ કરી બ્લોગ સારી રીતે જોઇ શકશો" - "ભાષાશિક્ષણના મારા આ બ્લોગમાં આપ સૌનું હાર્દિક સ્વાગત છે. આ બ્લોગ ભાષા શિક્ષણ કાર્યમાં આપ સૌને ઉપયોગી થશે તેવી આશા છે. ._મારા આ બ્લોગમા શિક્ષણને લગતી કોઈપણ માહિતી કે ઉપયોગી ફાઈલ શેર કરવા ઇચ્છતા હો તો અહીં આપેલ google ફોર્મ પર માહિતી અપલોડ કરી શકો છો ,_ _તો આ બ્લોગની અવાર- નવાર મુલાકાત લેતા રહેશો અને આ બ્લોગ વિશેના આપના અભિપ્રાયો તથા સૂચનો આવકાર્ય છે. આભાર સહ..."

જો શિક્ષક દોડશે તો બાળક ચાલવાની શરૂઆત કરશે, શિક્ષક ચાલશે તો બાળક ઊભો રહી જશે, શિક્ષક ઊભો રહી જશે તો બાળક નીચે બેસી જશે, શિક્ષક બેસી જશે તો બાળક સૂઈ જશે, શિક્ષક સૂઈ જશે તો બાળક મુરજાય જશે , માટે શિક્ષકે સતત પ્રયત્ન - પ્રવૃત્તિશીલ રહેવું જ પડશે.-બર્નાર્ડ રૂસેલ _

_ THANKS _FOR _VISIT _

Monday 29 March 2021

Table - Tabs create code

❀ 👉 અહીં બ્લોગ કે વેબસાઈટ માં 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://1.bp.blogspot.com/-aD1T1bLYaeM/YPfGMv_i_II/AAAAAAAAI7A/5sgU_3Zx_IASFO0ry4uEp2jDMqmsHb9PQCLcBGAsYHQ/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://4.bp.blogspot.com/-FjwKaKHIWI8/XFHIkWiVqJI/AAAAAAAADQg/1ATzRaONKkYfXkj_lnDGZlUnDeNydfRFwCLcBGAs/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://4.bp.blogspot.com/-FjwKaKHIWI8/XFHIkWiVqJI/AAAAAAAADQg/1ATzRaONKkYfXkj_lnDGZlUnDeNydfRFwCLcBGAs/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://1.bp.blogspot.com/-zsmaCw1GYG4/Xo3kcXjnJGI/AAAAAAAAH98/YioX_vx892U-lL38ZjQS-RozJNVTieMNwCLcBGAsYHQ/s1600/882141_3dfa5.gif" width="40px" height="30px" />tital-1<a href="###" target="_blank"> Click Me ! </a>
<br/>
<img src="https://1.bp.blogspot.com/-zsmaCw1GYG4/Xo3kcXjnJGI/AAAAAAAAH98/YioX_vx892U-lL38ZjQS-RozJNVTieMNwCLcBGAsYHQ/s1600/882141_3dfa5.gif" width="40px" height="30px" />tital-1<a href="###" target="_blank"> Click Me ! </a>
<br/>
<img src="https://1.bp.blogspot.com/-zsmaCw1GYG4/Xo3kcXjnJGI/AAAAAAAAH98/YioX_vx892U-lL38ZjQS-RozJNVTieMNwCLcBGAsYHQ/s1600/882141_3dfa5.gif" width="40px" height="30px" />tital-1<a href="###" target="_blank"> Click Me ! </a>
<br/>
<img src="https://1.bp.blogspot.com/-zsmaCw1GYG4/Xo3kcXjnJGI/AAAAAAAAH98/YioX_vx892U-lL38ZjQS-RozJNVTieMNwCLcBGAsYHQ/s1600/882141_3dfa5.gif" width="40px" height="30px" />tital-1<a href="###" target="_blank"> Click Me ! </a>
<br/>
<img src="https://1.bp.blogspot.com/-zsmaCw1GYG4/Xo3kcXjnJGI/AAAAAAAAH98/YioX_vx892U-lL38ZjQS-RozJNVTieMNwCLcBGAsYHQ/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://1.bp.blogspot.com/-oeDZtbT79Uc/XUaKlkpFlvI/AAAAAAAAGBE/MsSIKtF58dglw4avO_kKwKAICFK3Vuw_gCLcBGAs/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://1.bp.blogspot.com/-dNYQIe4dLQM/XkIVE2xUREI/AAAAAAAAHg0/DsUUaYxBl383s3mOTcbEqYZBQ2RVnJi1wCLcBGAsYHQ/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://1.bp.blogspot.com/-xbpYLta0ftQ/YI4VROTEfAI/AAAAAAAAIxY/azfMe_cHLcYrKjSKX8RwTjP7lmU6NUwsgCLcBGAsYHQ/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://1.bp.blogspot.com/-aD1T1bLYaeM/YPfGMv_i_II/AAAAAAAAI7A/5sgU_3Zx_IASFO0ry4uEp2jDMqmsHb9PQCLcBGAsYHQ/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://4.bp.blogspot.com/-FjwKaKHIWI8/XFHIkWiVqJI/AAAAAAAADQg/1ATzRaONKkYfXkj_lnDGZlUnDeNydfRFwCLcBGAs/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://4.bp.blogspot.com/-FjwKaKHIWI8/XFHIkWiVqJI/AAAAAAAADQg/1ATzRaONKkYfXkj_lnDGZlUnDeNydfRFwCLcBGAs/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

Press Note :-

❆ ➯ આ બ્લોગ વાંચનાર તમામ વાચક મિત્રોનું હાર્દિક સ્વાગત છે, કોઈપણનો કોપીરાઇટનો ભંગ થતો હોય તો ધ્યાન દોરવું. ❆

❆ આ બ્લોગ નિરંતર આપની મદદ માટે તત્પર રહે એવી અભ્યર્થના ❆

___❆ ➯ આ બ્લોગમાં શિક્ષણને રસપ્રદ બનાવી શકાય તે માટે જરૂરી માહિતી અને સંદર્ભ સાહિત્ય મુકવામાં આવશે. ❆ ___

main dropdown menu

flag

Latest Notification

Monday 29 March 2021

Table - Tabs create code

Press Note :-

visitors

Online this Times

Search here