Simple HTML table with fixed columns
I expected the middle column to be 3 times as wide as the left and right columns. Instead of the withs appearing as specified 200,600, 200 (left to right), the widths appeared开发者_运维问答 as if I specified them in this order: 200, 200, 600. In other words, the LAST column appeared 3 times as wide as the first two.
Why? (This is my primary question)
<!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>
Also, does the following non table approach have any advantages? (This is a secondary question that has been answered)
<!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;
}
You have an extra set of colgroup tags with nothing in them. I guess the browser is inserting one (empty) column definition for that and then three more in the second colgroup, because the browser is trying its best to do what you want. Remove the empty colgroup tabs and it'll work as expected.
The second, div-based model has advantages in that its both more semantic and will likely render faster. Those involved in standards will tell you that it is important for your HTML to be semantic. That is, each element has a distinct meaning and you should use the appropriate tag for your meaning. This is mostly to aid in the use of screen readers.
Tables imply your data is somehow tabular. In this case, you're using tables as a mechanism for layout. According to current best practices, this is considered a no-no. Browsers struggle more to render tables and often you see a visual "filling in" of the data, this way. Check out http://havenworks.com/ for an example. (Caution: gruesomely ugly).
Assuming your targeting a html4 based audience (ie: not html5) then the div based layout mechanism makes the most sense.
Hope it helps!
Would something like this work for what you are trying to do?
<table width="100%">
<tr>
<td width="25%"> </td>
<td width="50%"> </td>
<td width="25%"> </td>
</tr>
</table>
Try this for a fixed width:
<table border="1" width="1000">
<tr>
<td width="200">A</td>
<td width="600">B</td>
<td width="200">C</td>
</tr>
</table>
加载中,请稍侯......
精彩评论