[分享]css做表格左图右文

CSS是网页设计与开发中最为常用的技术之一。表格是网页设计中的重要部分之一，而让表格左侧显示图片，右侧展示文字，则需要用到CSS对表格进行布局。下面就让我们一起来看看如何利用CSS来实现表格左图右文。...

CSS是网页设计与开发中最为常用的技术之一。表格是网页设计中的重要部分之一，而让表格左侧显示图片，右侧展示文字，则需要用到CSS对表格进行布局。下面就让我们一起来看看如何利用CSS来实现表格左图右文。

<table>
  <tr>
    <td class="pic"><img src="image.jpg" alt="图片"></td>
    <td class="text">这里是文字内容</td>
  </tr>
</table>

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  .pic {
    width: 30%;
    vertical-align: top;
    padding-right: 20px;
  }
  .text {
    width: 70%;
  }
</style>

以上代码表示，我们使用table标签来定义整个表格，并通过tr标签添加一行，使用td标签来分别添加左侧图片和右侧文字内容。为了实现左图右文效果，我们给左侧td标签定义宽度为30%，并通过垂直对齐方式（vertical-align: top）使其位置居于上方，就可以实现图片在左侧的效果。同时，我们也要给图片右侧添加一定的内边距（padding-right: 20px），以使实际显示效果更美观。此外，我们还要给右侧td标签定义宽度为70%，以充分利用表格空间展示文字内容。

最终效果是，我们可以在网页中看到左侧图片，右侧展示相应文字内容。这样的左图右文效果，可以在不同的网页设计中被广泛应用，是页面布局优化的一个重要手段。