જયેશકુમાર સુતરીયા ( વિદ્યાસહાયક): Table

flag

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

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

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

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

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

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

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

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

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

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

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

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

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

_ THANKS _FOR _VISIT _

Monday, March 29, 2021

Table - Tabs create code

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

Scroll To Top 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