Tried various solutions but I can't get any to work and I have a very hard time getting my head about positioning HTML elements. This one should be about as easy as they come imo. Still...
NOTE: The button is NOT to be part of the table.
I have a table and I want to position a button to the right of the table, with the bottom of the button bottom vertically aligned to the bottom of the table.
Edited to provide basic layout.
<table id="someTable">
<tr>
<td>SomeCell</td>
</tr>
</table>
<button id="somebutton">
A button
</button>
You can try this:
Updated fiddle here
<table id="someTable">
<tr>
<td>Some cell</td>
</tr>
<tfoot>
<tr>
<td valign="bottom" align="right">
<button id="someButton">
A button
</button>
</td>
</tr>
</tfoot>
</table>
Good luck.....
Managed to get it working.
<div>
<table id="someTable">
<tr>
<td>SomeCell</td>
</tr>
</table>
<button id="someButton">
A button
</button>
</div>
#someTable
{
display: inline-table;
}
#somebutton
{
display: inline-block;
vertical-align: bottom;
}
http://jsfiddle.net/Pf9Y7/
<table border="1" width="250">
<tr>
<td>Hello <br/><br/><br/></td>
<td valign="bottom" align="right"><button type="button">Click Me!</button></td>
</tr>
</table>
Related
My horizontal rule is mixed up with part of the information on a table
So, my issue is to create two separate tables side by side, instead of one table below the other like usual. I did something that made it work but now my <hr> tag is mixed together with the tables.
<h3>Skills</h3>
<table style="float: left">
<tr>
<td>Sleeping</td>
<td>★★★★</td>
</tr>
<tr>
<td>Eating</td>
<td>★★★</td>
</tr>
</table>
<table style="float: left">
<tr>
<td>Gaming</td>
<td>★★★★★</td>
</tr>
<tr>
<td>Reading</td>
<td>★★★★★</td>
</table>
<hr size="3" noshade="3">
That is the code. Can someone please help me put the horizontal rule below the table? As you can see from my code, the hr tag comes after closing the second table tag but my final output has mixed up the horizontal rule together with the table, instead of below it. What error have I made in my code? Any help would be appreciated, especially from my code. Somebody advise me on what's wrong with my code.
Also, I'm not pretty sure what is the work of the div tag since this was kinda an assignment if anybody can explain to me well, and why I put it in my code, I honestly don't know.
table {
float: left
}
hr {
clear: both
}
<h3>Skills</h3>
<table>
<tr>
<td>Sleeping</td>
<td>★★★★</td>
</tr>
<tr>
<td>Eating</td>
<td>★★★</td>
</tr>
</table>
<table style="float: left">
<tr>
<td>Gaming</td>
<td>★★★★★</td>
</tr>
<tr>
<td>Reading</td>
<td>★★★★★</td>
</table>
<hr size="3" noshade="3">
Change the styles of the <table>s to be displayed as inline:
<h3>Skills</h3>
<table style="display:inline">
<tr>
<td>Sleeping</td>
<td>★★★★</td>
</tr>
<tr>
<td>Eating</td>
<td>★★★</td>
</tr>
</table>
<table style="display: inline">
<tr>
<td>Gaming</td>
<td>★★★★★</td>
</tr>
<tr>
<td>Reading</td>
<td>★★★★★</td>
</table>
<hr size="3" noshade="3">
JSFiddle.
Just an educated guess at this stage you have two
<table style="float: left"> have you tried
<table style="float: right"> for your second table? instead of left? Hope this helps!!
I've found the solution
I just had to put my two tables inside one main table, the two tables would be table data inside table rows
<h3>Skills</h3>
<table cellspacing="10">
<td>
<table cellspacing="10">
<tr>
<td>Sleeping</td>
<td>★★★★</td>
</tr>
<tr>
<td>Eating</td>
<td>★★★</td>
</tr>
</table>
</td>
<td>
<table cellspacing="10">
<tr>
<td>Gaming</td>
<td>★★★★★</td>
</tr>
<tr>
<td>Reading</td>
<td>★★★★★</td>
</table>
</td>
</table>
I have the following code :
<table>
<tr>
<td>
<!-- Black Box -->
</td>
<td>
<!-- Search Box -->
</td>
</tr>
<tr>
<td rowspan='2'>
<table>
<tr><td class='thead'>Statut</td></tr>
<tr><td><!-- THE TD TO RESIZE --></td></tr>
</table>
</td>
<td>
<table>
<tr><td class='thead'>Annonce</td></tr>
<tr><td><!-- Don't Care --></td></tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr><td class='thead'>Message</td></tr>
<tr><td><!-- Don't Care --></td></tr>
</table>
</td>
</tr>
</table>
It renders like this: http://imageshack.us/a/img689/3140/tbi4.png
But I would like the orange cell under "Statut" to fill the whole height of the containing TD. I tried to apply a height property to the table, the TR and the TD, but nothing happens, be it in HTML with height=... or in CSS with style='height: ...
Here's the render I'd like to have: http://imageshack.us/a/img560/3809/dy4w.png
One could argue that tables are not the best choice here, as they should only be used for tabular data, not for layout.
However, if you decide to go with tables, you should not nest them, but work with rowspan to achieve the deisred result. The HTML would look like this:
<table>
<tr>
<td>
<!-- Black Box -->noir</td>
<td>
<!-- Search Box -->cherche</td>
</tr>
<tr>
<td class='titre'>Statut</td>
<td class='titre'>Annonce</td>
</tr>
<tr>
<td rowspan='3'>lorem ipsum statut</td>
<td>lorem ipsum annonce</td>
</tr>
<tr>
<td class='titre'>Message</td>
</tr>
<tr>
<td>lorem ipsum message</td>
</tr>
</table>
This way you do not need to bother with heights in css (which can be a pain).
I set up a small example to demonstrate: http://jsfiddle.net/qJQdj/
Try height:100%; to make it takes the total height.
Employing min-height will do the trick for you here if you are content aware of the table.
CSS
td[rowspan="2"] > table{
min-height:80px;
}
http://jsfiddle.net/LWxK4/
changed code : convert your code to:
<table>
<tr >
<td class='thead' rowspan='2'>Statut</td>
<td class='thead'>Message</td>
</tr>
<tr><td class='thead'>Message</td></tr>
</table>
it will give you what u want for sure
EDIT: this is the concept of using rowspan.now you should use it to build your own webpage.there are few more cells as well in your code.you can do that using nested tables.my answer shows how to use rowspan properly
If you really wanted nested tables...
You can force a nested table/table-cell to have a minimum height as follows:
Add a class .statut-panel to your inner table:
<table class="wrap">
<tr>
<td>Black Box</td>
<td>Search Box</td>
</tr>
<tr>
<td rowspan='2'>
<table class="statut-panel">
<tr>
<td class='thead'>Statut</td>
</tr>
<tr class="full-size">
<td>THE TD TO RESIZE...</td>
</tr>
</table>
</td>
<td>
<table class="annonce-panel">
<tr>
<td class='thead'>Annonce</td>
</tr>
<tr>
<td>Don't Care</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td class='thead'>Message</td>
</tr>
<tr>
<td>Don't Care</td>
</tr>
</table>
</td>
</tr>
</table>
and apply the following CSS:
table td {
background-color: lightgray;
vertical-align: top;
}
table.statut-panel {
border: 1px solid blue;
height: 200px;
}
table.statut-panel .full-size td {
border: 1px dotted blue;
height: 100%;
}
Give the inner table .status-panel a fixed height, say 200px. CSS will treat this as a minimum height so you won't get into any overflow issues as the table content expands.
For the table cell that you want to expand, table.statut-panel .full-size td, simply set the height to 100%, and it will expand in height to at least 200px (or whatever is a good minimum height).
See demo at: http://jsfiddle.net/audetwebdesign/7L3Bc/
I have a table with 2 <tr> and 2 <td>:
<table>
<tr>
<td>
<table>
<!-- other content -->
</table>
</td>
<td/>
</tr>
<tr>
<td/><td/>
</tr>
</table>
Where the ***** is I need to insert pretty much the same table (which does not contain another table).
but when I debug it the table is left aligned.
Live Example
I want that the table in the upper left box is right aligned (for knowledge: and center aligned).
For example:
The table within is 32px width but the containing td is 64px width.
How can I align the table to the right?
A table is a block-element; text-align and align only works on inline-elements.
So for a block-element you have to use margin:
CSS:
.centered{
margin: 0 auto;
}
.rightaligned{
margin-right: 0;
margin-left: auto;
}
.leftaligned{
margin-left: 0;
margin-right: auto;
}
HTML:
<td>
<table class="leftaligned">
<!-- Other Content -->
</table>
<table class="centered">
<!-- Other Content -->
</table>
<table class="rightaligned">
<!-- Other Content -->
</table>
</td>
This will work in almost every browser, even Internet Explorer 7.
Only the following comes to mind:
<table>
<tr>
<td style="text-align: right"></td>
<td/>
</tr>
<tr>
<td/><td/>
</tr>
</table>
Or another css approach:
table table {
float: right;
}
or inline with float:
<table>
<tr>
<td>
<table style="float: right;">.....</table>
</td>
<td/>
</tr>
<tr>
<td/><td/>
</tr>
</table>
In case the td only contains table and no other text or element then below code should also work, only thing it will right align everything in the td and won't work in html5:
<table>
<tr>
<td align="right">*</td>
<td/>
</tr>
<tr>
<td/><td/>
</tr>
</table>
I have three tables. When they are all filled with data (10 rows) they look fine. See picture
When, however, the max capacity (i.e. 10 rows) hasn't been reached, the tables gets centered.
I want to keep the alignment top as in the first picture and also the buttons on the bottom. Is there any simple style to do this? My HTML looks like this
<table width="100%">
<tr>
<td>
<table id="SomeTableContainer">
<tr>
<th>Name</th>
</tr>
</table>
<button id="prev1"><<</button>
<button id="next1">>></button>
<button id="create1">Create</button>
</td>
<td>
<table id="SomeOtherTableContainer">
<tr>
<th>Name</th>
</tr>
</table>
<button id="prev2"><<</button>
<button id="next2">>></button>
<button id="create2">Create</button>
</td>
<td>
<table id="OtherTableContainer">
<tr>
<th>Name</th>
</tr>
</table>
<button id="prev3"><<</button>
<button id="next3">>></button>
</td>
</tr>
</table>
Hi now add td valign="top"
As like this
<td valign="top">
or
Used in
css
td{
vertical-align:top;
}
Simply add this to your first TR:
<tr valign="top"></tr>
add style
td { vertical-align: top;}
try this
<td valign="top">
<table id="SomeOtherTableContainer">
<tr>
<th>Name</th>
</tr>
</table>
<button id="prev2"><<</button>
<button id="next2">>></button>
<button id="create2">Create</button>
</td>
Look at this code:
<table width="100%">
<tbody>
<tr>
<td style="width:20%;"><span>hello world</span></td>
<td style="width:60%;">
<textarea style="width:100%;height:200px;"></textarea>
</td>
<td>
</td>
</tr>
</tbody>
</table>
The "hello world" in the left <td>
just stays at the middle (sometimes even at the bottom),
so what attribute should I set to let the word stay at the top of the table?
Here is an online example at JSFiddle
Just add vertical-align: top; to the td style.
See it here.
<table width="100%">
<tbody>
<tr>
<td style="width:20%;" valign="top"><span>hello world</span></td>
<td style="width:60%;">
<textarea style="width:100%;height:200px;"></textarea>
</td>
<td>
</td>
</tr>
</tbody>
</table>