I create the table like this.
<table border="1">
<tr>
<td width="250px" rowspan="2"><input type="image" src="dash.jpg" name="image" style=width:50% height="100"> </td>
<td width="1100px" align="center" valign ="top"><div id="head1" style="font-size: 55px;letter-spacing:3px">Sample programming html</div></td>
<td width="300px" align="center" valign ="top"><span id="subhead1" style="font-size: 25px;letter-spacing:3px">Chap: <label id = "l1" style = "color:white;font:normal 22px chalkdust;">1</label></span><br>
<span id="subhead2" style="font-size: 30px;letter-spacing:3px"> <input type="text" id="text2" disabled="disabled" value="0" style= "color: #fff; font-size: 18pt;"/> - POINT</span>
</td>
</tr>
<tr>
<td colspan="3" align="center" style="position: relative;" valign ="top">
<div id="head2" style="font-size: 25px;letter-spacing:4px">1-COORDINATE GRID</div></td>
</tr>
<tr><td colspan="3" align="center"><hr id="line" color="#fff" size="2" width="75%"></td></tr>
</table>
I want the content "Sample programming html" in center and the "1-COORDINATE GRID" is exactly center to that of the content. I use various code but it not allign exactly to the center of the "Sample programming html". Can anybody help this to fix the problem.
your td cells are differnt width ,if you want adjust the text alignment yourself you might use
left or right padding css property.
<div id="head2" style="padding-left:250px..../>
Just remove the colspan="3" from the row and it get alligned.
<tr>
<td align="center" style="position: relative;" valign ="top">
<div id="head2" style="font-size: 25px;letter-spacing:4px">1-COORDINATE GRID</div></td>
</tr>
Related
What is the correct inline css to move text or an image center in Outlook. Any time I open it in a browser, it looks great but the bottom image and text always stay left in Outlook. Not sure what else to try. Any help is appreciated
<table cellpadding="0" cellspacing="0" border="0" width="800" align="left">
<table align="left" width="800px;">
<tr width="800px">
<td><img width="800px;" src="images/ArlingtonPic-edited.png"></td>
</tr>
</table>
<table align="left" width="800px;">
<tr width="800px">
<td width="800px" style="font-size:20px; margin-left: auto;
margin-right: auto; text-align: center; vertical-align: middle;">
<strong>Arlington Concrete Floor Boxes</strong></td>
</tr>
</table>
<table align="left" width="800px;">
<tr width="800px">
<td width="350px" style="font-size:16px; padding: -10px 10px 0 10px;">
<p>Our NEW heavy-duty<strong>FLBC4502</strong> 4.5"<strong> concrete floor
box</strong> has more! <strong> <span style="color: red">SIX conduit hubs and FOUR plugs.</span></strong>
And the NEW FLBC4502LR leveling ring makes
installation easier than ever on our FLBC4500
and FLBC4502, and others concrete boxes. <br>
It is <em>REVERSIBLE!</em></p>
</ul>
</td>
<td width="350px" style="font-size:16px; padding: 0 10px;">
<p>The screw holes on SIDE A fit all 4.5" boxes,
and accommodate our 6" round covers,
and most others on the market.
SIDE B features a second set of holes
that fit a cover with a 3-3/8" hole pattern.
These Arlington <strong>cover kits</strong> fit
our concrete boxes. <br>
<em>That is convenience!</em></p>
</td>
</tr>
</table>
<table align="left" width="800px;">
<tr width="800px">
<td width="800px" style="margin-left: auto; margin-
right: auto; text-align: center; vertical-align: middle;">
<img src="images/ArlingtonLogo.png">
</td>
</tr>
</table>
On your table cell use following attributes:
<td valign="middle" align="center">...</td>
for vertical and horizontal align.
This will add image in center in outlook.
<table width="100%">
<tr>
<td align="center">
<img src="https://4de5ad3168da.png" align="middle" width="200" height="130">
</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 a table with a cell with 2 items (input text and image). I try to align them vertically but it does not work.
I try use vertical-align:middle, margin top, padding, try set height:100%, etc...
The code is simply:
<table cellspacing="0" rules="all" border="1" id="Origen" style="width:100%;border-collapse:collapse;">
<tr>
<td class="cabeceraDG"> Origen</td><td class="cabeceraDG"> Centro</td><td class="cabeceraDG"> Usuario</td>
</tr><tr style="white-space:nowrap;">
<td class="campoOpcional">oficina</td><td class="campoOpcional" align="center" style="width:150px;">
<input name="Origen$ctl02$referenciaTextBox" type="text" value="0000" id="Origen_ctl02_referenciaTextBox" class="campoOpcional" onblur="return validate(this)" ref="0991" />
<input type="image" name="Origen$ctl02$imgBtnGuardarCentro" id="Origen_ctl02_imgBtnGuardarCentro" title="Guardar" AutoPostBack="false" src="https://s30.postimg.org/usmf6nsn5/boton_Abonar.gif" onclick="return ASPxClientEdit.ValidateGroup(); msGuardar();" style="border-width:0px;" />
</td><td class="campoOpcional">TEST</td>
</tr>
</table>
And here an example with the problem: https://jsfiddle.net/javierif/nmpmj1eh/
Add vertical-align: middle to .campoOpcional input and it works - see demo below:
.campoOpcional input {
vertical-align: middle;
}
<table cellspacing="0" rules="all" border="1" id="Origen" style="width:100%;border-collapse:collapse;">
<tr>
<td class="cabeceraDG">Origen</td>
<td class="cabeceraDG">Centro</td>
<td class="cabeceraDG">Usuario</td>
</tr>
<tr style="white-space:nowrap;">
<td class="campoOpcional">oficina</td>
<td class="campoOpcional" align="center" style="width:150px;">
<input name="Origen$ctl02$referenciaTextBox" type="text" value="0000" id="Origen_ctl02_referenciaTextBox" class="campoOpcional" onblur="return validate(this)" ref="0991" />
<input type="image" name="Origen$ctl02$imgBtnGuardarCentro" id="Origen_ctl02_imgBtnGuardarCentro" title="Guardar" AutoPostBack="false" src="https://s30.postimg.org/usmf6nsn5/boton_Abonar.gif" onclick="return ASPxClientEdit.ValidateGroup(); msGuardar();"
style="border-width:0px;" />
</td>
<td class="campoOpcional">TEST</td>
</tr>
</table>
Use this code,
input inside the campoOpcional needed vertical-align
.campoOpcional input {
vertical-align: middle;
}
I tried searching for solutions in stack, but none of the answers I found addressed my issue.
I'm developing an email and I want to have a single cell row that has text with an image in between the text. The cell height is the full height of the image, but I want the text to be vertically centered. The text is now flush on the bottom
Here's my code (there's many inline styles, I apologize in advance). Please note this a single column row that is part of the fluid hybrid approach by Nicole Merlin.
<tr>
<td valign="middle" bgcolor="#e2f4ff" style="padding:0">
<table width="100%" align="center" border="1" style="border-spacing:0;font-family:sans-serif;color:#333333;">
<tr>
<td valign="middle" style="vertical-align: middle !important;;padding:0;text-align:left;padding-bottom: 5px !important;color: #17a0ce;font-weight: bold; Margin:0;font-size:26px; text-align: center;">
THE<img src="http://www.waldenway.com/wp-content/uploads/2015/12/largedog.png" alt="ABC's" /> OF SAFE SLEEP FOR DOGS
</td>
</tr>
</table>
</td>
</tr>
Just vertically align the image.
<table>
<tr>
<td valign="middle" bgcolor="#e2f4ff" style="padding:0">
<table width="100%" align="center" border="1" style="border-spacing:0;font-family:sans-serif;color:#333333;">
<tr>
<td valign="middle" style="vertical-align: middle !important;padding:0;text-align:left;padding-bottom: 5px !important;color: #17a0ce;font-weight: bold; Margin:0;font-size:26px; text-align: center;">
THE
<img style="vertical-align: middle !important;" src="http://www.waldenway.com/wp-content/uploads/2015/12/largedog.png" alt="ABC's" />OF SAFE SLEEP FOR DOGS
</td>
</tr>
</table>
</td>
</tr>
</table>
The best solution that works for all email clients is to push them to consider putting that particular image inline with the other text. That can be done by put the text and the image in many <td> of the same single row <tr>.
This will make you able to define the exact height, width and any other attributes you want of each tag.
Check the following:
<table>
<tr>
<td valign="middle" bgcolor="#e2f4ff" style="padding:0">
<table width="100%" align="center" border="1" style="border-spacing:0;font-family:sans-serif;color:#333333;">
<tr>
<td valign="middle">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle" style="vertical-align: middle !important;padding:0;text-align:left;padding-bottom: 5px !important;color: #17a0ce;font-weight: bold; Margin:0;font-size:26px; text-align: center;">
THE
</td>
<td valign="middle" style="vertical-align: middle !important;padding:0;">
<img style="vertical-align: middle !important;" src="http://www.waldenway.com/wp-content/uploads/2015/12/largedog.png" alt="ABC's" />
</td>
<td valign="middle" style="vertical-align: middle !important;padding:0;text-align:left;padding-bottom: 5px !important;color: #17a0ce;font-weight: bold; Margin:0;font-size:26px; text-align: center;"> OF SAFE SLEEP FOR DOGS
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
I have a CSS coding challenge for everyone here...
I have searched google and looked at multiple options, but cannot figure this one out.
Is also worth mentioning that I'm not a developer, but I understand the basics of how to implement CSS.
I have a section of code that contains check boxes,
I need to make only specific checkbox items bold (not all of the items) via CSS...
Under normal circumstances, the CSS code for this would be: font-weight: bold;
in the right class or ID, however, in my case, I'm using a third party platform with predefined, css classes for each of the code sessions, in the case of the checkboxes section, the CSS class for this is called: .formFieldLabel
So the CSS code section would like so:
.formFieldLabel {
padding-bottom: 2px;
}
Below is the html code section for the checkboxes:
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<div class="" style="overflow: hidden">
<table cellspacing="0" cellpadding="1" class="">
<tbody>
<tr>
<td width="20" align="left">
<input type="checkbox" name="Field 1" id="form_0006_fld_2-0" value="First Choice">
</td>
<td width="*" align="left" style="padding-top: 3px; padding-right: 10px">
<label for="form_0006_fld_2-0" class="formFieldLabel">First Choice</label>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div class="" style="overflow: hidden">
<table cellspacing="0" cellpadding="1" class="">
<tbody>
<tr>
<td width="20" align="left">
<input type="checkbox" name="Field 1" id="form_0006_fld_2-1" value="Second Choice">
</td>
<td width="*" align="left" style="padding-top: 3px; padding-right: 10px">
<label for="form_0006_fld_2-1" class="formFieldLabel">Second Choice</label>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div class="" style="overflow: hidden">
<table cellspacing="0" cellpadding="1" class="">
<tbody>
<tr>
<td width="20" align="left">
<input type="checkbox" name="Field 1" id="form_0006_fld_2-2" value="Third Choice">
</td>
<td width="*" align="left" style="padding-top: 3px; padding-right: 10px">
<label for="form_0006_fld_2-2" class="formFieldLabel">Third Choice</label>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
Resuming, the CSS code to make such item bold will need to go inside the following CSS code section:
.formFieldLabel {
padding-bottom: 2px;
}
Can anyone please help me implement this solution?
You could use :nth-child() selector in css to select the checkbox you want.
So maybe something like this to select the second checkbox:
tr:nth-child(2) table input { }
Not sure it the above css works but, you can use :nth-child() to select the <tr> you want from the parent table then from there you can select the input box in the child table.
You can use attribute selectors like this.
<style>
.formFieldLabel[for=form_0006_fld_2-0] {
font-weight: bold;
}
</style>
But you have to know the id of checkbox to do this.
or just add a second css class
class="formFieldLabel boldLabel"