<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>
Related
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>
I have an alignment issue where the alignment of the background color of the first cell is little more compared to the other cell. I don't know why is it happening.
As in the screen shot the cell which has week has the alignment little higher compared to other cell. Why is this happening ?
How am I supposed to make it aligned properly? Please help me.
I updated your fiddle and added some background colors to it, as you can see in below html fragment.
<td style="text-align: left; padding-left: 10px;background-color: lime" >
<div class="ng-binding" ng-class="{'TODAY': 'todayDate'}[event.dayType]">Fri 1.</div>
</td>
<td colspan="7" style="background-color: red">
<table id="test" style="table-layout: fixed;background-color: aqua">
<tbody>
I've been trying to reset some of those element's CSS value, though they don't kick in, which makes me believe there is other settings somewhere in your CSS files using the same properties, likely with !important.
So, if you check the fiddle you'll see that the recolored td's is different in height and that should narrow down your problem.
Now it would be easier for your to check those settings, alter them some, to see how you can give them the same height.
One observation I made is, if you add a text like this <td colspan="7" style="background-color: red"> Test text <table id="test", you'll see that the red background appear and that background color doesn't have the alignment issue.
Here is one more fiddle update showing that: https://jsfiddle.net/enypgyt3/4/
<p>You should use proper table format like</p>
<p>Table should be proper nested </p>
<p>Table td and tr is not nested properly</p>
<p>Try to comment every table row(tr)</p>
<table border="1" cellspacing="0" cellpadding="5"> <!--table start------->
<tr> <!--tr start-->
<td>
<table>
<tr>
<td>one</td>
<td>Two</td>
<td>Three</td>
<td>four</td>
</tr>
</table> <!--/table inside td open and it should properly closed-->
</td>
<td>Five</td>
<td>Six</td>
<td>Seven</td>
<td>Eight</td>
</tr> <!--/tr end-->
<tr> <!--second row statr-->
<td colspan="4"> <!-- User proper Colspan for every td -->
One-four five six seven
</td>
<td>
Eight
</td>
</tr> <!--second row stard-->
<tr> <!--Third row start-->
<td colspan="5">
One-four five six seven eight
</td>
</tr>
<tr>
<td>One-four</td>
<td>Five</td>
<td>Six</td>
<td>Seven</td>
<td>Eight</td>
</tr>
</table>
<p>If possible try comment maximum tr and td </p>
<p>Follow code indentation</p>
I have problem with texts in HTML
This is my code:
<table width="100%">
<tr>
<td align="left"><p style="font-family:arial;font-size:13px;color:white;">10000</p></td>
<td align="center"><p style="font-family:arial;font-size:13px;color:white;">100 </p></td>
<td align="right"><p style="font-family:arial;font-size:13px;color:white;">100 </p></td>
</tr>
</table>
I want it, when I add any character to first TD (align left) it move second and third TD (align center and align right)
Thank for every answer Have nice day :)
Set the width so they don't resize to fit whatever content is in the cells, e.g.
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td width="70%">January</td>
<td width="30%">$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
http://www.w3schools.com/tags/att_td_width.asp
align=left/center/right just aligns the content of the cell.
the second and third cells move because the first becomes larger.
if you want fixed table, use width for the cells, so they dont change size.
In a sample article I added a html table widh 2 columns, left column for images and right column for image descriptions.
The problem is, the text description on the right column is below the images, it´s like the images are forcing the text to break into another line.
this is a sample code as I used:
<table>
<tr>
<td>Image.jpg</td>
<td>Image.jpg description</td>
</tr>
<tr>
<td>Image2.jpg</td>
<td>Image2.jpg description</td>
</tr>
</table>
You can see the problem here On this page
You just have to add style="vertical-align:top" to td
Or vertical-align:middle if you'd like to position the text in the middle of the row
Try this CSS in the text <TD>:
vertical-align:top;
i.e.:
<td style="vertical-align:top;">
Trio: Quaisquer três cartas do mesmo valor. Este exemplo ...
</td>
So to understand you want the photo and the text to align correct? Can you use a valign attribute?
<table>
<tr>
<td valign="top">January</td>
<td valign="top">$100</td>
</tr>
<tr>
<td valign="bottom">February</td>
<td valign="bottom">$80</td>
</tr>
</table>
Top, Bottom and Center should be used depending on how you want it to align.
So I have a table, like the below
<table>
<tbody>
<tr>
<td rowspan="4">
<img src="ImageofProduct.jpg" />
</td>
<td>ProductName</td>
<td>Hat</td>
</tr>
<tr style="height:1%">
<td>Description</td>
<td>Descriptions here</td>
</tr>
<tr style="height:1%">
<td>Description</td>
<td>Descriptions here</td>
</tr>
<tr>
<td colspan="2"><button /></td>
</tr>
</tbody>
</table>
Now you can see the first cell has a img which is going to span every row of the table. Sometimes this image will be taller then the content on the right sometimes it won't be..
Now I have applyed height:1% on each row so that instead of firefox trying to evenly spread the height of each row to match the height of the image. They will be as small as possible apart from the last one which will span the rest of the height left over.
In Firefox this works perfectly but in chrome it doesn't feel the need to make the other all the rows total height match that of the first cell that spans every row.
Is their a way to get it to work ok in chrome? or at least both to behave the same?
I just tried your code and it works on chrome for me.
However, since your using tables anyway you could always go back to pre-CSS days:
<tr>
<td>Description</td>
<td>Descriptions here</td>
</tr>
<tr>
<td>Description</td>
<td>Descriptions here</td>
</tr>
<tr height="*">
<td colspan="2"><button /></td>
</tr>