最大限度的分离table的样式与结构

实现最大限度的分离table的样式与结构可以有以下几个步骤：

1. 使用CSS选择器对表格进行样式控制

为实现样式与结构的分离，应尽量将表格的样式与HTML文档分开，可在CSS文件中对表格的样式进行控制，而不要使用内联样式或为表格添加style属性。可使用CSS选择器对表格进行样式控制，如下所示：

/* 对表格的标题行、表头单元格、表格单元格和表格边框进行样式控制 */

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

th,
td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #eee;
}

其中，table、th、td等选择器可以对表格的结构进行控制，而background-color、border、padding等属性可对表格的样式进行控制。由此，便可实现最大程度的样式与结构分离。

1. 使用CSS class对表格进行样式分类

除了使用CSS选择器对表格进行样式控制外，还可以使用CSS class对表格进行样式分类。如下所示：

/* 对表格进行样式分类 */

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

table.primary th,
table.primary td {
  border: 1px solid #333;
  padding: 8px;
}

table.primary th {
  background-color: #ccc;
}

table.secondary th,
table.secondary td {
  border: 1px solid #ccc;
  padding: 8px;
}

table.secondary th {
  background-color: #eee;
}

此时，表格可以分为primary和secondary两种样式，通过不同的CSS class进行分类控制，使得样式和结构更加分离。

示例一：使用CSS选择器控制表格样式

<table>
  <thead>
    <tr>
      <th>名称</th>
      <th>价格</th>
      <th>数量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>商品1</td>
      <td>100</td>
      <td>5</td>
    </tr>
    <tr>
      <td>商品2</td>
      <td>200</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

/* 对表格进行样式控制 */

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

th,
td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #eee;
}

示例二：使用CSS class控制表格样式

<table class="primary">
  <thead>
    <tr>
      <th>名称</th>
      <th>价格</th>
      <th>数量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>商品1</td>
      <td>100</td>
      <td>5</td>
    </tr>
    <tr>
      <td>商品2</td>
      <td>200</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

<table class="secondary">
  <thead>
    <tr>
      <th>名称</th>
      <th>价格</th>
      <th>数量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>商品3</td>
      <td>300</td>
      <td>2</td>
    </tr>
    <tr>
      <td>商品4</td>
      <td>400</td>
      <td>1</td>
    </tr>
  </tbody>
</table>

/* 对表格进行样式分类 */

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

table.primary th,
table.primary td {
  border: 1px solid #333;
  padding: 8px;
}

table.primary th {
  background-color: #ccc;
}

table.secondary th,
table.secondary td {
  border: 1px solid #ccc;
  padding: 8px;
}

table.secondary th {
  background-color: #eee;
}