I have a layout made in photoshop and I'm trying to slice it up and put it into a table layout. I'm trying to make a layout using a table that looks like this:
http://imgur.com/eKndd.gif
but when I marked up the table all the widths of the cells seem to be incorrect and not what I want.
My markup is:
<table width="950" border="1">
<tr>
<td colspan="2" rowspan="3" width="268" height="251">rotating pic</td>
<td colspan="2" width="682" height="150">banner</td>
</tr>
<tr>
<td colspan="2" width= "682" height="48">top nav</td>
</tr>
<tr>
<td width="404" height="54">filler</td>
<td rowspan="2" width="278" height="533">right bar</td>
</tr>
<tr>
<td width="191" height="479">left bar</td>
<td colspan="2" width="481">content</td>
</tr>
</table>
The cells need to be of specific width and height for the images, but when rendered none of the widths are correct. What am I doing wrong? Please help. Thanks.
Your heights are too high for the layout you are expecting, also for your banner, top nav and filler to be the same height, you actually have to make their height attributes the same...
Also, not to be a downer, but might I suggest not doing table based layouts? You should considering using CSS.
Layout is not function of HTML. That is what style sheets are for. With that said your code will be completely inaccessible. That means if your code is for any sort of business in the US or UK are wide open to discrimination lawsuits. In addition to accessibility failures your page code will be seriously bloated and will waste your bandwidth and your user's time.
My suggestion is do not use HTML for layout. Practice separation of markup and presentation. Do not use any attributes that have any sort of cosmetic purpose, such as: width, height, border, cellpadding, cellspacing, and so on.
Do your users a tremendous favor and do not use markup for presentation.
I see there are two possibilities
1) The images you are adding are not re-sized to the size which you want to fit into.
2) When adding images using tag try explicitly setting the height and width. Try this
HTML IMAGE LINK TUTORIAL
IF you are new then try the layout using DIV, tables are old school way.
Can we see your code with images included? I would suggest taking out the heights and widths, putting the images in, and then playing around with heights/widths to get the to your liking. Your layout looks overly complicated. Could you go with a simpler 3 column layout and treat the whole header as one element?
Related
I've got a problem with div spacing in responsive design if you go to this url: http://www.false-idolz.com/mobile.html you'll se how when you decrease to the maximum de window width the div spacing gets bigger instead of smaller... why does it happen? how do i fix it? Thanks!
<table>
<div>
<tr>
<td>
......texto.........
</td>
</tr>
</div>
<div>
<tr>
<td>
......texto.........
</td>
</tr>
</div>
</table>
This is the example of the code I am using everything works but spacing
Transferred from comments as this proved to be the answer
Inspecting the source code reveals that you have got tables within tables - not only is this bad practice, but it will also cause many problems and I suspect that this is one of them. Honestly, I think there is far too much for us to change in order to get your code working as intended. Please redesign your layout, without using tables within tables, then we if you still have difficulty come back to us.
In normal HTML for browsers, making elements overlap is easy.
But in the dark world of HTML email, where the motto is "code like it's 1996" because Outlook uses the rendering engine from MS Word and Gmail removes almost everything, every method for making two elements overlap that I can think of is unsuitable due to poor client support:
Position isn't supported in many clients, so no position: absolute; or position: relative; and no top, left, right...
Negative margins get removed by Gmail and others. So, no negative margins.
Using the 'overhang' from an element with overflow: visible; and a width and height that is less than the size of the element's contents doesn't work very well when <img> tags all need explicit heights and widths or where layouts, due to lack of float support and erratic treatment of <div>s, by necessity need to be based on tables most of the time. (that said, if anything is possible, something based on this seems like the most likely option)
Nothing involving background images is an option as these are removed in Gmail and others
Don't even think of trying to use CSS3 or javascript in a HTML email...
Is there anything that can be reliably used to create overlap between elements in cross-client HTML emails? And/or any way to make an element extend out from its bounding box without affecting the positioning of its neighbours?
For example, suppose you wanted to do something like this (dashed lines and backgrounds showing bounding boxes), where the large image hangs down over the row below rather than pushing it down...
An element (in this case, an <img>, but not necessarily an image) overlaps other elements (in this case, the row below - but not necessarily a separate row) without pushing them away.
Is there any way to do that without major client compatibility problems?
EDIT: Just found this piece of crazy twisted genius: making table cells overlap using colspans and rowspans. This could be an option, not yet thoroughly tested its cross-client rendering though, any info from prior experience or research is welcome.
Assume we're making a newsletter where we can't predict what clients our customers will be using, so we have to support popular mainstream email clients: Outlook, Gmail, Yahoo, Hotmail, Thunderbird, iOS/OSX, Android...
A little late to the conversation, but this similar answer is the technique you are looking for.
Your example is a lot more complex however as you are spanning over both rows and columns. I'm up for the challenge:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr><!-- This row is needed to enforce col widths in Outlook -->
<td width="100">
</td>
<td width="300">
</td>
<td width="200">
</td>
</tr>
<tr>
<td width="400" valign="top" height="80" colspan="2" bgcolor="#bbbbbb">
Title Here
</td>
<td width="200" valign="top" height="120" rowspan="2" bgcolor="#dddddd">
Image Here
</td>
</tr>
<tr>
<td width="100" valign="top" height="540" rowspan="2" bgcolor="#cccccc">
Column<br>...<br>...<br>...
</td>
<td width="300" valign="top" height="40" bgcolor="#aaaaaa">
Heading 1
</td>
</tr>
<tr>
<td width="500" valign="top" height="500" colspan="2" bgcolor="#eeeeee">
Content<br>...<br>...<br>...
</td>
</tr>
</table>
This is as close as you'll get. You can't make non-rectangles, so the top Header in the body has to be in it's own cell.
The genius' solution worked in most situation. But for outlook 2007, 2010 and 2013, it didn't work for the rowspan will be deleted.
I want to space the headers above the form unevenly on one line and not really sure what the best way to do this using HTML and CSS. I have used span tags and padding in the past but this works differently in different browsers and does not line up correctly. Im sure there is a better way then wrapping all of the headers in span tags. Thanks so much for your help. I have attached an image of what I would like to achieve.
If you use a table, the cells will auto size to the content in them. Tables are still useful when dealing purely with tabular data. Alternatively, you can assign a class to each header cell to set specific widths.
<table cellpadding="5" cellspacing="5" width="100%">
<tr>
<td>one</td>
<td>this one needs more space and will grow</td>
<td>this guy isn't as long</td>
<td>short</td>
</tr>
Example on JSFiddle: http://jsfiddle.net/JdSy2/
I've been tasked with creating a clean template for our HTML newsletter with circulates to about 70k subscribers. As expected, they're hoping for it to be as consistent across as many e-mail clients as possible, so I'm following widely suggested HTML e-mail practice and using nested tables and in-line style.
I'm trying to set a bgcolor to each <td> that displays an image - the reason being that if someone has the images on their e-mail client turned off, they'll still be able to see the shape of the table cells (and their experience will still be somewhat visual), but I'm having difficulty keeping the bgcolor within the cell, it seems to bleed into the space between cells. Here's an example:
<tr>
<td width="200" height="200" bgcolor="#CCCCCC">
<img src="image.png" height="200" width="200" alt="Image!">
</td>
</tr>
From this code, instead of the background being invisible under the image when the image is visible because they're both 200x200, I see about 10px of the grey pushing down into the bottom and right side of the image and intruding into the white space around the cells. What is going on and how can I fix this?
EDIT: Here's an image of what it's doing:
Have you set the css style of the table to border-collapse? Like so:
<table style="border-collapse: collapse;">
If that has no effect, and there is no margin on the images, have you tried setting padding to 0?
Have you set the cellpadding and cellspacing properties on the table tag?
http://www.w3schools.com/tags/att_table_cellspacing.asp
I would like to ask what is the better way of specifying HTML column width? the width attribute or the style attribute? Assuming I am using IE 6. Does IE render the width attribute better than style?
By width attribute
<table width="900">
<tr>
<td width="450">A</td>
<td colspan="2" width="450">B&C</td>
</tr>
....
</table>
OR by style attribute
<table style="width:900px;">
<tr>
<td style="width: 450px;">A</td>
<td colspan="2" style="width: 450px;">B&C</td>
</tr>
....
</table>
Firstly before I answer your question, something you should know is how tables are rendered, experiment with the table-layout fixed style for the table element:
If the browser knows the width of the first table row columns upfront (if you provide the table layout fixed style on the table) the browser can begin rendering the top of the table even before its calculated the width of any resulting rows. What this means? Tables populated by Ajax calls with a fixed layout can begin displaying results to a user before the full ajax call is finished. Best way to think of this is like a progressive jpg. In the end your pages will appear to load faster.
table
{
table-layout:fixed;
}
Now to answer your question.
Actually neither example you provided is correct. you typically do not set width on a cell that is spanned across 2 or more cells. In any table its a good idea to create at least 1 row with all the cells, this can either be in the TH or (just the way I like to do it in a blank tr.
For example...
<table>
<tr>
<td width="450"></td>
<td width="225"></td>
<td width="225"></td>
</tr>
<tr>
<td>content here</td>
<td colspan="2">content here</td>
</tr>
</table>
What ever way you decide to use style or just standard html width, the choice is yours, but in the end you should have your first row (if table layout is fixed) or any row (if table layout is not fixed) to contain the width definition for each invidivual cell. This will also help you with planning the correct looking table, hope this helps.
Test the table layout fixed, by creating a huge like 10 000 row table, and test the rendering speed vs a non fixed table layout.
The whole debate about HTML 4 vs XHTML , style vs attributes I think is really a question of maintainability. I don't think there is anything wrong setting the width using Style or plain width with HTML 4 transitional, they both do the same thing. The reason why you can do both is because HTML has evolved a bit, yes it can get messy! Good luck
Just add <div> tag inside <td> or <th> define width inside <div>. This will help you. Nothing else works.
eg.
<td><div style="width: 50px" >...............</div></td>