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

Question

我想创建一个最适合所有浏览器的html表， 这符合w3c标准。 该表应包含3-4个元素：

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

2. 背景图片 - 根据上述决定，（a）一个背景图片可以覆盖蓝色和粉红色部分，或者（b）只是粉红色区域，而蓝色区域只使用css背景，我会把文字写在里面。

3. 准确定位黄色区域的文本。

4. 将定位于绿色区域的图像。



每个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>

例如：

一个。我应该用DIV定位黄色和绿色区域吗？

湾我应该使用额外的DIV（可能用于细胞）吗？

℃。风格边际是实现定位的最佳方式吗？

d。我应该用html或style-width定义单元格宽度？

即任何其他评论。

谢谢！

Answer 1

不要使用表，使用CSS。像这样：

HTML

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

CSS

#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;    
}

http://jsfiddle.net/mr_mayers/jHT3Z/