CSS表格可以用來展示各種信息，但是當需要在表格中添加選項卡時，該怎么做呢？以下是一些簡單的方法：

.tab {
border-collapse: collapse;
width: 100%;
}
.tab tr:first-child {
background-color: #eee;
}
.tab td {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
cursor: pointer;
}
.tab td.active {
background-color: #ccc;
}
.tabcontent {
display: none;
padding: 10px;
border: 1px solid #ccc;
}
.tabcontent.active {
display: block;
}

首先，我們需要一個包含多個選項卡的表格，每個選項卡用一個單元格來表示。每個單元格都可以添加一個類“active”來表示當前選中的選項卡。我們還需要一些內容來顯示在選項卡下面。這些內容可以被包含在一個含有類“tabcontent”的div中。

<table class="tab">
<tr>
<td class="active">選項1</td>
<td>選項2</td>
<td>選項3</td>
</tr>
</table>
<div class="tabcontent active">
<p>選項1的內容在這里</p>
</div>
<div class="tabcontent">
<p>選項2的內容在這里</p>
</div>
<div class="tabcontent">
<p>選項3的內容在這里</p>
</div>

接下來，我們需要一些JavaScript來處理點擊事件。當用戶點擊一個單元格時，我們將移除所有單元格中“active”類，并為所選單元格添加該類。我們還需要隱藏所有內容div，然后顯示所選選項卡的內容div。

<script>
var tabs = document.querySelectorAll('.tab td');
var tabcontents = document.querySelectorAll('.tabcontent');
tabs.forEach(function(tab, index) {
tab.addEventListener('click', function() {
tabs.forEach(function(tab) {
tab.classList.remove('active');
});
tab.classList.add('active');
tabcontents.forEach(function(tabcontent) {
tabcontent.classList.remove('active');
});
tabcontents[index].classList.add('active');
});
});
</script>

現在，我們已經完成了一個簡單的CSS表格選項卡。你可以根據需要修改樣式和腳本以滿足你自己的需求。