For this code, when I add the text in the third table row it ruins the layout of all adjacent cells. Please help.
<table width="720" bgcolor="white" height="650" align="center" cellpadding="10" border="1">
<tr valign="top">
<td colspan="8" height="70" align="center"><img src="yooo.gif" align="middle" /> </td> </tr>
<tr height="40">
<td colspan="2" align="center" width="175">Home</td>
<td colspan="2" align="center" width="175">Food</td>
<td colspan="2" align="center" width="175">Hobbies</td>
<td colspan="2" align="center" width="175">Martin's Blog</td> </tr>
<tr height="260">
<td class="info" colspan="4" valign="top"><h2>Welcome to Nenad's Blog!!!</h2><h6>Here on this blog we will be talking about
a bunch of random stuff that are so completely unrelated that will blow your mind.<h6></td>
<td class="info" colspan="4"> h </td> </tr>
<tr height="260">
<td class="info" colspan="4"> h </td>
<td class="info" colspan="4"> h </td> </tr>
Your table looks good from what I can make of what you posted.
You should, however, not be using tables for layout purposes. They are supposed to be used only for tabular data, you know..like a spreadsheet.
For styling your site, you should be using CSS.
http://jsfiddle.net/3rJv7/
Code Runs
You might have to define what "ruin" means. However my best guess is that all the colspans cause some browsers to calculate the optimum column widths poorly. I found that many browsers handle it better if your first row defines the widths, even if it's a dummy row with spacer images. I know, terrible semantically, but using tables for layouts tend to go that way.
Related
I am trying to code this formula (standard deviation):
____________
δ =√∑(xi - µ)2
n
My html code is:
<table border="0" cellspacing="0" cellpadding="0" width="180">
<tr>
<th width="180" colspan="3"><p align="center"><strong>Population Standard Deviation</strong></p></th>
</tr>
<tr>
<td width="40" valign="top"><p align="center"> </p></td>
<td width="50" rowspan="4"><p align="right">√</p></td>
<td width="90" valign="bottom"><p align="left">__________</p></td>
</tr>
<tr>
<td width="60" rowspan="2"><p align="centre"><strong> δ =</strong></p></td>
<td width="90"><p align="center"><strong>∑(x<sub>i</sub> -µ)<sup>2</sup></strong></p></td>
</tr>
<tr>
<td width="90"><p align="center">n</p></td>
</tr>
The challenge I have is to get the formula to be well positioned. I was thinking the row height would help but from further reading the row and column span would nullify it. So how can I best present this formula?
I also have a challenge in adding the division line right below the summation (row3). I tried using CSS but it would mean having the subscripts and superscripts underlined. Is there a better code for this as well? Thanks.
I am placing a heading/title on a HTML page using following code:
<table width="100%" height="55px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="height:10px">
</td>
</tr>
<tr>
<td style="width:105px;"></td>
<td align="left" style="padding-right:10px;padding-left:10px">
<div style="font-family:quicksand;font-size: 28px; color:##bdbdc0;z- index:1000000;position:relative;">
De Graef <font size="2">Landelijk & Sfeervol Wonen</font>
</div>
</td>
</tr>
</table>
Other content is in other tables.
When i zoom in or zoom out, or simply change resolution, this text is not moving it's position in sync with the other page elements.
Any ideas?
Change your header row to this :
<tr>
<td align="center" style="font-family:quicksand;font-size: 28px; color:##bdbdc0;margin-left:-50px;background-color:##4D4946;">
<table width="956" border="0" height="100%" cellspacing="0" cellpadding="0" style="background-color:##4D4946;">
<tbody>
<tr>
<td style="background-color:##4D4946;">
<br>
<br>
<img style="background-color:##4D4946;" src="images/logonew.png">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
I'm helping you here but should seriously consider rewriting all of it in a clean and modern way, most of your code is deprecated :
Use appropriate HTML markup for segmenting your document
Use <table> only when then you need an actual table
Use separate CSS files for keeping your markup clean
Read the W3C recommendations about all of this
<table width="100%" border="0">
<table width="600" align="center" bgcolor="#ffffff">
<tr>
<td width="600" colspan="120">Banner Image</td>
</tr>
<tr>
<td width="400" colspan="80"></td>
<td width="10" colspan="2" bgcolor="yellow"></td>
<td width="190" colspan="38"></td>
</tr>
</table>
</table>
The alignment is messed up for the 2nd row. How can it be resolved?
Looks like there are a lot of issues here.
First off, this isn't valid html. The second table tag can't go where you have it. You need to do something like:
<table width="100%" border="0">
<tr><td>
<table width="600" align="center" bgcolor="#ffffff">
<tr>
<td width="600" colspan="3">Banner Image</td>
</tr>
<tr>
<td width="400"></td>
<td width="10" bgcolor="yellow"></td>
<td width="190"></td>
</tr>
</table>
</td></tr>
</table>
Which will probably solve your immediate problem. However, why on earth do you have 120 columns? That seems wrong by any standard.
Note I removed the colspan because it's use here seemed very inappropriate.
Also, you might ask yourself why you have the outer table tag anyway. It's not exactly doing anything for you that can't be done in a better manner.
Colspan is used to indicate how many COLumns a single column SPANs, not to indicate a pixel width, as it would appear that you are trying to do here.
Instead, use colspan to indicate how many columns a single column should span, and indicate the width of columns either using css styles or the "width" atttribute.
See this example:
http://jsfiddle.net/xixionia/yt3gf/
The second table should be better if you placed it inside a td on the first table. Then on the second table there's a lot of colspan.
<div>
<table>
<tbody>
<tr>
<td width="600" colspan="3">Banner Image</td>
</tr>
<tr>
<td width="400"></td>
<td width="10" bgcolor="yellow"></td>
<td width="190"></td>
</tr>
</tbody>
</table>
</div>
I do prefer to use div in place of table. But you still have a choice. As you can refer to the other post.
You would try:
<table width="100%" >
<table align="center" bgcolor="#ffffff" cellspacing="0" cellpadding="0" border="1">
<tr>
<td colspan="120">Banner Image</td>
</tr>
<tr>
<td style="width:400px;" colspan="80">a</td>
<td style="width:10px;" colspan="2" bgcolor="yellow">b</td>
<td style="width:190px;" colspan="38">c</td> </tr>
</table>
</table>
I add "border=1" and text in the cells in order to see the changes.
You got a table inside a table directly and thats not "valid".
Considering:
I want the banner to stretch across the table. The second row should be in proportion of width 400, 10 for the separator and 190
You should have:
<table style="width:100%; background-color: #fff;">
<tr>
<td colspan="3">Banner Image</td>
</tr>
<tr>
<td style="width: 66.6%"></td>
<td style="width: 1.6%; background-color: yellow;"></td>
<td style="width: 31.6%"></td>
</tr>
</table>
You are clearly trying to use tables to make layout wireframes. You should research more about CSS and html5.
This answer will probably fix your code but not the logic you are trying to apply.
I have a table that has worked correctly for many years, but recently the table widths have gone slightly haywire. It's an old HTML site I maintain but didn't write (it should be rewritten in CSS) but the owner doesn't want to do it yet and it's a very large site.
No changes were made to the table structure, yet the width=x % is no longer working correctly on part of it. I know the table is messy and overly complex
I've stared at this and I know I'm missing something easy. There are some errors in the table, but they have not prevented any rendering engine from displaying it properly until recently (client noticed it a few days ago).
The exact problem is that a nested table (see *problem below) is not allocating space on a 25%, x%, 25% basis. The x% is slightly under 50%, but the two outer columns should be 25% each (when the browser is large enough) and they used to scale equally. Now, the left column is always larger than the right proportionally, the middle expands and shrinks with the size of the browser, but the right column is always too small and crowded.
I'm sorry for the code. It's a messy table and I wanted to cut what I thought was extraneous but leave the structure.
I'm stumped. Any help would be appreciated.
CLARIFICATION. This table has 3 nested tables within it. Those 3 tables used to resize as you changed the size of the browser window, but now only 2 of the 3 are scaling. The left-most and the center tables scale and re-size as part of the whole; the right-most nested table no longer scales and has shrunk below the 25% width threshold as specified. This is a new phenomenon, but none of the base code has been changed (I verified from a 1 year old copy of the page).
<table width="100%" height="500" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5" height="54" align="left" valign="top" bgcolor="#FFFFFF"><br /> </td>
</tr>
<tr>
<td colspan="5" height="21" align="left" valign="top" bgcolor="#FFFFFF"><some images><br /> </td>
</tr>
<tr>
<td colspan="5" height="25" align="left" valign="top" bgcolor="#FFFFFF"><br /> </td>
</tr>
<tr>
<td colspan="3" width="100%" height="1" align="left" valign="middle" </td>
</tr>
<tr> ************PROBLEM STARTS HERE ***************
<td colspan="1" width="25%" height="485" valign="middle" align="right" >
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="right" valign="middle">
<p class="x">
<br />
<br />
</p>
</td>
<td width="15" align="right" valign="middle"></td>
</tr>
</table></td>
<td colspan="1" height="450" width="1" valign="top" align="right" </td>
<td colspan="1" height="485" align="center" valign="top">
<table width="100%" border="0" valign="top" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="1" height="485" align="center" valign="middle"></td>
</tr>
</table></td>
<td colspan="1" height="450" width="1" valign="top" align="right" </td>
<td colspan="1" height="485" width="25%" valign="middle" align="right" bgcolor="#84968A"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15" align="right" valign="top"></td>
<td align="left" valign="middle">
<p class="x">
<br />
<br />
</p>
</td>
</tr>
</table></td>
</tr>
</table>
Actually, problem lies in the row above where you have "problem starts here":
<td colspan="3" width="100%" height="1" align="left" valign="middle"> </td>
You are saying that 3 columns are 100% of the width. Then, your next row has 5 cells.
I have this problem on my website's layout, and it's basically preventing me from continue it, it's destroying everything.
Here goes the HTML code:
<table cellpadding="0" cellspacing="0" width="446" height="362">
<!-- MSTableType="layout" -->
<tr>
<td valign="top" colspan="2" height="110">
<p align="center">Banner</td>
</tr>
<tr>
<td valign="top" height="95">I want this cell to have a fixed height</td>
<td valign="top" rowspan="3" width="305">
<p align="center">Text goes here - if the text is too long, I want the
stretching cell to vary in height, not the other 2.</td>
</tr>
<tr>
<td valign="top" height="68">I want this cell to have a fixed height</td>
</tr>
<tr>
<td height="89" width="141" valign="top">Stretching/Flexible cell - I
want this one to vary in height if the text on the right cell is too
long</td>
</tr>
</table>
As you can see, if I write a text that is larger than the "Text Cell" height, all the cells in the right column stretch, and I only want the last one to do so. Can you help me?
If you try to make a website with tables, then welcome to 21sst century. Table layout is very outdated. Try a site like http://www.pmob.co.uk/temp/3colfixedtest_4.htm. There you find a web standard layout.
Make the height of the bottom-left cell "*" like this:
<table cellpadding="0" cellspacing="0" width="446" height="362">
<!-- MSTableType="layout" -->
<tr>
<td valign="top" colspan="2" height="110">
<p align="center">Banner</td>
</tr>
<tr>
<td valign="top" height="95">I want this cell to have a fixed height</td>
<td valign="top" rowspan="3" width="305">
<p align="center">Text goes here - if the text is too long, I want the
stretching cell to vary in height, not the other 2.</td>
</tr>
<tr>
<td valign="top" height="68">I want this cell to have a fixed height</td>
</tr>
<tr>
<td height="*" width="141" valign="top">Stretching/Flexible cell - I
want this one to vary in height if the text on the right cell is too
long</td>
</tr>
</table>
This won't let you define the minimum height of the cell, but it works. Best of course would be to use css.
Actually, as I think about this, you can set the height of your right column to "257" (the sum of your left heights, and that will mean that your * will default to 89 if the right column does not stretch.
I am sure this is not cross-browser compatible however... Yup, just dusted off IE6, and it doesn't behave as one would expect. Firefox works great, though.
This probably means that css would be your best bet.
I would at least try to learn some CSS and use it to style and size your tables, instead of using HTML. There are many good tutorials out there, but for example:
table {
width: 600px;
}
table td {
padding: 5px;
}
will make your table 600px wide and give every <td> 5px of padding. Assign any cells or rows ids (unique) and classes (apply to a group) for more precise control.
As noted above, although it is not really an answer to your question, the best way to do what you want to do is to learn how to create CSS layouts using <DIV> tags. This will give you much more control of your page layout, and although requires some learning up front, will save you tremendous amounts of headaches in the future using tables.
Actually, looking at your example again. a based layout here would be very simple.
<div id='container'>
<div class='banner'>Banner</div>
<div class='fixed'>Fixed Height</div>
<div class='dynamic'>Expanding div to fit text inside</div>
<div class='fixed'>Fixed Height</div>
<div class='dynamic'>Expanding div to fit text inside</div>
</div>
This will give you the same layout as your table with some CSS styling.
EDIT: One last word on the matter. For me personally, if I know that an area is going to be a grid type area with no special formatting needs for different areas a <table> is fine, otherwise I will always use a CSS based layout.
Thanks for the responses guys. I tried for the last few hours to built this with divs, but i'm going nowhere. I have lots of rowspans ans colspans, and I can't put them in CSS.
Actually the design is WAY more complicated that the simple table I posted here:
<table cellpadding="0" cellspacing="0" width="750" height="871">
<!-- MSTableType="layout" -->
<tr>
<td valign="top">
<p style="margin-top: 0; margin-bottom: 0">Banner</td>
<td valign="top" rowspan="3">
<p style="margin-top: 0; margin-bottom: 0">Banner</td>
<td valign="top" rowspan="3" colspan="2">
<p style="margin-top: 0; margin-bottom: 0">Banner</td>
<td height="154"></td>
</tr>
<tr>
<td valign="top">Banner</td>
<td height="24"></td>
</tr>
<tr>
<td valign="top" rowspan="3">Fixed Menu Cell</td>
<td height="122"></td>
</tr>
<tr>
<td valign="top" colspan="3">
Banner</td>
<td height="29"></td>
</tr>
<tr>
<td valign="top" rowspan="6" colspan="2"><p> </p>
<p>CONTAINER AREA, Text goes Here</p>
</td>
<td valign="top" rowspan="6">
</td>
<td height="102"></td>
</tr>
<tr>
<td valign="top">
Fixed Menu Cell</td>
<td height="37"></td>
</tr>
<tr>
<td valign="top">
Fixed Menu Cell</td>
<td height="44"></td>
</tr>
<tr>
<td valign="top">
Fixed Menu Cell</td>
<td height="178"></td>
</tr>
<tr>
<td valign="top">
Fixed Menu Cell</td>
<td height="109"></td>
</tr>
<tr>
<td bgcolor="#FFFFFF">Flexible Cell - can vary depending on the
Container Area</td>
<td height="33"></td>
</tr>
<tr>
<td valign="top" colspan="4">
<p align="center">Bottom</td>
<td height="38"></td>
</tr>
<tr>
<td width="252"></td>
<td width="410"></td>
<td width="56"></td>
<td width="30"></td>
<td height="1" width="2"></td>
</tr>
</table>
I'm trying to convert this mess to DIV, but I don't think I'm going to make it ^^''
It seems such a simple problem, but I can't see a simple soluction...