HTML 图像

HTML 图像表格化

详细介绍

HTML图像表格化是指使用HTML表格(<table>)标签来组织和布局图像的技术。这种方法在早期网页设计中常用，现在更多使用CSS布局，但在某些特定场景下仍然有用。

主要标签

1. <table> - 定义表格

2. <tr> - 定义表格行

3. <td> - 定义表格单元格

4. <th> - 定义表头单元格

5. <img> - 嵌入图像

基本用法

<table>
  <tr>
    <td><img src="image1.jpg" alt="描述1"></td>
    <td><img src="image2.jpg" alt="描述2"></td>
  </tr>
  <tr>
    <td><img src="image3.jpg" alt="描述3"></td>
    <td><img src="image4.jpg" alt="描述4"></td>
  </tr>
</table>

完整实例

<table border="1">
  <caption>产品图片展示</caption>
  <tr>
    <th>产品A</th>
    <th>产品B</th>
  </tr>
  <tr>
    <td><img src="product_a.jpg" alt="产品A" width="200"></td>
    <td><img src="product_b.jpg" alt="产品B" width="200"></td>
  </tr>
  <tr>
    <td>价格: $99</td>
    <td>价格: $129</td>
  </tr>
</table>

功能特点

1. 精确控制图像位置和对齐

2. 创建规则的网格布局

3. 方便添加标题和描述文字

4. 跨浏览器兼容性好

CSS扩展

<style>
  .image-gallery {
    border-collapse: collapse;
    width: 100%;
    margin: 20px 0;
  }
  .image-gallery td {
    padding: 10px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #ddd;
  }
  .image-gallery img {
    max-width: 100%;
    height: auto;
    transition: transform 0.3s;
  }
  .image-gallery img:hover {
    transform: scale(1.05);
  }
  .image-gallery caption {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
  }
</style>

<table class="image-gallery">
  <!-- 表格内容 -->
</table>

现代替代方案

虽然表格布局仍可使用，但现代网页设计更推荐使用CSS Grid或Flexbox：

<div class="image-grid">
  <div><img src="image1.jpg" alt=""></div>
  <div><img src="image2.jpg" alt=""></div>
  <div><img src="image3.jpg" alt=""></div>
  <div><img src="image4.jpg" alt=""></div>
</div>

<style>
  .image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
</style>