帶固定列的簡單HTML表格

我期望中間列的寬度是左右兩列的3倍。 200（從左到右）的寬度看起來好像按照200,200,600的順序指定寬度，而不是按照200,600,200的規定出現。換句話說，最後一列的寬度是前兩個寬度的3倍。帶固定列的簡單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" /> 
</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; 
}

來源

2010-02-16 ChadD

'div'與'table'的優點取決於數據/使用情況。如果數據是表格，那麼使用'table'，如果只是用於佈局，則使用'div'方法。但最終歸結爲目的和偏好。 – 2010-02-16 02:23:08

如果刪除第一個（空）'colgroup'，表格是否按預期顯示？ – 2010-02-16 02:52:36

你有一組額外的什麼也沒有在他們COLGROUP標籤。我想瀏覽器正在插入一個（空的）列定義，然後再在第二個colgroup中插入三個列定義，因爲瀏覽器正在盡力做你想做的事。刪除空的colgroup選項卡，它將按預期工作。

來源

2010-02-16 03:11:58

有趣。你是對的。我似乎記得VS2008自動添加了標籤。我試圖刪除它們，然後他們回來了。所以我讓他們認爲它們是無害的。我想我必須閱讀該標籤。 TY！ – ChadD 2010-02-16 03:42:13

第二，DIV-基於模型的優點在於它的兩個更多的語義，很可能會呈現速度就越快。那些參與標準的人會告訴你，你的HTML語義是很重要的。也就是說，每個元素都有不同的含義，您應該使用適當的標籤來表達您的意思。這主要是爲了幫助使用屏幕閱讀器。

表格暗示你的數據是某種表格。在這種情況下，您使用表格作爲佈局的機制。根據目前的最佳做法，這被認爲是否定的。瀏覽器更努力地渲染表格，並且通過這種方式，您通常會看到數據的可視化「填充」。以http://havenworks.com/爲例。（小心：可怕的醜陋）。

假設您的目標是基於html4的受衆（即：不是html5），那麼基於div的佈局機制最有意義。

希望它有幫助！

來源

2010-02-16 02:25:59

會這樣的工作，你正在嘗試做什麼？

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

來源

2010-02-16 02:26:15 Boolean

是的。但爲什麼不固定的寬度工作？請注意，如果我以600,200,200的順序指定列寬度，它們看起來就好像它們被指定爲200,600,200。 – ChadD 2010-02-16 02:30:38

我知道更多舊式的做法。保持簡單..您可以使用樣式表等。 – Boolean 2010-02-16 02:52:31

帶固定列的簡單HTML表格

回答

相關問題