使用正确的 HTML 技术从图像创建 Web 表单

Question

我计划为我的网站 (XHTML) 创建一个交互式高尔夫记分卡。 （顺便说一句。这就是记分卡的样子：ScoreCard）。所以最后应该能够在网站上的虚拟记分卡的适当输入字段中为每个洞插入一个分数。对我来说，交互式记分卡看起来与原始（纸质）记分卡完全相同非常重要，因此我的第一个方法是扫描并切片记分卡图像以达到该外观。

在这里你可以看到我切片图像的方式：

这个想法是为每个分数字段插入 HTML 文本输入，结果如下：

在对图像进行切片后，我使用 HTML 对其进行了重建。为此，我将图像切片作为单元格背景。

<table>
  <tr>
    <td style="background: url("slice1.jpg") width="58px" height="25px">
      <input type="text"></inputText>
    </td>
  </tr>
  ...
</table>

起初这很好用（因为 Gimp 为此提供了一个非常好的功能）。然后问题是我必须创建一个 HTML 表来创建确切的布局。如您所见，布局的下部分为 3 列。中间的列被分成几行（每个孔）。所以左右列必须跨越这些行。好吧，终于成功了，但它导致了某种缩放问题。如果我放大或缩小表格，则中间列（只有那一列）不会以正确的方式缩放。我无法解决这个问题，所以我开始怀疑这是否是 html 图像虚拟化的正确技术。我真的不是创建网站领域的专家，所以我非常感谢任何帮助。也许有一个完整的其他更好的技术来做到这一点，因为我认为这是网络创作中的一项常见工作。我找不到任何很好的例子或教程。

Answer 1

除非我遗漏了任何东西，否则您不需要使用任何图像切片或任何图像来获得这种效果。这一切都可以在纯 CSS 中完成。

这是一个如何实现的粗略示例：

http://jsfiddle.net/Curt/wxFtJ/

Answer 2

您现在有一个包含一行的表格和一个带有背景图像的大单元格。你的意思是你想让你的 HTML 表格看起来像这样：

<table>
<tr>
<td colspan="3">One row</td>
</tr>
<tr>
<td colspan="3">One row</td>
</tr>
<tr>
<td colspan="3">One row</td>
</tr>
<tr>
<td colspan="3">One row</td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</table>

请阅读基本的 HTML 表格样式：http://www.w3.org/TR/CSS2/tables.html

另外，您真的不应该切片图像来创建表格。