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...
Related
I have an HTML table that's being filled with content of various sizes. Some can be about a paragraph long.
All I want to accomplish is to have the cells automatically adjust in height to support the various content, without giving each row a fixed size ('cause that would look bad).
<td align="left" width="10%" height="130"><div>{{this.val8}}</div></td>
<td align="left" height="130"><div>{{{this.val7}}}</div></td>
<td align="left" height="130"><div>{{this.val6}}</div></td>
<td align="left" height="130"><div>{{this.val}}</div></td>
<td height="130" width="80%"><div>{{{this.val0}}}</div></td>
<td height="130"><div>{{{this.val8}}}</div></td>
<td align="right" width="80%" height="130"><div>{{{this.val1}}}</div></td>
<td align="right" width="80%" height="130"><div>{{{this.val2}}}</div></td>
<td height="130" width="75%"><div>{{{this.val3}}}</div></td>
<td height="130"><div>{{this.val4}}</div></td>
<td height="130"><div>{{this.val5}}</div></td>
Right now, I have fixed heights for each cell. Generally, most cells fit this height, but I'd like the ones that don't to be smaller.
Any tips or suggestions would be awesome.
Thanks!
Lets clean up your markup for starters:
http://jsfiddle.net/x3a6bu7L/
<table>
<tr>
<td align="left">
{{this.val8}}
</td>
<td align="left">
{{this.val7}}
</td>
<td align="left">
{{this.val6}}
</td>
<td align="left">
{{this.val}}
</td>
<td>
{{this.val0}}
</td>
<td>
{{this.val8}}
</td>
<td align="right">
{{this.val1}}
</td>
<td align="right">
{{this.val2}}
</td>
<td>
{{this.val3}}
</td>
<td>
{{this.val4}}
</td>
<td>
{{this.val5}}
</td>
</tr>
</table>
You don't need those DIV elements inside the TD cells.
The settings for height were incorrect and not necessary. The
proper way to set height is height:130px if you really have to.
Your widths were incorrect. If you want to use percentages you need
all TD width percentages to add up to 100%
Don't use inline CSS. Use an external CSS stylesheet or encapsulate
all your styles in a STYLE element in the HEAD.
If you need to set vertical alignment for the cells use:
td { vertical-align:top; }
Just remove all height attributes. Also please note that both height and width attributes are obsolete - use styles instead.
i want to;
1.remove a small part of this table and make a free space there.i comennted it on the code.
2.also to center the words in the table.
CAN ANY ONE HELP ME PLEASE?(Please use only HTML not css or javascript)
<html>
<head>
<title>My First Webpage</title>
</head>
<body >
<table border="1px" width="80%" cellspacing="0" cellpading="0" >
<tr>
<td ></td> <! -- I NEED TO REMOVE THIS PART FROM TABLE AND MAKE A **FREE SPACE** HEARE -->
<td >9-11</td>
<td >11-13</td>
<td >13-15</td>
<td >15-17</td>
</tr>
<tr>
<td >Monday</td>
<td>6</td>
<td colspan="0">7</td>
<td rowspan ="3">Lunch</td>
<td>a</td>
</tr>
<tr>
<td>Tuesday</td>
<td colspan="2">< free</td>
<td>s</td>
</tr>
<tr>
<td >Wedensday</td>
<td>a</td>
<td>s</td>
<td>5</td>
</tr>
</table>
</body>
</html>
It's best practice to use CSS for the centering. You could do it like this:
<table style="text-align:center">
But you could also use HTML in each cell like this:
<td align="center">Text</td>
or like this:
<td><center>Text</center></td>
Tables aren't meant to skip cells, so different browsers will handle it differently. You won't get consistent results. Depending on what you need the blank space for, though, there are some workarounds you could use.
If you just want the cell to be empty, put a sticky space inside like this:
<td> </td>
Some browsers are confused by empty tags, but adding a sticky space (which displays as a space- you can't see it) fixes that.
If you want the cell to have no background / border, so it looks like it isn't there:
<td style="background:none; border:none">
That's embedded CSS, and I've included it because the HTML version is deprecated and you're really supposed to use CSS instead, but here's the HTML:
<td bgcolor="#000000" border=0>
You must replace #000000 with the color behind the table. If there's an image or text behind the table, you could use a transparent image as the background instead. (I wouldn't advise going to all that trouble if there's any way you can use style="background:none" instead, though.)
You could make the cell following the one you're removing span the space of both of them:
<td colspan=2>9-11</td>
<td >11-13</td>
<td >13-15</td>
<td >15-17</td>
Another solution is to put tables inside a table.
<table border="1px" width="80%" cellspacing="0" cellpading="0" >
<tr>
<td align="right"> <!-- The content is aligned to the right so that the blank space will be on the left. -->
<table width="80%"> <!-- The width of four out of five cells is 80% of the total width -->
<tr>
<td >9-11</td>
<td >11-13</td>
<td >13-15</td>
<td >15-17</td>
</tr>
</table>
</td>
</tr>
<tr>
<td >Monday</td>
<td>6</td>
<td colspan="0">7</td>
<td rowspan ="3">Lunch</td>
<td>a</td>
</tr>
<tr>
<td>Tuesday</td>
<td colspan="2">< free</td>
<td>s</td>
</tr>
<tr>
<td >Wedensday</td>
<td>a</td>
<td>s</td>
<td>5</td>
</tr>
</table>
As you can see, there are a ton of different ways to approach the problem. HTML leaves a lot of room for experimentation and creativity.
jF: http://jsfiddle.net/theStudent/b9tGV/1/
I would say you will have to use some CSS, that would be the most professional way to go about doing it.
I have started you off so you can see how that works in above link, it is quite simple and there is lot of tutorials and samples online just do little research.
Sample I started you with is very plain needs more work.
best of luck I believe that is a good start
HTML
My First Webpage
<body >
<table width="80%" cellspacing="0" cellpading="0" >
<tr>
<td class="no-border"></td> <! -- I NEED TO REMOVE THIS PART FROM TABLE AND MAKE A **FREE SPACE** HEARE -->
<td class="border">9-11</td>
<td class="border">11-13</td>
<td class="border">13-15</td>
<td class="border">15-17</td>
</tr>
<tr>
<td class="border">Monday</td>
<td>6</td>
<td colspan="0" class="border">7</td>
<td rowspan ="3" class="border">Lunch</td>
<td class="border">a</td>
</tr>
<tr>
<td class="border">Tuesday</td>
<td class="border" colspan="2">< free</td>
<td class="border">s</td>
</tr>
<tr>
<td class="border">Wedensday</td>
<td class="border">a</td>
<td class="border">s</td>
<td class="border">5</td>
</tr>
</table>
</body>
</html>
CSS
.no-border{
border: none;
}
.border{
border: 1px solid #000;
text-align:center;
}
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.
I created a Bingo Card using Table in HTML. In the second column if I use the letter I, the size of the column automatically reduces and if I use any other letter then size of column comes back to normal. Why its happening so?
Table Image (using I in Column 2): http://imageshack.us/photo/my-images/21/18575712.png/
Table Image (using A in Column 2): http://imageshack.us/photo/my-images/580/11014314.png/
<html>
<head>
<title>Bingo Card</title>
</head>
<body>
<h2>Bingo Card</h2>
<table border="1px" width="50%">
<tr>
<th>B</th>
<th>A</th>
<th>N</th>
<th>G</th>
<th>O</th>
</tr>
<tr>
<td id="square0"> </td>
<td id="square1"> </td>
<td id="square2"> </td>
<td id="square3"> </td>
<td id="square4"> </td>
</tr>
<tr>
<td id="square5"> </td>
<td id="square6"> </td>
<td id="square7"> </td>
<td id="square8"> </td>
<td id="square9"> </td>
</tr>
<tr>
<td id="square10"> </td>
<td id="square11"> </td>
<td id="square12"> </td>
<td id="square13"> </td>
<td id="square14"> </td>
</tr>
<tr>
<td id="square15"> </td>
<td id="square16"> </td>
<td id="square17"> </td>
<td id="square18"> </td>
<td id="square19"> </td>
</tr>
<tr>
<td id="square20"> </td>
<td id="square21"> </td>
<td id="square22"> </td>
<td id="square23"> </td>
<td id="square24"> </td>
</tr>
</table>
</body>
</html>
I see the same issue in Chrome when column 2 contains an A. If you want to have a guaranteed column width you should explicitly define its size using either the <colgroup> tag or a corresponding width attribute:
<table border="1px" width="50%">
<colgroup>
<col width="20%"></col>
<col width="20%"></col>
<col width="20%"></col>
<col width="20%"></col>
<col width="20%"></col>
</colgroup>
...
or
<tr>
<th style="width:20%">B</th>
...
The browsers just does not make any guarantee if you do not explicitily define the widths for the different columns.
UPDATE: From the HTML4 specification:
If an author specifies no width information for a column, a user agent
may not be able to incrementally format the table since it must wait
for the entire column of data to arrive in order to allot an
appropriate width.
You could try change the column width with css...
And I think it's happening because of the letter 'I' is "thin" compared to other letters, but I don't sure about that...
I think each character takes some space the width of i is less than A, to get resolved use a css style
td{width:20%} this should get resolved
In this simple case, it suffices, for most browsing situations, to set the column widths to the same (20%). However, in general, table cell and column width settings in HTML and CSS are just suggestions and may be overridden by browsers, on the basis of the contents requirements. (You can see this if you use a very narrow browser window width here.)
The way to prevent this is to use “fixed” table layout, e.g.
<style>
table { table-layout: fixed; }
th { width: 20%; }
</style>
“Fixed” layout has its implications. For example, if the content does not fit, it will get truncated.
<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.