How to include a div in table - html

I'm going to put a div inside a table tag but it doesn't work.
<table>
<div id="account" style="border: 1px solid red;">
<tr>
<td>ایمیل قبلی:</td>
<td><input type="text" name="oldmail" /></td>
<td>ایمیل جدید:</td>
<td><input type="text" name="newmail" /></td>
<td>ایمیل تایید:</td>
<td><input type="text" name="newmail2" /></td>
</tr>
<tr>
<td>پسورد قبلی:</td>
<td><input type="text" name="oldpass" /></td>
<td>پسورد جدید:</td>
<td><input type="text" name="newpass" /></td>
<td>پسورد تایید:</td>
<td><input type="text" name="newpass2" /></td>
</tr>
</div>
</table>
http://jsfiddle.net/uJSuR/
How can I fix it?


http://jsfiddle.net/uJSuR/1/
<table id="account" style="border: 1px solid red;">
<tr>
<td>ایمیل قبلی:</td>
<td><input type="text" name="oldmail" /></td>
<td>ایمیل جدید:</td>
<td><input type="text" name="newmail" /></td>
<td>ایمیل تایید:</td>
<td><input type="text" name="newmail2" /></td>
</tr>
<tr>
<td>پسورد قبلی:</td>
<td><input type="text" name="oldpass" /></td>
<td>پسورد جدید:</td>
<td><input type="text" name="newpass" /></td>
<td>پسورد تایید:</td>
<td><input type="text" name="newpass2" /></td>
</tr>
</table>
or put your styles on the tr, It's a little unclear on what you're trying to accomplish.
tr {
border: 1px solid red;
}


You could use The CSS table model
Here are the equivalent Html elements to css properties (from the above w3.org link)
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }


Actually after some searches I knew I should change div tag to tbody tag.
thank you for your answers.


You might want something like this:
<table>
<tr id="account" style="border: 1px solid red;">
<td>
<table>
<tr>
<td>ایمیل قبلی:</td>
<td><input type="text" name="oldmail" /></td>
<td>ایمیل جدید:</td>
<td><input type="text" name="newmail" /></td>
<td>ایمیل تایید:</td>
<td><input type="text" name="newmail2" /></td>
</tr>
<tr>
<td>پسورد قبلی:</td>
<td><input type="text" name="oldpass" /></td>
<td>پسورد جدید:</td>
<td><input type="text" name="newpass" /></td>
<td>پسورد تایید:</td>
<td><input type="text" name="newpass2" /></td>
</tr>
</table>
</td>
</tr>
</table>

Related

Table width changes unexpectedly while applying colspan to one of its cells

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?

How to set different td sizes with inputs in them?

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;

How to give symbol to the end of each row in html table

I have a html table
If Production Profit % between:
<table id="tableDataInp">
<tr>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
</tr>
<tr>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
</tr>
</table>
How can I give a % sign at the end of each row? I tried using % sign after each but %is displayed at the top of table.
https://www.screencast.com/t/hZ9gebf1m Current Output
Expected Output : https://www.screencast.com/t/7OSfvlMgV5x % should be displayed in place of Red Square.

You could do it using CSS and an after element.
table td:last-child::after {
content: '%';
}
<table id="tableDataInp">
<tr>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
</tr>
<tr>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
</tr>
</table>
So the CSS selector selects the last td in each row and adds an after element with the content of %
You can then apply further styling to the after element (margin, font size etc).

Add after pseudo property
#tableDataInp tr:after{
content:"%";
color:#fff;
width:20px;
height:20px;
border-radius:5px;
background:red;
padding:3px;
}
https://jsfiddle.net/lalji1051/s25cvyda/2/

You could simply add an extra cell per row:
<table id="tableDataInp">
<tr>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td width="30">%</td>
</tr>
<tr>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
<td width="30">%</td>
</tr>
</table>

right align input in table

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>

How to customize html table border?

I am trying to create a table in which the border will appear like a login box.
<table border="1">
<tr>
<td>Username: </td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td>Password: </td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td><input type="submit" value="Log In" /></td>
</tr>
</table>
What happens is that even the table cells have border and the border sucks. I want to remove cell border. The border should only be wrapping around the table. I am totally new to this.
Thanks in advance.

Use CSS
<style type="text/css">
.loginbox {
border-collapse: collapse;
border-width: 1px;
border-style: solid
}
</style>
<table class="loginbox">
<tr>
<td>Username: </td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td>Password: </td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Log In" /></td>
</tr>
</table>
FYI: I added colspan="2" to your last <td> in order to make the border go all the way around.

If you use the following css,
table {
border: thin solid black;
}
that will give you a border around the table only, you can see a jsfiddle for it at http://jsfiddle.net/2CdwW/

Use CSS to put the border on the table instead:
<table style="border: 1px solid black">
<tr>
<td>Username: </td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td>Password: </td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Log In" /></td>
</tr>
</table>