I want a table inside of a td of another table to be aligned at the right side.
<table style="width: 100%;">
<tr>
<td style="text-align:right;">
<table style="width: 200px; table-layout: fixed; background-color:blue">
<tr>
<td>
<input style="width:100%" type="button" value="OK" />
</td>
<td>
<input style="width:100%" type="button" value="Abbrechen" />
</td>
</tr>
</table>
</td>
</tr>
</table>
As you can see, the inner table is shown at the left side. How to accomplish?
Just add display: inline-table; to the inner table. Otherwise the text-align parameter won't apply, since it only applies to inline elements.
<table style="width: 100%">
<tr>
<td style="text-align:right;">
<table style="width: 200px; table-layout: fixed; background-color:blue; display: inline-table;">
<tr>
<td>
<input style="width:100%" type="button" value="OK" />
</td>
<td>
<input style="width:100%" type="button" value="Abbrechen" />
</td>
</tr>
</table>
</td>
</tr>
</table>
Related
i am designing a webpage which includes two tables.here is my code
<div>
<table style="width: 50%; height: 377px;">
<tr>
<td rowspan="4"><EMBED style="margin-left:20px" SRC="nesaranodu.mp4" WIDTH="500px" HEIGHT="400px" AUTOPLAY="FALSE" LOOP="false"></EMBED> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<table style="width: 50%; height: 377px;display:inline-block;">
<tr>
<td> </td>
<td> </td>
<td align="right" style="padding:0px;color:white" >mobile number:</td>
<td><input name="Text1" type="text" /><h3 style="color:red;"><?php echo $mnoerr;?></h3>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td align="right" style="padding:0px;color:white">password</td>
<td><input name="Text2" type="password" /><h3 style="color:red;"><?php echo $passerr;?></h3>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td></td>
<td ><input name="Submit1" type="submit" value="change address" />
<input onclick="document.location.href='regforswa.php'" name="Submit2" type="button" value="register" /><br/>
forgot password<h3 style="color:red;"><?php echo $success;?></h3></td>
</tr>
</table>
</div>
and i want to display it side by side.i used display:inline-block property but it is not working fine.please suggest me what i have to do.
http://jsfiddle.net/CHC67/
<div class=left>
//First table
</div>
<div class=right>
//Second table
</div>
<style>
.left {
width:50%;
float: left;
}
.right {
width 50%;
float: left;
}
</style>
Should really be doing this with divs rather than tables.
Try using floats on both tables:
<table style="width: 50%; height: 377px; float:left;">
Please make sure to set the width on the EMBED accordingly..
Otherwise it will grow over the 50% depending on the display size..
In the image above First Name and Textfield are not aligned from the left. I don't know whether its border or padding. But the image inside is conditionally visible. How to get rid of it just by html and css.
<div id=first_name>
First Name<br />
<table>
<tr>
<td><img src='images/form_error.png' class="error_image" id="form_first_name_err_img" style='display: none' /></td>
<td><input align="middle" id="form_first_name" class="form_field1" type="text" name="first_name" /></td>
</tr>
<tr>
<td colspan="2"><span class="error_msg" id="form_first_name_err_msg" style='display: none'>This cannot be left blank.</span></td>
</tr>
</table>
</div><!-- eof first_name -->
The problem was that even though you have the image hidden, there is still a <td> element, I made a few changes to the code, I put the First Name into a <td> to align with your input. Also wrapped it in a label. I removed the td the image was in, you could either put it in the same cell as the input, or dynamically add it with javascript and take it out completely (this would be my approach).
<div id=first_name>
<table>
<tr>
<td>
<label for='form_first_name'>First Name:</label>
</td>
</tr>
<tr>
<td><img src='images/form_error.png' class="error_image" id="form_first_name_err_img" style='display: none;' /><input align="middle" id="form_first_name" class="form_field1" type="text" name="first_name" />
</td>
</tr>
<tr>
<td><span class="error_msg" id="form_first_name_err_msg" style='display: none'>This cannot be left blank.</span></td>
</tr>
</table>
</div><!-- eof first_name -->
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<img src='images/form_error.png' class="error_image"
id="form_first_name_err_img" style='display: none' />
</td>
<td>
<input align="middle" id="form_first_name" class="form_field1"
type="text" name="first_name" />
</td>
</tr>
<tr>
<td colspan="2">
<span class="error_msg" id="form_first_name_err_msg"
style='display: none'>This cannot be left blank.
</span>
</td>
</tr>
</table>
try this
Set border to 0 in table tag as shown below
<table border="0">
HTML
<div id="first_name">First Name</div>
<table class="tables" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src='images/form_error.png' class="error_image" id="form_first_name_err_img" style='display: none' />
</td>
<td>
<input align="middle" id="form_first_name" class="form_field1" type="text" name="first_name" />
</td>
</tr>
<tr>
<td colspan="2"><span class="error_msg" id="form_first_name_err_msg" style='display: none'>This cannot be left blank.</span>
</td>
</tr>
</table>
Demo
OR
HTML
<div id="first_name">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td>First Name:
</td>
</tr>
<tr>
<td>
<input align="middle" id="form_first_name" class="form_field1" type="text" name="first_name" />
</td>
<td>
<img src='images/form_error.png' class="error_image" id="form_first_name_err_img" style='display: none' />
</td>
</tr>
<tr>
<td colspan="2"> <span class="error_msg" id="form_first_name_err_msg" style='display: none'>This cannot be left blank. </span>
</td>
</tr>
</table>
</div>
Demo
While putting the archaic: <table cellspacing="0" cellpadding="0"> would still produce good enough results in most (backward compatible) browsers, attributes cellpadding and cellspacing are not supported in HTML5 and shouldn't be used.
Rather put something like this in your stylesheet:
#first_name table {
border-collapse: collapse;
border-spacing: 0;
}
#first_name td {
padding: 0;
}
#first_name input {
margin: 0;
}
Of course, you can add classes to your elements and update the stylesheet accordingly.
TIP: For future similar problems, try using dev tools in your browser of choice and investigate what default style is being applied to the elements, so you can adjust accordingly.
I am weak in CSS, and I am trying to put a table in my html page, it has two rows and five columns per row(of course it is simplified), and it should look like this (the table is a hand-drawing table, it does not come so precise, I`m sorry for that.):
But mine looks like this:
This is my code:
<table border="1">
<tr>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:25px"> </td>
</tr>
<tr>
<td style="width:25px"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
</tr>
</table>
Code in jsfiddle is here.
NOTE:Any styles could be added, but structure of table could not be changed.
My problem is not the border style of table, but the width of cells, it seems that cells has a erratic width, I hope the right-border of first cell in second row could reach to the middle of bottom-border of first cell in first row, and the right-border of first cell in first row could reach to the middle of top-border of second cell in second row, so is others.
I have tried my best, but it still does not work. How could I do to match the requirement? Any suggestion will be appreciated. Thanks in advance.
You can use a <colgroup> element to achieve this:
<table border="1">
<colgroup>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
</colgroup>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
</table>
It will tell the table that there are 9 columns and each row will span the columns as you originally had.
There are other non-table ways to acheive what you are looking for. Here is one quick example:
<div>
<div class="row">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
<div class="row">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
</div>
div.row
{
clear:both;
}
div div div
{
width: 50px;
border-width: 1px;
border-style: solid;
border-color: black;
display: inline-block;
float: left;
margin: -1px;
}
div div:nth-child(2n+1) div:first-child,
div div:nth-child(2n) div:last-child
{
width: 25px;
}
Use tables within tables..
<table>
<tr>
<td>
<table border="1">
<tr>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:25px"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td style="width:25px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
</tr>
</table>
</td>
</tr>
</table>
This way you will never have that problem...
For this to work, you need to have at least one row that defines the width of individual cells (ones that are not using cellspans):
http://jsfiddle.net/cR2qd/7/1
HTML:
<body>
<table border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
</table>
</body>
CSS:
td {
width: 25px;
}
Here is my code:
<form id="form1" style="height: 800px; width:1000px" >
<table style="width: 90%; height: 193;">
<tr>
<td class="style4">
<table style="width: 100%; height: 701px;">
<tr>
<td style="height: 587px; width: 629px;" colspan="4" >
<div id="tableTree" style="height:600px;">
<table style="width: 150px;">
<div id="treeboxbox_tree" style="width:280px; height:100%; ">
</div>
</table>
</div>
</td>
</tr>
<tr>
<td >
<input type="button" value="Add" id="btnAdd" onclick="return someMethod()" />
</td>
<td >
//other button
</td>
<td >
//other button
</td>
</tr>
</table>
</td>
<div>
<td>
<table width="100%" id="smth">
<div style="float:left"><%Html.RenderPartial("Something"); %></div>
</table>
</td>
</div>
</tr>
</table>
</form>
And smth is not shown until I click on a button. But since smth has very large height, the td which has style4 goes down, where the middle of smth is. It is very frustrating. How to resolve it?
I think you mean the vertical alignment is off in the td?
<td class="style4">
Change it to
<td class="style4" valign="top">
Or add to style4
vertical-align: top;
Not sure which version of html you are defining...
This is how my table looks like. When I try to give the table 100% height but it doesn't work.
I want the TD that contains "xxx" to have 100% height i.e. the height of the parent TD.
</tr>
<tr align="left">
<td valign="top">
<table style="height:100%" border="1">
<tr>
<td>
<span title="Toggle between full screen and frames." id="showHideText" onclick="showHideFrames();"
class="buttonLabel" style="cursor:pointer; font-size:65%; font-weight:bold;">
Hide Frames
</span>
</td>
</tr>
<tr>
<td align="bottom" >
xxx
</td>
</tr>
</table>
</td>
Do you want something like this?
<table>
<tr align="left" style="height: 1000px">
<td valign="top">
<table style="height: 100%" border="1">
<tr>
<td>
<span title="Toggle between full screen and frames." id="showHideText" onclick="showHideFrames();"
class="buttonLabel" style="cursor: pointer; font-size: 65%; font-weight: bold;">
Hide Frames </span>
</td>
</tr>
<tr>
<td valign="bottom" style="height: 1000px">
xxx
</td>
</tr>
</table>
</td>
</tr>
</table>
Set the CSS height property:
style="height:100%;"