Html 创建此表布局的最佳方法是什么？（附图）

我想创建一个在所有浏览器上都最受支持的html表， 这符合w3c标准。 该表应包括3-4个要素：

蓝色区域的文本-文本可能（a）显示为图像（因此我可以使用更好的字体，并且我肯定所有浏览器都以相同的方式显示），或者（b）可能是真实文本（加载速度更快），我还没有决定

背景图像-根据上面的决定，（a）一个背景图像将覆盖蓝色和粉色部分，或者（b）只有粉色区域，而蓝色区域将使用css背景，我将在其中写入文本

将精确定位在黄色区域所在位置的文本

将精确定位在绿色区域所在位置的图像

以下每个a/b选项的代码是否足够好

备选方案A：

<table width="700" align="center" border="0" cellspacing="0" cellpadding="0">
<tr> 
  <td height="680" style="background-image: url(bgimg.jpg)";>
  <div style="width: 150px; height: 70px; margin-top: 280px; margin-left: 520px; text-align: center; background-color: #FF0;" >
  text
  </div>
  <div style="width: 400px; height:40px; margin-top:242px; margin-left:18px; background-color:#063;">image</div>

  </td>
</tr>

文本
形象

备选案文B：

<table width="700" align="center" border="0" cellspacing="0" cellpadding="0">
<tr> 
  <td width="500" height="680" bgcolor="#C6F3F9">

  <div style="width: 400px; height:40px; margin-top:590px; margin-left:18px; background-color:#063;">image</div>
        </td>

  <td width="200" style="background-image: url(right-cell-bg.jpg)";>
  <div style="width: 150px; height: 70px; margin-top: 80px; margin-left: 20px; text-align: center; background-color: #FF0;" >
  text
  </div></td>

形象
文本

例如：

a。我要用div来定位黄色和绿色区域吗

b。我是否应该使用额外的div（可能用于单元格）

c。样式边距是实现定位的最佳方式吗

d。我应该用html还是用样式宽度定义单元格宽度

e。任何其他意见

---

谢谢

不要使用表格，使用CSS。大概是这样的：

HTML

---

这看起来像是为了布局而使用表格，而不是为了表达表格数据。是的，也许我以前使用了错误的术语“编码”，我改变了主题。在继续之前，您应该注意，您使用表格主要是为了显示数据，而不是为了布局您的网站。如果你打算用它来构建你的网站，你应该重新考虑你的行为。你能详细介绍一下吗？使用表格的缺点是什么？jayjay，搜索一下语义HTMLTanks，我会花一些时间来检查一下

<div id="container">
    <div id="blue">
        <div id="image">
            Image
        </div>
    </div>
    <div id="pink">
        <div id="text">
            Text
        </div>
    </div>
</div>

#container {
    border: 2px solid red;
    width: 700px;
    min-height: 680px;
    position: relative;
}
#blue {
    position: absolute;
    left: 0;
    background: #C6F3F9;
    width: 500px;
    min-height: 680px;
}
#blue #image {
    position: absolute;
    left: 18px;
    bottom: 10px;
    background: green;
    width: 400px;
    height: 40px;
}
#pink {
    position: absolute;
    right: 0;
    background: #FAAEAE;
    width: 200px;
    min-height: 680px;
}
#pink #text {
    position: absolute;
    left: 25px;
    top: 305px;
    background: yellow;
    width: 150px;
    height: 70px;    
}