Dream Weaver Table Width
I developed a simple PHP web page using Dream Weaver CS5 Version 11.0 Build 4964.
My web page consists of a table (TABLE) contains 10 table rows (TR) and each row has only one table cell (TD).
Every Table Cell (TD) has a table in开发者_运维技巧side it which contains different Form Elements like Textboxes, RadioButtons, CheckBoxes and so on divided in the table columns and rows.
The problem I face is that I put every table width using the Width Property or the Style Property or using the CSS Styling Sheet so that I make the 10 tables has the same width (600 pixels for example) and to show them as they are a one table.
My HTML code is like the following:-
<html>
<body>
<table width="600">
<tr>
<td>
<table width="600">
<tr>
<td width="300">
</td>
<td width="300">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="600">
<tr>
<td width="200">
</td>
<td width="200">
</td>
<td width="200">
</td>
</tr>
</table>
...
</td>
</tr>
</table>
</body>
</html>
When I browsed my php web page using Live View, the width I put did not apply and Dream Weaver extends some tables and increases the width and the tables borders does not match and some tables appear smaller widthes while others has bigger widthes.
I tried to put each table cell width to control that but it did not work too.
For example, if the width I put is 600 it becomes 641 and I tried to change it in Design and Code Views but the problem still appears.
I welcome any hint to solve that annoying problem.
This is pretty nasty code, man. Don't use HTML attributes, you should give your tags appropriate classes and control everything via CSS. You might want to set border-collapse to collapse and set all the necessary widths in pixels.
And, as Kyle remarked, never ever trust your WYSIWYG view. Only a real browser will show you how your code actually renders.
Table cells and columns will always resize to accommodate the largest element in the row/column. As others have suggested, you should reconsider the use of nested tables. However, if you want to control the width of tables, you can do so with the following style rule:
table {
width: 600px;
table-layout: fixed;
}
This constrains the width of columns to the dimensions set in the first row.
if you're looking at having the same width for all table's and td's then the best way is to use css
table{width: 600px;}
td{width: 200px;}
if you want different width for each of the tables then give it a class and define the width within the css
<table class="tab1">
.tab1{width: 600px;}
.tab1 td{width: 200px;}
hope this helps.
Never ever trust any application's Live View! EVER! They're ALL wrong, view it in a real browser.
I use DW every day and I never trust what's in the live view, especially for tables. Trust me, put it in a browser and see what happens :)
I believe you need to think about things such as margins, padding, cell-padding and cell-spacing. All of these will affect td and table dimensions.
I'm guessing that you have contents in some of the table cells that don't fit your defined sizes. for example if you try to put a 300 wide image in a 200 wide table cell then the browser will extend that table cell to 300 pixels (and padding, margins, etc.).I'd suggest if possible not using multiple nested tables but one large table and if needs be use colspan to merge cells (eg a 6 column table, with each column being assumed to be 100 width, if you want a cell of 200 width you colspan=2 and if you want 300 you colspan=3. I'd add the widths explicitly as well. This won't stop the browser potentially rearranging the size of your table cells but it will mean that all of your table cells will be adjusted so your tables will line up at least.
If this answer doesn't help find your problem then I'd suggest that you show us the final HTML because there is clearly something in there that is causing this problem. It can't be a dreamweaver specific problem because the browser doesn't care where your HTML was produced.
加载中,请稍侯......
精彩评论