I'm designing a newsletter template and I'm having an issue with a table that contains graphics and text in the same row. For some reason, the graphic pushes the text all the way to the right. I'd like the text to be "connected"/left aligned with the icon as the template uses up to 3 icon sets (icon + text).
https://jsfiddle.net/o1dLoxa8/
The code doesn't look pretty right now as I've been trying everything just to make it work. Anyone able to help me out?
<table border="0" cellpadding="0" cellspacing="0" class="salesListText">
<tr>
<td align="left" valign="middle" class="saleslistIcon">
<img src="http://dyreparken-nyhetsbrev.s3.amazonaws.com/ikon/billetterL.png" alt="" height="28" width="28" />
</td>
<td align="left" valign="middle" class="saleslistIconText">
Billetter
</td>
</tr>
<tr>
<td valign="baseline" colspan="3">
<h2>Kaptein Sabeltann - Kun forestillingen</h2>
(Kan kombineres med parkbilletter og/eller overnatting)
</td>
</tr>
<tr>
<td valign="baseline">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="salesListSpec">
<tr>
<td valign="baseline" colspan="3">
<h4>Pakken inneholder:</h4>
- Billetter til forestillingen
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="top" class="saleslistPrice" colspan="3">
<h2 style="color:#E3178A;"><span>Pris fra </span>240,-</h2>
</td>
</tr>
</table>
.saleslistIcon{padding-right:10px;}
.saleslistIconText{color:#B4B4B4; font-size:12px; padding-right:8px;}
.salesListText{width:100%;}
.salesListSpec{padding-top:10px; line-height:170%; display:block;}
h2 span{font-size:16px; font-weight:normal; color:#444444;}
You've got a table that has three columns; but you're jamming the image (small) and body text (large) in the same column (0). That will push columns 2, and 3 way to the right.
Try putting border="1" onto your table definition to see what I mean.
I'd suggest you use the outer table to create your rows and have only a single TD. Inside each TD then embed secondary tables for complicated layout. I'm assuming an email newsletter, so keep your CSS to a minimum or put it inline rather than a separate style section. A lot of email providers don't play nicely with CSS.
Hope that helps.
From the look of your fiddle, this is to be expected. You're using a table layout, meaning that all cells in the same column will have the same width and all cells in the same row will have the same height. My immediate recommendation is to ditch the table layout and use semantic elements.
If you're hellbent on using a table layout, you need to be aware of your colspan and rowspan attributes on your cells and how they affect your layout.
Put display:inline inside <tr> where you have the icon + text.
http://jsfiddle.net/zg0zrx3v/
Related
i just started learning in HTML.
I'm having a problem in cell padding and spacing...
the one that i created have a cell padding and spacing on all row... is it possible to have a cell spacing and padding in the 1st row but not in the 2nd row?
`
</td>
<tr>
<td width="250" height="500">
</td>
<td width="750">
</td>
</tr>
<tr>
<td colspan="2" height="75">
</td>
</tr>
`
You can simply add padding to each TD not TR
But spacing between cells only for the whole TABLE
The Attribute padding is the response about cell padding
<table border="1" style="border-spacing:2px;">
<tr>
<td width="250" height="500" style="padding:5px;">One</td>
<td width="750" style="padding:5px;">Two</td>
</tr>
<tr>
<td colspan="2" height="75">Three</td>
</tr>
</table>
I would suggest to wrap the content you want to edit in a and add css properties like for example:
Take a look at this div and style combination, it gets kinda useful sometimes. You can make the particular elements special even when they are in a table with constant style.
You can even add this style attribute to the / tags themselves. Maybe what you're looking for.
I have a horizontal space between 2 wrapper tables (only in certain clients such as outlook, 2003, 2007, gmail and a few others - works fine in most clients) - link to images:
http://jimharrison.co.uk/wp-content/uploads/2013/11/Untitled-1.jpg
I've tried:
border: collapse; -
display: block; (on images) -
valign="top" -
removing white space between tags -
resetting table margins, padding and borders (this left aligned my content so a big no no)
It's entirely possible the fix is really obvious... - check out the code and email here:
http://jimharrison.co.uk/wp-content/uploads/2013/11/index.html
Put your content into table rows, not stacked tables. You can nest within those table rows, just try to avoid multiple tables in the same parent element (sitting next to each other in the code).
Also, set the desired bgcolor on the table row's td's containing those (now nested) tables.
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#2f1d36">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
this is your purple table
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#d76118">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
this is your orange table
</td>
</tr>
</table>
</td>
</tr>
</table>
It is always good practice to have the parent element color set, as expanding like this is unavoidable when someone forwards an email from Outlook. Setting the color there will not prevent the gaps appearing, but will hide the white (or whatever color) stripes/gaps created.
I'm facing problem with table in html,
actually I fixed the width,and want to increase the td height as per the content in it,
for example : if td width is 30px and when data inside td crosses the td width i want to show remaining data in next line and so on..
table:
<table width="100%" border="1" >
<tr>
<td align="left" width="30px">
laaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa text
</td>
<td align="left" width="30px">
text
</td>
</tr>
</table>
Here is the solution to your problem! The width of the columns are equal in this case, though they can be changed, not to mention.
<table border="1" width="100%" style="table-layout:fixed">
<tr>
<td style="word-wrap:break-word">Hellohellohellohellohellohellohellohellohellohellohello
<td>text</td>
</tr>
</table>
And here is the demo http://jsbin.com/ihaxob/2/edit ..
I have seen the solution from this thread!
Word-wrap in an HTML table
I'm designing an HTML Newsletter and I've run into this problem:
As you can see, the cellspacing is completely out of whack: there shouldn't (and CAN'T) be a space between the rows on the left and right column. I don't really know what the culprit could be, any ideas would be appreciated!
Here's the relevant source code:
<table width="740" cellpadding="0" cellspacing="0" border="1">
<tr>
<td colspan="3">
<img src="top.jpg" width="740" height="53">
</td>
</tr>
<tr>
<td colspan="3" height="200" valign="top" id="headerCell">
<img src="header.jpg" width="740" height="200" alt="Headerbild">
</td>
</tr>
<tr>
<td>
L
</td>
<td valign="top" width="600" bgcolor="#ffffff">
CONTENT
</td>
<td>
R
</td>
</tr>
The HTML looks fine to me. Have you tried eliminating the unnecessary whitespace? That could be a possible cause (also, remember the great IE6, which had whitespace issues).
The HTML rendering engines in e-mail clients are just horrible. I've had to design some newsletters a while back and it sucked big time. Here's a nice collection of tips, maybe it'll be of some help.
I finally found out what was causing this spacing: a padding-top set on the center cell caused the left and right cells top edge to stay flush with the content-top of the center cell.
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...