Tabs(like EXCEL) in HTMl

How to get tabs (like excel sheets) in HTML please refer image.

Did you tried to inspect element ? :slight_smile:

how did you convert xlsx to html?

you could make a simple navigation menu and place it at the bottom? Then use the anchor element (<a></a>) to link each “tab” to a different page.

2 Likes

Hi ckbhawsar,
You will need some JS, here’s a simple example that may help you to have an idea.

Here’s some random look of the tabs


And here is the code

HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="main.css" type="text/css">
  <script src="main.js"></script>
</head>
<body>
  <ul>
    <li><a id="btn1" class="active" href="#" onclick="showPage1()">Page 1</a></li>
    <li><a id="btn2" href="#" onclick="showPage2()">Page 2</a></li>
    <li><a id="btn3" href="#" onclick="showPage3()">Page 3</a></li>
  </ul>
  <div id="page1" class="container first">
    <h1>I'm Page1</h1>
  </div>
  <div id="page2" class="container">
    <h1>I'm Page2</h1>
  </div>
  <div id="page3" class="container">
    <h1>I'm Page3</h1>
  </div>
</body>
</html>

JavaScript (where the magic happens, it’s very very simple, but it works)

function showPage1() {
	"use strict";
    document.getElementById('page1').style.zIndex = '1';
	document.getElementById('page2').style.zIndex = '0';
	document.getElementById('page3').style.zIndex = '0';
	
	document.getElementById('btn1').className = "active";
	document.getElementById('btn2').classList.remove("active");
	document.getElementById('btn3').classList.remove("active");
}

function showPage2() {
	"use strict";
    document.getElementById('page1').style.zIndex = '0';
	document.getElementById('page2').style.zIndex = '1';
	document.getElementById('page3').style.zIndex = '0';
	
	document.getElementById('btn1').classList.remove("active");
	document.getElementById('btn2').className = "active";
	document.getElementById('btn3').classList.remove("active");
}

function showPage3() {
	"use strict";
    document.getElementById('page1').style.zIndex = '0';
	document.getElementById('page2').style.zIndex = '0';
	document.getElementById('page3').style.zIndex = '1';
	
	document.getElementById('btn1').classList.remove("active");
	document.getElementById('btn2').classList.remove("active");
	document.getElementById('btn3').className = "active";
}

CSS (some random, not fancy look)

* {
	margin: 0;
	padding: 0;
}
body {
	height: 100%;
}

.container {
	width: 100%;
	height: 93%;
	position: absolute;
	background-color: #eee;
	box-shadow: 1px 1px 5px #bbb;
	z-index: 0;
}
.first{
	z-index: 1;
}

ul{
	position: absolute;
	bottom: 0;
}
li{
	position: relative;
	list-style: none;
	float: left;
	padding: 24px 0px;
}
a{
	padding: 24px 50px;
	font-family: sans-serif;
	text-decoration: none;
	color: #222;
	background-color: #ddd;
	border: solid 1px #bbb;
}
.active {
	background-color: #eee;
}

Hope this helps.

1 Like

yes tried that but didnt find

Save xlsx as webpage it will save as html

Yes it helped me thanks sir,
can it be done without Javascript

yep, but you would need to create a separate page for each tab and then use html to link each page using anchor element (<a></a>)

1 Like

I’m a woman, actually :wink:

And this is how it must look like without JavaScript.

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
	<ul>
		<li><a href="page1.html" target="page">Page 1</a></li>
		<li><a href="page2.html" target="page">Page 2</a></li>
		<li><a href="page3.html" target="page">Page 3</a></li>
	</ul>
	<iframe name="page" src="page1.html" frameborder="0"></iframe>
</body>
</html>

As stetim94 said. Or you can take away the iframe and just change from page to page, and add the ul tabs in every page.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.