html中table为每个单元格设置不同颜色和宽度

要在HTML中为每个单元格设置不同颜色和宽度，需要使用CSS。以下是详细的步骤：

第一步：创建HTML表格

在HTML中使用<table>标签创建表格，并使用<tr>标签创建每一行，<td>标签创建每个单元格。以下是一个简单的例子：

<table>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

第二步：使用CSS为单元格设置宽度和颜色

要为单元格设置宽度和颜色，可以使用<style>标签内的CSS代码。首先，可以使用border-collapse属性将单元格边框合并。然后，您可以使用<td>标签的background-color属性设置每个单元格的颜色，使用width属性设置单元格的宽度。以下是一个示例代码：

<style>
  table {
    border-collapse: collapse;
  }
  td {
    padding: 10px;
    text-align: center;
  }
  .red {
    background-color: #ff0000;
    width: 100px;
  }
  .blue {
    background-color: #0000ff;
    width: 150px;
  }
</style>

<table>
  <tr>
    <td class="red">Row 1, Cell 1</td>
    <td class="blue">Row 1, Cell 2</td>
  </tr>
  <tr>
    <td class="blue">Row 2, Cell 1</td>
    <td class="red">Row 2, Cell 2</td>
  </tr>
</table>

在这个示例中，<style>标签内的CSS代码包括对表格和单元格的样式设置。padding属性是用来控制单元格内的内容的位置，text-align属性是用来控制单元格内的文本对齐方式的。

同时，在第二个代码块中，用了两个类名分别为red和blue，用来分别表示单元格的背景色和宽度不同的状态，这些类名在CSS中对应了特定的样式设置。

另外，下面这个示例中，通过使用<colgroup>标签，为表格的第一列和第二列分别设置了不同的宽度和背景色：

<style>
  table {
    border-collapse: collapse;
  }
  td {
    padding: 10px;
    text-align: center;
  }
  col.col1 {
    width: 100px;
    background-color: #ff0000;
  }
  col.col2 {
    width: 150px;
    background-color: #0000ff;
  }
</style>

<table>
  <colgroup>
    <col class="col1">
    <col class="col2">
  </colgroup>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

在这个示例中，<colgroup>标签包含了两个<col>标签，分别为表格的第一列和第二列设置了不同的宽度和颜色。这里同样用到了background-color和width属性分别用于设置单元格的背景色和宽度。