I have the following code
<table style="height: 275px; width: 188px">
<tr>
<td style="width: 259px;">
main page
</td>
</tr>
</table>
The main page appears in the center of the cell I want it to appear at the top.
https://developer.mozilla.org/en/CSS/vertical-align
<table style="height: 275px; width: 188px">
<tr>
<td style="width: 259px; vertical-align:top">
main page
</td>
</tr>
</table>
?
Add a vertical-align property to the TD, like this:
<td style="width: 259px; vertical-align: top;">
main page
</td>
Use <td valign="top" style="width: 259px"> instead...
I was facing such a problem, look at the picture below
and here is its HTML
<tr class="li1">
<td valign="top">1.</td>
<td colspan="5" valign="top">
<p>How to build e-book learning environment</p>
</td>
</tr>
so I fix it by changing valign Attribute in both td tags to baseline
and it worked
here is the result
hope this help you
you can use valign="top" on the td tag it is working perfectly for me.
Related
I am currently creating a HTML email template. I have a table with 3 columns for the following:
[[logo] [text content ] [date]]
So the logo should be left aligned, and the date right aligned. However in outlook it doesn't look like the float is being accepted. this is how it currently looks.
Here is my current code:
<table cellspacing="0" cellpadding="0" border="0" style="display:flex; flex-wrap: wrap; margin-bottom:10px; width:100%;">
<tbody>
<tr>
<td width="6%"> <img style="float:left; margin-right:10px;" height="24px" width="30px" src="{{imageUrl}}">
</td>
<td width="63%;">
{{this.notificationMessage}}
</td>
<td width="30%" style="text-align:right; margin-left:6px;">{{this.date}}
</td>
</tr>
</tbody>
</table>
I have been stuck with this issue for sometime, any help is much appreiacted
HTML should be coded as if it's the year 1999.
Tables should be used for layout and the use of modern HTML and CSS is best avoided where possible.
In your case above you should just use the align attribute on the table cell e.g.
<td align=left"></td>
<td align=right"></td>
If that doesn't work then try using CSS e.g.
<td style="text-align: left;"></td>
Here's a good guide to creating HTML email template from Mailchimp:
https://templates.mailchimp.com/getting-started/html-email-basics/
you can use Float: right and i think you should omit anything about flex ( i mean: display:flex; flex-wrap: wrap;).
<html>
<body>
<table cellspacing="0" cellpadding="0" border="0" style=" margin-bottom:10px; width:100%;">
<tbody>
<tr>
<td width="6%"> <img style="float:left; margin-right:10px;" height="24px" width="30px" src="img..">
</td>
<td width="63%;">
aa
</td>
<td width="30%" style="text-align:right;float:right; margin-left:6px;">bb
</td>
</tr>
</tbody>
</table>
</body>
</html>
You can give "text-align: left" for of also instead of "float: left" on
You have to style="text-align:left; " for td.
Use below corrected code.
<table cellspacing="0" cellpadding="0" border="0" style="display:flex; flex-wrap: wrap; margin-bottom:10px; width:100%;">
<tbody>
<tr>
<td width="6%" style="text-align:left;" > <img style="float:left; margin-right:10px;" height="24px" width="30px" src="{{imageUrl}}">
</td>
<td width="63%;" style="text-align:left;" >
Notification message
</td>
<td width="30%" style="text-align:right; margin-left:6px;">date
</td>
</tr>
</tbody>
</table>
I need a table-structure in HTML, which i could insert in a HTML-widget for WordPress. i have no chance to use a separate CSS-file for definitions. Border=0 doesn't work. i always get grey line in the cells.
I try to set border color to white, because the template has a white background. But the global CSS-definitions overwrite that i think.
<table style="text-align: left; width: 100%;" border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;"><br>
</td>
<td style="vertical-align: top;"><br>
</td>
</tr>
</tbody>
</table>
You have to put border:0 into the "style" attribute so that it becomes more important than external CSS, like this:
<html>
<head>
<link rel="stylesheet" href="test1.css">
<table style="text-align: left; width: 100%;border:0" cellpadding="2"
cellspacing="2">
</head>
<tbody>
<tr>
<td style="vertical-align: top;"><br>
</td>
<td style="vertical-align: top;"><br>
</td>
</tr>
</tbody>
</html>
My code:
<table style="text-align: center; width: 100%;" border="2" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: middle; width: 33%;" bgcolor="#27ae60"><h2>O mnie</h2>
</td>
<td style="vertical-align: middle; width: 33%;" bgcolor="#27ae60"><h2>Inne Produkty</h2>
</td>
<td style="vertical-align: middle; width: 33%;" bgcolor="#27ae60"><h2>Komentarze</h2>
</td>
</tr>
</tbody>
</table>
Edit: Original question has been interpreted as:
I want the text (link) of the first column to be in the middle, just as next two are but with having <a href"#"...></a> within <h2>. Because the place where I want to put it doesn't support doing it in the opposite way. Meaning, h2 cannot be placed within <a> tags.
OP wants the first link to be vertically aligned when having the h2 tag within the a tag
(original text below)
I want the text(link) of first column to be in the middle, just as two next are but with havinh within cause place where I want to put it doesn't support doing it opposite way.
I think now I understand what you want (thanks to Wes Foster):
Make your h2 element an inline-block by adding the following style attribute to it: <h2 style="inline-block;">
<table style="text-align: center; width: 100%;" border="2" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: middle; width: 33%;" bgcolor="#27ae60"><h2 style="inline-block;">O mnie</h2>
</td>
<td style="vertical-align: middle; width: 33%;" bgcolor="#27ae60"><h2>Inne Produkty</h2>
</td>
<td style="vertical-align: middle; width: 33%;" bgcolor="#27ae60"><h2>Komentarze</h2>
</td>
</tr>
</tbody>
</table>
I want to write the simpliest example of the following image
My example should work in ie6,7,8,9 and so on. So I can't use float or anything helpfull. I made jsFiddle using table
<table width="500px">
<tr>
<td width="45px"><span>e-mail</span>
</td>
<td align="center"> <div style="border-bottom: 1px solid;">test#gmail.com</div></td>
</tr>
<tr>
<td width="45px"></td>
<td align="center"> <span>(email)</span>
</td>
</tr>
</table>
, but the bottom (email) have margin from the line.
And I want that everything was like on my first image. Thanks
I have tried this.
Check this jsFiddle link
<table width="500px" style="padding:0px; border-spacing:1px">
<tr>
<td width="45px" style="padding:0px"><span>e-mail</span>
</td>
<td align="center" style="padding:0px"> test#gmail.com <hr noshade style="border-top:1px; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-top: 0; -webkit-margin-bottom: 0;"/> </td>
</tr>
<tr>
<td width="45px" style="padding:0px"></td>
<td align = "center" style = "margin-top:0px; padding:0px">(email)</td>
</tr>
The “margin” you are referring to is partly spacing between cells, partly padding inside the cell, partly leading, and partly spacing in the font. In your approach, the simplest fix is probably to set cell spacing to zero and to move the cell content upwards a bit, using relative positioning.
<table width="500" cellspacing="0">
<tr>
<td width="45">e-mail
</td>
<td align="center" style="border-bottom: 1px solid">test#gmail.com</td>
</tr>
<tr>
<td width="45"></td>
<td align="center"><span style="position: relative; top: -0.15em">(email)</span>
</td>
</tr>
</table>
apply border-spacing: 0 to the table's style (border-collapse: collapsewould work too, aswell as cellspacing attribute)
add padding: 0 to the tdcontaining <span>(email)</span>
To increase the space between the upper e-mail-adress and the bottom border (which you did not mention explicitly but is not the same as your example image):
move the border-bottom style from div to its parent td
add a padding-bottom to the same td
I need curved bordered CSS for IE8 and all major browsers. currently I am trying with CSS PIE
jsfiddle demo is here. But I would suggest the answerers to download the PIE.htc file form here and try the HTML as a standalone page to get the real effect in IE8.
My problem is the <td> containing the "Thank you for registering" text is not curving in IE8 in jsfiddle. If I run it as a HTML page, it is curving in IE8 but the blue background is overlapping the "Thank you for registering" <td> (but its background is "#f2f2f2").
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin:0px; padding:0px;">
<tr>
<td> </td>
<td style="width: 60%; text-align: center;background: #0067C8;">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td colspan="3" style="height: 50px; background-color: #262626; width:100%; text-align: left;">
<img src="twitter_logo.png" width="200" height="50" alt"Twitter" />
</td>
</tr>
<tr>
<td colspan="3" style="height: 25px;"> </td>
</tr>
<tr>
<td style="width:3%;"> </td>
<td style="width: 94%; background-color: #f2f2f2; height: 400px; font-family: arial; font-size: 30px; color: #2DB8ED; text-align: center; border: 2px solid #bcbcbc;text-align: center;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; behavior: url(PIE.htc);">
Thank you for registering
</td>
<td style="width:3%;"> </td>
</tr>
<tr>
<td colspan="3" style="height: 25px;"> </td>
</tr>
</table>
</td>
<td> </td>
</tr>
</table>
I think its mainly because of Problems with z-index.
Check here for more details. general issues encountered when using PIE
Have you tried, http://jquery.malsup.com/corner/ jquery plugin to add curves?
$(function () {
$('table table tr:eq(2) td:eq(1)').corner();
});
Demo : http://jsfiddle.net/bDvRd/4/
Try add
position:relative;
z-index: 0;
by Using CSS3Pie htc for border-radius in IE8
OR CSS3 PIE - Giving IE border-radius support not working?