Why is content in the table appears to start from the center.How to make it to start from where the row starts
<table style="table-layout:fixed;width:100%;" border="1" cellpadding="0" cellspacing="0" class="main_table" id="main_table">
<tr>
<td width="20%" height="70px" align="center" id="plugins" class="step step1 clickable" step="1" onclick="javascript:getresource('1','0');">
<font color="blue">Plugins</font>
</td>
<td rowspan="5" width="80%" height="100%" align="center" ><br>
<div id="status" class="msg" style="display:none"><br></div>
<div id="header_msg" height="100%" align="center"></div>
<div id="contents" height="100%"></div>
</td>
</tr>
</table>
Remove 'align="center"' from both td's and the 2nd div, and if you want the data to start at the top of the cell, add 'valign="top"' to the tr ie:
<table style="table-layout:fixed;width:100%;" border="1" cellpadding="0" cellspacing="0" class="main_table" id="main_table">
<tr valign="top">
<td width="20%" height="70px" id="plugins" class="step step1 clickable" step="1" onclick="javascript:getresource('1','0');">
<font color="blue">Plugins</font>
</td>
<td rowspan="5" width="80%" height="100%"><br>
<div id="status" class="msg" style="display:none"><br></div>
<div id="header_msg" height="100%"></div>
<div id="contents" height="100%"></div>
</td>
</tr>
</table>
Apart from the bloated use of inline CSS, HTML tables for layouts and the not-so-popular -tag, I'd guess it's the..
align="center"
..that centers your content. Try replacing it with "left" instead. Do consider doing it the CSS way though:
text-align: left;
Use vertical-align:top
Related
I am making a HTML email that a clients suddenly want to be shown as a one-pager without scrollbars. I have edited the wrapper to 'height:100vh', but it still has scrollbars.
I want to know, how would i go about and make this page appear as a one pager without scrollbars in all different screen heights?
<body>
<table width="100%">
<tbody>
<tr>
<td class="wrapper" width="600" align="center">
<!-- Header image -->
<table class="section header" cellpadding="0" cellspacing="0" width="600">
<tr>
<td class="column center">
<table>
<tbody>
<tr>
<td align="left">
<img src="./media/header2.png" alt="picsum" width="600" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table class="section main" cellpadding="0" cellspacing="0" width="600">
<tr>
<td class="column">
<table style="margin: 0 auto;">
<tbody>
<tr>
<td align="left">
<img src="./media/main-image1.png" alt="picsum" width="600"/>
<br>
<div class="firstparagraph">
<p class="comfortaaquote font40"> You will be OK... </p><br>
<span class="marck"> Sweetheart</span>
</div>
<br>
<br>
<p class="comfortaatext center2">A lady is reassuring her dog everything will be OK in the veterinary hospital in Hanoi, Vietnam while the vet nurse are busy working in the background</p>
<br>
<div class="buttons">
<div class="days-counter">
<img class="steps" src="./media/counter.png" alt="picsum" width="300" />
<div class="text-block"><p>14</p></div>
</div>
<img class="submit" src="./media/submit.png" alt="picsum" width="300" />
<br>
<br>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<!-- bottom part-->
<!-- footer part-->
<table class="section bottom" cellpadding="0" cellspacing="0" width="600">
<tr>
<td class="column">
<table>
<tbody>
<tr>
<td align="left">
<img src="./media/bottom.png" alt="picsum" width="600" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</body>
should i be targeting the height:100vh to the body or the wrapper?
thank you
Currently working on coding for Email:
I am trying to get this button (created out of tables) to align to the bottom of the enclosing table. At the moment it will not align and I'm not sure why.
<table width="300" min-width="300" height="500" class="promo_3" align="left">
<tr>
<td valign="top">
<a target="_blank" href="http://www.thing.html">
<img class="promo" alt="Promo image 2" src="http://media.campaigner.com/image1.jpg">
</a>
<br>
<br>
<h1> TRAINING </h1>
<span valign="top" class="content">TITLE HERE</span>
<p>TEXT HERE</p>
<br>
<!--Button THIS WILL NOT ALIGN TO THE BOTTOM -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="padding-bottom:20px;">
<tr>
<td height="20">
<table border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td bgcolor="#f55926" valign="bottom" style="padding: 8px 30px 8px 30px; -webkit-border-radius:3px; border-radius:3px" align="center">Read More
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--Button + Social End -->
</td>
</tr>
</table>
Maybe give this method a try:
<table width="300" min-width="300" height="500" class="promo_3" align="left">
<tr>
<td valign="bottom"><br>
<br>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="200" valign="top"><a target="_blank" href="http://www.thing.html"><img class="promo" alt="Promo image 2" src="http://media.campaigner.com/image1.jpg"></a></td>
</tr>
<tr>
<td height="200" valign="top">
<h1> TRAINING </h1>
<span valign="top" class="content">TITLE HERE</span>
<p>TEXT HERE</p>
</td>
</tr>
</tbody>
</table>
<br>
<!--Button THIS WILL NOT ALIGN TO THE BOTTOM -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="padding-bottom:20px;">
<tr>
<td height="20">
<table border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td bgcolor="#f55926" valign="bottom" style="padding: 8px 30px 8px 30px; -webkit-border-radius:3px; border-radius:3px" align="center">Read More
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--Button + Social End -->
</td>
</tr>
</table>
What I have done is added one table with two rows, both the rows have specific height with content aligned top. Some email clients are notorious and might not align the code to the bottom as it is on the code, for those email clients you can use padding-top on the TD's. Hope this helps.
Cheers
This is what you are looking for? Just add align='left' to table containing button.
<table width="300" min-width="300" height="500" class="promo_3" align="left">
<tr>
<td>
<a target="_blank" href="http://www.thing.html">
<img class="promo" alt="Promo image 2" src="http://media.campaigner.com/image1.jpg">
</a>
<br>
<br>
<h1> TRAINING </h1>
<span valign="top" class="content">TITLE HERE</span>
<p>TEXT HERE</p>
<br>
<!--Button THIS WILL NOT ALIGN TO THE BOTTOM -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="padding-bottom:20px;">
<tr>
<td height="20">
<table border="0" align='left' cellspacing="0" cellpadding="0" align="center">
<tr>
<td bgcolor="#f55926" valign="bottom" style="padding: 8px 30px 8px 30px;-webkit-border-radius:3px; border-radius:3px" align="center">Read More
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--Button + Social End -->
</td>
</tr>
</table>
I need to move personal account to center and gave align as centre but still not working. I don't have any clue where am lagging.
<table cellspacing="1" cellpadding="0" width="750" align="center" bgColor="#000000" border="0">
<tr>
<td>
<table cellspacing="0" cellpadding="0" width="750" align="center" bgcolor="#ffffff">
<tr>
<td width="34%" bgcolor="#ff0000" colspan="5">
<div class="mainheader">Personal & Account
</div>
</td>
<td width="33%" bgcolor="#ff0000">
<div align="right">
<button class="button" id="btnLogin" accessKey="P" type="button" runat="server">Login </button>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
Indeed as mentioned in the comment by j08691, try avoiding tables for layout.
For a solution to your issue, I'll keep your tabular layout as I want to keep up with your question's code, but here's a solution which starts with removing the second inner td - as you dont need it for floating the button to the right side.
I've changed your two columns to one column and inside of this column inserted a div with the desired layout - a text in the middle and a button in the right side.
The button is floated right by "float: right;" and the text is aligned to the center of the div by "text-align: center". Try using the same approach for future layout design.
Here is a working example with the below code:
<table cellspacing="1" cellpadding="0" width="750" align="center" bgColor="#000000" border="0">
<tr>
<td>
<table cellspacing="0" cellpadding="0" width="750" align="center" bgcolor="#ffffff">
<tr>
<td width="34%" bgcolor="#ff0000" colspan="5">
<div class="mainheader" style="text-align: center">Personal & Account
<button class="button" id="btnLogin" accesskey="P" type="button" runat="server" style="float: right;">Login </button>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<tr>
<td bgcolor="#1f4e79" colspan="5">
<div class="mainheader" style="margin-left:325px;" >Restraint & Seclusion
</div>
</td>
<td width="33%" bgcolor="#1f4e79">
<div align="right">
<button class="button" id="btnLogin" accessKey="P" type="button" runat="server">Login </button>
</div>
</td>
</tr>
I have this definition:
<g:HTMLPanel ui:field="container" styleName="{style.itemcontainer}">
<table style="width:100%" cellpadding="0" cellspacing="0" border="0" >
<tr>
<td width="25px" valign="bottom">
<b:Span ui:field="iconSpan" addStyleNames="{style.icon}"></b:Span>
</td>
<td width="60px">
<span ui:field="valueLabel" class="{style.valueLabel}">0%</span>
</td>
<td width="24px" class="{style.selectedIcon}">
<b:Icon ui:field="selectedIcon" type="BAR_CHART_O" visible="false"></b:Icon>
</td>
</tr>
</table>
</g:HTMLPanel>
I would like to convet the html table in 3 div´s.
Could you help me?
Check out float and box model. You could make this simpler with css.
<div style="float:left">
<b:Span ui:field="iconSpan" addStyleNames="{style.icon}"></b:Span>
</div>
<div style="float:left">
<span ui:field="valueLabel" class="{style.valueLabel}">0%</span>
</div>
<div style="float:left">
<b:Icon ui:field="selectedIcon" type="BAR_CHART_O" visible="false"></b:Icon>
</div>
<br style="clear:left" />
Not sure why the valign="middle" not working here. Can someone please help me out with what is missing here.
HTML
<table id="my_table" style="width:100%;height:450px" cellpadding="0" cellspacing="0">
<tr>
<td width="5%" valign="middle">
<div id="left_arrow" align="center">
<img src='./button/3.png' id='leftArrow' /
</div>
</td>
<td width="60%" valign="middle" >
<div id="left_table" >
<div id="holder" >
<img src=".images/3.jpg" id="slideshow" />
</div>
</div>
</td>
<td width="5%" valign="middle">
<div id="right_arrow" align="center">
<img src='./button/2.png' id='rightArrow' />
</div>
</td>
</tr>
</table>
You want to take the inline styles out if possible, but here's the full solution.
<table id="my_table" style="width:100%;height:450px" cellpadding="0" cellspacing="0">
<tr>
<td width="5%" style="vertical-align:middle">
<div id="left_arrow" align="center">
<img src='./button/3.png' id='leftArrow' />
</div>
</td>
<td width="60%" style="vertical-align:middle">
<div id="left_table" >
<div id="holder" >
<img src=".images/3.jpg" id="slideshow" />
</div>
</div>
</td>
<td width="5%" style="vertical-align:middle">
<div id="right_arrow" align="center">
<img src='./button/2.png' id='rightArrow' />
</div>
</td>
</tr>
</table>
Click here for live demo
The valign attribute of is not supported in HTML5. Use CSS instead.
CSS syntax: <tr style="vertical-align:middle">