使用div+css布局过程中在什么时候使用table呢

在使用div+css进行页面布局时，一般情况下可以通过合适的CSS样式来实现页面的布局和排版。但在某些情况下，使用table也能达到良好的效果。下面是使用div+css布局过程中在什么时候使用table的完整攻略。

什么时候使用table布局

虽然使用div+css可以完成大部分的页面布局，但有时候会遇到下面几种情况，这时使用table布局可以效果更好：

1. 需要将多个元素以网格状的形式进行布局，这种情况下使用table可以更加方便。

2. 需要让某些元素水平垂直居中，但这些元素的具体宽度或高度不确定时，使用table可以更加方便。

3. 需要让多余的空间自动平分给相关的元素时，使用table可以更加方便。

使用table布局示例1

以下是一个示例，在这个例子中，我们需要将一些图像以4列的方式进行布局，并且需要让图像水平垂直居中。

HTML代码如下：

<table>
  <tr>
    <td><img src="image1.jpg" alt=""></td>
    <td><img src="image2.jpg" alt=""></td>
    <td><img src="image3.jpg" alt=""></td>
    <td><img src="image4.jpg" alt=""></td>
  </tr>
  <tr>
    <td><img src="image5.jpg" alt=""></td>
    <td><img src="image6.jpg" alt=""></td>
    <td><img src="image7.jpg" alt=""></td>
    <td><img src="image8.jpg" alt=""></td>
  </tr>
</table>

CSS代码如下：

table {
  width: 100%;
  height: 300px;
  border-collapse: collapse;
}

td {
  width: 25%;
  height: 150px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #ccc;
}

img {
  max-width: 100%;
  max-height: 100%;
}

这个示例中，我们使用了一张4x2的表格来布局8个图片。每个图片的容器都是一个TD单元格，通过CSS实现了水平垂直居中和自适应大小。

使用table布局示例2

以下是另一个示例，在这个例子中，我们希望将一些字段以表格方式展示，并且需要让这些字段的宽度自适应平分空间。

HTML代码如下：

<table>
  <tr>
    <td>Name:</td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>Age:</td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>Email:</td>
    <td><input type="text"></td>
  </tr>
</table>

CSS代码如下：

table {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  border-collapse: collapse;
}

td {
  padding: 10px;
  border: 1px solid #ccc;
}

input {
  width: 100%;
  padding: 5px;
}

这个示例中，我们使用了一张自适应宽度的表格，每个字段的容器都是一个TD单元格，通过CSS实现了平均分配空间和自适应宽度。

总结

以上就是在使用div+css布局过程中在什么时候使用table的完整攻略。需要注意的是，虽然table布局可以方便地做一些在div+css布局中难以实现的效果，但是过度地使用table布局也可能会降低页面的可维护性和可访问性，因此应该谨慎使用。