Question

我预计中间列的宽度是左右列的3倍。而不是出现指定200,600,200（从左到右）的宽度，宽度似乎我按此顺序指定它们：200,200,600。换句话说，最后一列出现的宽度是前两列的3倍

为什么呢？（这是我的主要问题）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Left</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
</head>

<body>

<table style="table-layout: fixed; width:1000px;">
    <colgroup>
    </colgroup>
    <colgroup>
        <col width="200px">
        <col width="600px">
        <col width="200px">
    </colgroup>
    <tr>
        <td>1 </td>
        <td>2 </td>
        <td>3 </td>
    </tr>
</table>

</body>

</html>

此外，以下非表格方法是否有任何优势？（这是已经回答的次要问题）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Left</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="Untitled_1.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div style="width:1000px;">

    <div id="masthead">
    </div>
    <div id="top_nav">
    </div>
    <div id="container">
        <div id="left_col">Left
        </div>
        <div id="right_col">RIght
        </div>
        <div id="page_content">Page Content </div>
    </div>
    <div id="footer">
    </div>
</div>

</body>

</html>

CSS：

#left_col {
    width: 200px;
    margin:0px;
    float: left;
}

#page_content {
    margin-left: 200px;
    margin-right: 200px;
    width: 600px;
}


#right_col 
{
    width: 200px;
    float: right;
}

Answer 1

你有一组额外的colgroup标签，其中没有任何内容。我猜浏览器正在为此插入一个（空）列定义，然后在第二个colgroup中插入另外三个，因为浏览器正在尽力做你想做的事情。删除空的colgroup选项卡，它将按预期工作。

Answer 2

第二种基于div的模型的优点在于它更具语义性，并且可能更快。那些参与标准的人会告诉你，HTML的语义很重要。也就是说，每个元素都有不同的含义，您应该使用适当的标记来表示您的意思。这主要是为了帮助使用屏幕阅读器。

表格暗示您的数据以某种方式表格化。在这种情况下，您使用表作为布局机制。根据目前的最佳实践，这被认为是禁忌。浏览器更难以渲染表格，通常你会看到数据的视觉“填充”，这样。查看http://havenworks.com/以获取示例。（警告：可怕的丑陋）。

假设您定位基于html4的受众群体（即：不是html5），那么基于div的布局机制最有意义。

希望它有所帮助！

Answer 3

这样的事情会对你想做的事情起作用吗？

<table width="100%">
   <tr>
     <td width="25%">&nbsp;</td>
     <td width="50%">&nbsp;</td>
     <td width="25%">&nbsp;</td>
   </tr>
</table>

尝试固定宽度：

<table border="1" width="1000">
   <tr>
     <td width="200">A</td>
     <td width="600">B</td>
     <td width="200">C</td>
   </tr>
</table>

带有固定列的简单HTML表

3 个答案: