table表格封装单选组件

在前端开发中，尤其是使用HTML、CSS和JavaScript时，表格（table）通常用于展示数据，而为了集成单选组件，你可以将单选按钮（radio buttons）作为表格中的单元格内容。以下是一个简单的示例：

<table>
  <thead>
    <tr>
      <th>选项</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="radio" name="choice" value="option1"> 选项1</td>
    </tr>
    <tr>
      <td><input type="radio" name="choice" value="option2"> 选项2</td>
    </tr>
    <!-- 可以添加更多的行，每行对应一个单选项 -->
  </tbody>
</table>

<!-- 表单提交处理部分，例如使用JavaScript或jQuery -->
<script>
  // 选择单选框事件监听
  document.querySelectorAll('input[type="radio"]').forEach(function(checkbox) {
    checkbox.addEventListener('change', function() {
      console.log('选择了:', this.value);
    });
  });
</script>

在这个例子中，`<input type="radio">` 标签被嵌套在每个`<td>`元素中，它们共享相同的`name`属性，这样浏览器会确保只有一个单选框可以选择。当用户改变选择时，`change`事件会被触发。