Got this simple piece of html code and I want to make the TEST (third <td> component) align to the bottom of the row but it stays up no matter what I try.
I know there are thousands of questions of this sort and I read 3-4 articles but non of the stuff I tried works.
<table border="0">
<tr>
<td width="144" height="125"><img src="images/logo.png" alt="CommuniTake" width="143"
height="123"></td>
<td width="775">
<h1><h:outputText value="#{msg.General_Configuration_Title}" /></h1>
</td>
<td style="float:right;vertical-align:text-bottom">
TEST
</td>
</tr>
</table>
Thanks!
<td valign="bottom">
should work
Just remove the float and make it vertical-align: bottom and it'll fall to the abyss!
How about:
<table border="0">
<tr>
<td width="144" height="125"><img src="images/logo.png" alt="CommuniTake" width="143"
height="123"></td>
<td width="775">
<h1><h:outputText value="#{msg.General_Configuration_Title}" /></h1>
</td>
<td valign="bottom">
TEST
</td>
</tr>
</table>
From W3Schools:
text-bottom The bottom of the element is aligned with the bottom of the parent element's font
Might be that this td does not have a parent element, which has font to align to. Using simple 'bottom', as suggested by others, would align to lowest element on the same line.
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'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/
I want a background for a td. Here is my code:
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr colspan="2">
<td>
<img src="Images/1.png" width="567" height="108" />
</td>
</tr>
<tr colspan="2" >
<td style="background-image:url(Images/2.png); background-repeat:no-repeat;">
</td>
</tr>
</table>
The problem is that no images are displayed in the second row.
If I use:
<img src="Images/2.png" width="567" height="108" />
then the image 2.png does display.
Why isn't my first image appearing?
The cell has no content, so it has no height, and there are no other cells in the row to give it a height, so there is no space to display a background image in.
Try putting some content inside the the td. Ex:
<td style="background-image:url(Images/2.png); background-repeat:no-repeat;">
<p>Hi, I am some content.</p>
</td>
If that resolves, then you'll know that the problem is that no background appears when an element has no dimensions.
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.
When I put an image inline in a table cell, like this:
<table border="1" cellspacing="5" cellpadding="5">
<tr>
<td>
<img width="20" height="20">Text
</td>
<td>
Text
</td>
</tr>
</table>
…it shifts the vertical alignment of the text in that cell, like this:
I've played around with vertical-align, but haven't been able to align the in the two cells. What's the right way to do that?
I've been continuing to play around with this problem, here's a workaround I came up with:
<table border="1" cellspacing="5" cellpadding="5">
<tr>
<td style="line-height: 20px;">
<img width="20" height="20" style="vertical-align: top;">Text
</td>
<td>
Text
</td>
</tr>
</table>
It renders like this:
I don't love that the the height of the image needs to be in CSS, so I'm still open to other ideas.
Ok how about... this!
<table border="1" cellspacing="5" cellpadding="5">
<tr>
<td>
<img style="float: left;" width="20" height="20">Text
</td>
<td>
Text
</td>
</tr>
</table>