In my answer below I have created a quick page with manually added php variables ($year1, $year2, and $year3 to the desired years (e.g., '2021', '2022', '2023')) to point you in the right direction.
Each tab navigates using an unordered list 'ul' and list items 'li' elements, with each year as a link 'a' inside a list item. The 'href' attribute of each link points to the corresponding year tab's ID.
When clicking on each years tab, you will notice the change in the returned echo values.
I ran the sample in
W3Schools PHP Editor[
^] where it compiled to what seems to be your request with available info given -
<!DOCTYPE html>
<html>
<head>
<title>My Tabs By Year</title>
<style>
.tab {
display: none;
}
.tab.active {
display: block;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
li {
flex: 1;
}
li a {
display: block;
padding: 10px 20px;
background-color: #f2f2f2;
color: #333;
text-decoration: none;
border: 1px solid #ccc;
}
li a:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<?php
$year1 = '2021';
$year2 = '2022';
$year3 = '2023';
?>
<!-- Create the tab navigation -->
<ul>
<li><a href="#tab1"><?php echo $year1; ?></a></li>
<li><a href="#tab2"><?php echo $year2; ?></a></li>
<li><a href="#tab3"><?php echo $year3; ?></a></li>
</ul>
<!-- Create the tab content -->
<div id="tab1" class="tab active">
<?php
echo "<h2>Data Table for $year1</h2>";
echo "<table>";
echo "<tr><th>Column 1</th><th>Column 2</th></tr>";
echo "<tr><td>Data 1</td><td>Data 2</td></tr>";
echo "<tr><td>Data 3</td><td>Data 4</td></tr>";
echo "</table>";
?>
</div>
<div id="tab2" class="tab">
<?php
echo "<h2>Data Table for $year2</h2>";
echo "<table>";
echo "<tr><th>Column 1</th><th>Column 2</th></tr>";
echo "<tr><td>Data 5</td><td>Data 6</td></tr>";
echo "<tr><td>Data 7</td><td>Data 8</td></tr>";
echo "</table>";
?>
</div>
<div id="tab3" class="tab">
<?php
echo "<h2>Data Table for $year3</h2>";
echo "<table>";
echo "<tr><th>Column 1</th><th>Column 2</th></tr>";
echo "<tr><td>Data 9</td><td>Data 10</td></tr>";
echo "<tr><td>Data 11</td><td>Data 12</td></tr>";
echo "</table>";
?>
</div>
<!-- JavaScript to handle tab switching -->
<script>
const tabLinks = document.querySelectorAll('ul li a');
tabLinks.forEach(tabLink => {
tabLink.addEventListener('click', (e) => {
e.preventDefault();
const tabs = document.querySelectorAll('.tab');
tabs.forEach(tab => {
tab.classList.remove('active');
});
const tabId = tabLink.getAttribute('href');
const tab = document.querySelector(tabId);
tab.classList.add('active');
});
});
</script>
</body>
</html>
You will notice that I added a Javascript tag that will handle the tab switching functionalities. The result will show 3 tabs next to each other with captions '2021', '2022' and '2023'.
You can now add your row data into each tab as required.