It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
I have a table and form on my page that I would like to be centered. I was able to center it in IE by having blank table columns on the right and left side with widths of 50%, but this didn't produce the same results in Chrome or Firefox. I need the table to be centered. What I've got so far is:
table {
width:580px;
margin-left: auto;
margin-right: auto;
}
form {
width:580px;
margin:0 auto;
}
Right now the table appears as left aligned, but I need it to be centered.
Additional info:
label {
padding-right:10px;
text-align:left;
{
table {
width: 580px;
margin-left: auto;
margin-right: auto;
}
.centerspacer {
width:50%;
}
td {
padding:5px;
}
.center {
text-align:center;
}
form {
width: 580px;
margin: 0 auto;
}
</style>
</head>
<body>
<form action="https://test.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
<table>
<tr>
<td class="centerspacer"></td>
<td><label for="first_name">First Name</label></td>
<td><input id="first_name" maxlength="40" name="first_name" size="20" type="text" /> </td>
<td class="centerspacer"></td>
</tr>
<tr>
<td class="centerspacer"> </td>
<td><label for="last_name">Last Name</label></td>
<td><input id="last_name" maxlength="80" name="last_name" size="20" type="text" /></td>
<td class="centerspacer"> </td>
</tr>
<tr>
<td class="centerspacer"> </td>
<td><label for="email">Email</label></td>
<td><input id="email" maxlength="80" name="email" size="20" type="text" /></td>
<td class="centerspacer"> </td>
</tr>
<tr>
<td class="centerspacer"></td>
<td><label for="phone">Phone</label></td>
<td><input id="phone" maxlength="15" name="phone" size="20" type="text" /></td>
<td class="centerspacer"></td>
</tr>
<tr>
<td class="centerspacer"></td>
<td><label for="company">Company</label></td>
<td><input id="company" maxlength="40" name="company" size="20" type="text" /></td>
<td class="centerspacer"></td>
</tr>
<tr><td class="centerspacer"></td>
<td>
<label for="city">City</label></td>
<td><input id="city" maxlength="40" name="city" size="20" type="text" /></td>
<td class="centerspacer"></td>
</tr>
<tr>
<td class="centerspacer"></td>
<td><label for="state">State/Province</label></td><td><input id="state" maxlength="20" name="state" size="20" type="text" /></td>
<td class="centerspacer"> </td>
</tr>
</form>
your css is the problem:
label {
padding-right:10px;
text-align:left;
{ <----------------- wrong direction ;-)
You could try wrapping the table in a centered div like this
HTML
<div>
<table>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
</table>
</div>
<form>
<label><input type="text"/>Label</label>
</form>
CSS
div {
width: 580px;
margin: 0 auto;
}
table {
background: red;
width:580px;
margin-left: auto;
margin-right: auto;
}
form {
background: blue;
width:580px;
margin:0 auto;
}
see fiddle here - http://jsfiddle.net/DsbMT/1/
EDITED:
Try this
table.inner {
float:right;width:50px
}
Source
http://www.sitepoint.com/forums/showthread.php?588052-center-align-in-google-chrome-and-fireFox
Related
I want to figure out this as why the size of my table changes unexpectedly when colspan is applied to one of the cells as indicated by the content of the textbox below:
td {
border: 1px solid navy;
}
table {
margin-left: auto;
margin-right: auto;
font-family: arial;
color: #fff5cc;
margin-top: 100px;
background-color: red;
}
<form method="post" action="" onsubmit="return ValidateForm()">
<table border="1" id="tbl">
<tr>
<td colspan="2">Registration No:</td>
<td colspan="2"><input type="text" name="mid" id="mid" class="txtBx" value="" readonly/></td>
</tr>
<tr>
<td>Payable Month(s):</td>
<td><input type="text" id="" class="txtBx" /></td>
<td>Days(s):</td>
<td><input type="text" id="" class="txtBx" /></td>
</tr>
<tr>
<td colspan="2">Arrears(Rs):</td>
<td><input type="text" id="arrear" class="txtBx" /></td>
</tr>
<tr>
<td><input type="submit" name="sbmit" id="sbmit" value="Confirm" /></td>
</tr>
</table>
</form>
But, when I apply colspan, it becomes like:
Change made to the code:
<tr>
<td colspan="2">Arrears(Rs):</td>
<td colspan="2"><input type="text" id="arrear" class="txtBx" /></td>
</tr>
Why does the cell containing Days(s) shrink and the width of the table decreases?
I'm trying to accomplish the following:
However when I set the width of the td it never seems to change and I can only get it lo align to the length of the longest field like it is below:
What can I do to achieve the same results as with the image above?
Here is my code:
<table>
<tr>
<td class="no-wrap">Via (Jr, Av, Calle, Pje, Etc.):</td>
<td class="send-right"><input type="text" size="5"></td>
<td>Nombre Via:</td>
<td><input type="text" size="25"></td>
<td>Nro: <input type="text" size="5"></td>
<td>Interior: <input type="text" size="7"></td>
</tr>
<tr>
<td>Tipo Zona</td>
<td class="send-right"><input type="text" size="10"></td>
<td>Nombre Zona:</td>
<td><input type="text" size="20"></td>
<td>Referencia:</td>
<td><input type="text" size="18"></td>
</tr>
<tr>
<td>Departamento</td>
<td class="send-right"><input type="text" size="15"></td>
<td>Provincia:</td>
<td><input type="text" size="20"></td>
<td>Distrito:</td>
<td><input type="text" size="18"></td>
</tr>
</table>
.send-right {
text-align: right;
vertical-align: middle;
}
.no-wrap {
white-space: nowrap;
}
You were almost there! You wrote text-align: right; when it should've been text-align: end;
I'm trying to align a text input to the right of a table td but with no results. Here's what i have:
.right {
text-align: right;
}
<table width="100%">
<tr>
<td width="50%"><input type="text" name="nome" id="nome" placeholder="Nome" /></td>
<td class="right"><input type="text" name="email" id="email" placeholder="Email" /></td>
</tr>
<tr>
<td colspan="2"><input type="text" name="msg" id="msg" placeholder="Mensagem" /></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" id="sendform" value="Enviar">
</td>
</tr>
</table>
The second <input> is right aligned inside the <td>.
But the <input> also happens to be just as wide as the <td>.
Run this to see what happens after forcing the <td> a bit wider, and the <input> a bit narrower. (I also added borders to make the effect more visible)
td {
border: 1px solid black;
width: 100px;
}
input[type="text"] {
width: 60px;
}
.right {
text-align: right;
}
<table>
<tr>
<td width="50%"><input type="text" name="nome" id="nome" placeholder="Nome" /></td>
<td class="right"><input type="text" name="email" id="email" placeholder="Email" /></td>
</tr>
<tr>
<td colspan="2"><input type="text" name="msg" id="msg" placeholder="Mensagem" /></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" id="sendform" value="Enviar">
</td>
</tr>
</table>
I am currently working on a website for my business, from scratch using html5, css and javascript.
I have several table's I want to be styled individually e.g diff colours sizes etc.
I have tried to give them each their own class and I have done the table.table1 for my css - for all 3 but only one of the css is working, for all 3 tables it seems... where am I going wrong?
<form name="htmlform" method="post" target="taxshop#hotmail" action="html_form_send.php">
<table class="contact" width="450px">
<tr>
<td valign="top">
<label for="first_name">First Name *</label>
</td>
<td valign="top">
<input type="text" name="first_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="last_name">Last Name *</label>
</td>
<td valign="top">
<input type="text" name="last_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="telephone">Telephone Number</label>
</td>
<td valign="top">
<input type="text" name="telephone" maxlength="30" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="comments">Comments *</label>
</td>
<td valign="top">
<textarea name="comments" maxlength="1000" cols="25" rows="6">
</textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input type="submit" value="Submit">
</td>
</tr>
</table>
</form>
The CSS I have for this table is as follows:
table.contact tr, td {
border: 1px solid #ffffff;
border-collapse: collapse;
color:#000000;
background-color: #ffffff;
font-size: 1em;
margin: 0;
margin-bottom: 22px;
padding: 4px;
font-style: normal;
text-align: left;
border-bottom-style: solid;
border-bottom-width: 0.25em;
border-bottom-color: #ffffff;
border-radius: 0px;
}
table.contact, td {
padding: 5px;
text-align: left;
}
table.contact label{
display:inline-block;
width:100px;
margin-right:10px;
text-align:right;
}
You had a mistake in a first row,
https://jsfiddle.net/yvvcspha/1/
table.contact tr, td {
}
This selector means that youre applying style to ;tr inside table.concat, and to all other td on the page, since comma separates selectors.
If you want to apply style only to td inside table.concat, you should use. table.contact td.
table.contact tr, table.contact td {
}
This will be the right way to do it.
Also, consider learinig more about CSS and HTML5 basics since it seems like you're lacking some basic knowlege about their synthax and way it works.
This series of articles (the beginer part) might end up being extrimely helpfull to you.
I have a website that displays differently on different monitors.
Desktop:
Laptop:
HTML
<body>
<div id="Links">
<img src="Slideshow/About.png" width="140em" />
<br /><br />
<img src="Slideshow/Contact.fw.png" width="140em" />
<br /><br />
<img src="Slideshow/Services.fw.png" width="140em" />
</div>
<div id="mainText">
<h1>Contact</h1>
<p>If you want to contact me please call at <b>1.800.SUCCESS</b> or use the form below to sned me an email!</p>
</div>
<form name="contactform" method="post" action="send_form_email.php">
<table id="conTable">
<tr>
<td valign="top">
<label for="first_name">First Name *</label>
</td>
<td valign="top">
<input type="text" name="first_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top"">
<label for="last_name">Last Name *</label>
</td>
<td valign="top">
<input type="text" name="last_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="telephone">Telephone Number</label>
</td>
<td valign="top">
<input type="text" name="telephone" maxlength="30" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="comments">Comments *</label>
</td>
<td valign="top">
<textarea name="comments" maxlength="1000" cols="25" rows="6"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input type="submit" value="Submit">
</td>
</tr>
</table>
</form>
</body>
CSS
body
{
background-image:url(Pictures/background.jpg);
background-repeat:no-repeat;
background-size:100%;
}
#mainText
{
position: absolute;
width: 70%;
float: left;
left: 14em;
}
#conTable
{
left:14em;
top:8em;
position:absolute;
}
#Banner
{
position:absolute;
padding-left:40%;
}
#Links
{
position:absolute;
float:left;
width:50px;
}
Can anyone please tell me why things look different on my laptop then it does on my desktop and how to fix it. As you can see from the pictures everything on my laptop is shifted to the left.
Try wrapping a "Relative" #container around all your "absolute" divs. I've adjusted your code below:
<body>
<div id="container">
<div id="Links">
<img src="Slideshow/About.png" width="140em" />
<br /><br />
<img src="Slideshow/Contact.fw.png" width="140em" />
<br /><br />
<img src="Slideshow/Services.fw.png" width="140em" />
</div>
<div id="mainText">
<h1>Contact</h1>
<p>If you want to contact me please call at <b>1.800.SUCCESS</b> or use the form below to sned me an email!</p>
</div>
<form name="contactform" method="post" action="send_form_email.php">
<table id="conTable">
<tr>
<td valign="top">
<label for="first_name">First Name *</label>
</td>
<td valign="top">
<input type="text" name="first_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top"">
<label for="last_name">Last Name *</label>
</td>
<td valign="top">
<input type="text" name="last_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="telephone">Telephone Number</label>
</td>
<td valign="top">
<input type="text" name="telephone" maxlength="30" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="comments">Comments *</label>
</td>
<td valign="top">
<textarea name="comments" maxlength="1000" cols="25" rows="6"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input type="submit" value="Submit">
</td>
</tr>
</table>
</form>
</div>
</body>
CSS:
body
{
background-image:url(Pictures/background.jpg);
background-repeat:no-repeat;
background-size:100%;
}
#mainText
{
position: absolute;
width: 70%;
left: 14em;
}
#conTable
{
left:14em;
top:8em;
position:absolute;
}
#Banner
{
position:absolute;
padding-left:40%;
}
#Links
{
position:absolute;
top: 0;
left: 0;
width:50px;
}
#container {position: relative; width: 100%}