I currently have a table that looks like this:
http://s8.postimg.org/gybzti0rn/Screen_Shot_2015_02_27_at_1_30_23_PM.png
I want to move the description of the boat up to the top of the image. I tried using valign="top", but this moved the description to the very top of the table, where the boat name is.
Here is my HTML:
<table border ="1">
<tr>
<th> Boat Name </th>
<th rowspan="2">Description</th>
</tr>
<tr>
<td><img src="boatimage.png"></td>
</tr>
</table>
Thanks in advance for the help!
Try adding a padding
<table border ="1">
<tr>
<th> Boat Name </th>
<th rowspan="2" style="vertical-align:top;padding-top:25px">Description</th>
</tr>
<tr>
<td><img src="http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif"></td>
</tr>
</table>
Because of the rowspan you added it will cover 2 row on that description <th> header and place text description accodingly in this case you have to manually adjust it by adding padding to align it to image <td> row border.
Fiddle
Can you make the question a bit clearer?
Maybe try CSS
<th style="display:block;position:relative;top:20px;" rowspan="2">
That will move it 20px from the top of it's cell
Related
<table style="width:100%">
<tr>
<th>type</th>
<th>descritpion</th>
</tr>
<tr>
<td><p><img src="mail.ping" style="width: 30px;"></p>
<span>type-cedit ad=nd debit and shopping</td>
<td>description</td>
</tr>
</table>
The above image is show table data. when image and text aligned inside table cell.
This works fine when text is smaller. but when text size is large. text is appearing below image.
In above image i need to make the 'shopping' work should come jus below 'type' if length is large. Text should not appear below image. how can i fix this alignment issue
Applying display:inline-block or float:left you can align both
.divin{
display:inline-block;}
<table style="width:100%">
<tr>
<th>type</th>
<th>descritpion</th>
</tr>
<tr>
<td><p class="divin"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="width: 30px;"></p>
<span class="divin">type-cedit ad=nd debit and shopping</span></td>
<td>description</td>
</tr>
</table>
I am trying to make a 1x2 table and include a picture into one cell and some text into the other. I am not sure if I am doing this correctly or am missing something. But the image appears but the text doesn't...
HTML Code:
<div id="PurpleBacking">
<table>
<tr>
<th><img src="MoneyIcon.png"> </th>
<th> This is a test</th>
</tr>
</table>
</div>
Thanks
I would recommend using <td> instead of<th> in case you want a paragraph or more since <th> is for a header in the table.
So it should be like this:
<div id="PurpleBacking">
<table>
<tr>
<td><img src="MoneyIcon.png"> </td>
<td> This is a test</td>
</tr>
</table>
</div>
This webapge I'm working on looks like this:
The HTML is loosely like this:
<div class="title">
<table>
<tr>
<td width="35%">Table 1a Header</td>
<td width="65%">Table 2a Header</td>
</tr>
</table>
</div>
<div class="padding-all">
<div class="body" style="width: 100%">
<div><table> <!-- table 1b... --></div>
<div><table> <!-- empty table for spacing --></div>
<div><table> <!-- table 2b... --></div>
</div>
</div>
What I would like to achieve is either:
1) Have the text in my <div class="title"> at the top align above the tables inside of my <div class="body">
OR
2) Have the "top" rows inside of the tables span the entire width of the page, so that there is no black whitespace, in essence making it appear similar to how the current title div appears.
Either way, I need the text for "1a" to align with "1b" and the same for 2a/2b. As well as have it with a gray background that spans the width of the page.
I'm much more of a developer than I am a designer and I cannot seem to figure out how I can get this to work. I've fudged around with the percentages for the title div's table data cells, but this only works on certain resolutions, otherwise it doesn't display correctly. What else can I do?
Depending on what you're trying to accomplish as a whole, one option is to embed your tables.
See my example in this jsfiddle where I've used the following code:
<table>
<thead>
<tr>
<th width="2%"></th>
<th width="33%">Table 1a Header</th>
<th width="2%"></th>
<th width="63%">Table 2a Header</th>
</tr>
<tr height="10px">
<td colspan="4"></td>
</tr>
<tr>
<td width="2%"></td>
<th width="33%">Table1b Header</th>
<td width="2%"></td>
<th width="63%">Table2b Header</th>
</tr>
</thead>
<tbody>
<tr>
<td width="2%"></td>
<td width="33%">
<table><!-- Content --></table>
</td>
<td width="2%"></td>
<td width="63%">
<table><!-- Content --></table>
</td>
</tr>
</tbody>
</table>
I have this html code:
<table border="1" style="width:100%;padding-left:12.4em;" bordercolor="F0C347">
<tbody>
<tr>
<td><b>Assert Name </b></td>
<td><b>Expected</b></td>
<td><b>Actual</b></td>
<td><b>Assert Expression</b></td>
</tr>
<tr>
<td>Name</td>
<td> true</td>
<td> true</td>
<td>assert.equal(true,spy.calledOnce);</td>
</tr>
</tbody></table>
The output looks like this sample.
In the left hand side, I can the see border is taking up white spaces, rather than that it would be great, if the border starts from Assert Name only.
How should I do that?
Note: I want the padding to be present.
Your table has a lot of extra padding. Remove it and it should work.
EDIT:I think you are looking for margin and not padding , please use those words properly.
<table border="1" style="width:100%;margin-left:12.4em;" bordercolor="F0C347" >
<tbody>
<tr>
<td><b>Assert Name </b></td>
<td><b>Expected</b></td>
<td><b>Actual</b></td>
<td><b>Assert Expression</b></td>
</tr>
<tr>
<td>Name</td>
<td> true</td>
<td> true</td>
<td>assert.equal(true,spy.calledOnce);</td>
</tr>
</tbody></table>
Updated Fiddle:http://jsfiddle.net/babtb2uy/6/
Please remove padding-left:12.4em; from inline style : jsFiddle
<table border="1" style="width:100%;" bordercolor="F0C347">
set
padding-left:0em
That's it
I'm having an object in a table and I'm unable to set vertical align (it doesn't seem to work).
Why is that?
Example:
http://jsfiddle.net/PHDWz/1/
When I give the td a height.. the content is vertical aligned in the middle....
<table cellspacing="0">
<thead>
<tr>
<th scope="col" style="width: 180px">Description</th>
<th scope="col">Textarea</th>
</tr>
</thead>
<tbody>
<tr>
<td height="400">Bla bla bla! Write something if you like! </td>
<td>
<textarea></textarea> <span><img src="http://www.qualtrics.com/university/wp-content/plugins/wp-print/images/printer_famfamfam.gif" alt="printer"> A printer!</span>
</td>
</tbody>
</table>
just add an additional column to avoid the "A printer!" link being forced to be kind of attached as align-bottom to the textarea. In your css you may omit the vertical-align for the span as you have this duplicated in the outer td.
<table cellspacing="0">
<thead>
<tr>
<th scope="col" style="width: 180px">Description</th>
<th scope="col" colspan="2">Textarea</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bla bla bla! Write something if you like! </td>
<td><textarea></textarea></td>
<td><span><img src="http://www.qualtrics.com/university/wp-content/plugins/wp-print/images/printer_famfamfam.gif" alt="printer"> A printer!</span>
</td>
</tbody>
The text in the left column sits in the middle vertically when I extend the textbox. This is using Safari, please elaborate if something else