html默认隐藏三个表格，有三个单选按钮，点击不同的按钮显示对应的隐藏表格

您可以使用HTML和JavaScript的组合来实现这个功能。以下是代码示例：

HTML代码：

<input type="radio" name="table" value="table1">表格1
<input type="radio" name="table" value="table2">表格2
<input type="radio" name="table" value="table3">表格3

<table id="table1" class="hidden">
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

<table id="table2" class="hidden">
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

<table id="table3" class="hidden">
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

CSS代码：

.hidden {
  display: none;
}

JavaScript代码：

const radios = document.querySelectorAll('input[type="radio"]');
const tables = document.querySelectorAll('table');

radios.forEach(radio => {
  radio.addEventListener('change', () => {
    tables.forEach(table => {
      if (table.id === radio.value) {
        table.classList.remove('hidden');
      } else {
        table.classList.add('hidden');
      }
    });
  });
});

这段代码会隐藏所有的表格。当用户单击单选按钮时，将显示对应的表格。它通过监听单选按钮的change事件来实现这一点，并使用CSS类来切换表格的可见性。