<table>
<tr>
<td>
<img src="/me/images/register.jpg" width="680" height="290">
</td>
</tr>
</table>
how can i show text and lables on this image?
Have your image as a background on either the td, tr or table. If image is not 100% height and width, use background-position to position your image where you want it. Then just use html as you would in the table.
Like this: http://jsfiddle.net/zPm2R/
Related
Currently trying to align an image to the bottom of it's table. At present it reverts to the top naturally. I've tried everything but the image still sits to the top of the table.
</table>
<td class="logo-label">
<table>
<img src="http://strawberry.wpdevcloud.com/wp-content/uploads/2018/06/smllnat_logo.jpg" height="36" width="113">
</td>
</table>
I know it will be something simple but at the moment I cannot get my head around why the image isn't moving.
First of all, the HTML structure is completely wrong. <td> and </td> are table cells, so they lie between <tr> and </tr> (table rows). <tr> and </tr> lie in between <table> and </table> (the table itself). The structure of a table is shown below:
<table>
<tr>
<td>Cell contents here</td>
</tr>
</table>
You can have as many <tr>s and <td>s as you wish.
A table by default has no width. Put in another way, its width is set to auto, i.e. it takes the width of its contents. Set the width and height attributes to avoid this. A table also has no borders by default. Set border="1" to make the borders visible.
To align an image to the bottom of its parent element (<td> in this case), one way to do it is to set position:relative for the parent element and set position:absolute for the child element. Then, set bottom:0 for the child element. The image will then be aligned to the bottom of the element. The snippet below sums up the whole process.
<table border="1" width="500" height="300">
<tr>
<td style="position: relative">
<img style="position:absolute; bottom:0" src="http://strawberry.wpdevcloud.com/wp-content/uploads/2018/06/smllnat_logo.jpg" alt="Natural Complexions" height="36" width="113">
</td>
</tr>
</table>
There may also be some rules in your logo-label CSS rule, which we don't know about.
First of all, that is a real mess you have. Secondly, you need to look at your CSS file and look up what "logo-label" is doing. That is controlling the alignment of the image.
<table>
<tr>
<td class="logo-label">
<img src="http://strawberry.wpdevcloud.com/wp-content/uploads/2018/06/smllnat_logo.jpg" alt="Natural Complexions" height="36" width="113">
</td>
</tr>
</table>
I have a table that is of a responsive height and would like the image within it to fit the height of the td, but instead it overflows to the image source height, I have spent hours on this and no luck yet. The basic test case:
<table style='height:50%;width:50%;'>
<tr>
<td>
<img style='height:100%;' src='https://placehold.it/192x1200'>
</td>
</tr>
<tr>
<td>
bob
</td>
</tr>
</table>
use position relative to the parent of the image [ td ] and will apply your dimensions by precentage.
I'm trying to send and email with PHP. The content of this email have a grid with two images per row. So this div has a width of 48% that I put with CSS. My problem is that I need to put other images over the main one. But some mailers doesn't support position tag of CSS.
I have tried to create a table with 48% width and put the main image as backgroun-image and in each td the images that I need, but if it doesn't respect my image scale and it shows elongated.
How can I make a table adjust to it background-image respecting their scale? Or is there any other solution?
Here is my code:
<table class="tableimage" cellspacing="0" cellpadding="0" border="0" background="image.png"style="background-size: 100% 100%;width:48%">
<tr>
<td width="50" align="center">1</td>
<td width="50" align="center">2</td>
<td width="50" align="center">3</td>
</tr>
<tr>
<td width="50" align="center">4</td>
<td width="50" align="center">5</td>
<td width="50" align="center">6</td>
</tr>
</table>
EDIT:
Ok, let me explain. I'm trying to send by email an image with a png logo over it. My first try was to put the image with position relative and the logo with position absolute, but not all the mailers support css position tag. So I decided to try it using tables.
I have created a table with a background image and put the logo inside a td of this table. My background image needs to have a 48% width and auto heigth. How can I get my table adjust to the size of the background image?
I have an image <img> in <td></td> tags, i want to set max fixed width, beacause when image is large, it goes out from layout and my table became to large. And if the image width is less then max width, it should have original size param.
How can i do that without javascript?
<table>
<tr>
<td>
<img>
</td>
</tr>
</table>
you can do it like this:
<img src="..." class="img" />
css:
.img {
max-width: 100px;
}
I have a table structure like below:
<table>
<tr>
<td>
<div id="FirstDiv">
<table>
<tr>
<td>
</td>
</tr>
</table>
</div>
</td>
<td>
<div id="SecondDiv">
</div>
</td>
</tr>
</table>
The structure of FirstDiv and SecondDiv are same. The td tag inside FirstDiv contains some text and I am showing the text (Text is dynamic one,it is coming from back end.) using anchor tag but if the text is more wider than 150px, it is pushing the border to right. According to requirement, there should not be any horizontal scroll bar so, I tried to wrap the text inside the anchor tag, giving styles like word-wrap:normal, but till now not able to fix it. Its either giving me a horizontal scroll bar or pushing the border to right.
Thanks in advance.
Try this:
table {table-layout:fixed}
td {width:50%}