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

flag

❆*_ " NEVER STOP LEARNING BECAUSE LIFE NEVER STOP TEACHING " _ *❆

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

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

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

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

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

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

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

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

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

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

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

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

_ THANKS _FOR _VISIT _

Showing posts with label Table - Tabs create code. Show all posts

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://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>

Continuos Reading click Here »