I want a background for a td. Here is my code:
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr colspan="2">
<td>
<img src="Images/1.png" width="567" height="108" />
</td>
</tr>
<tr colspan="2" >
<td style="background-image:url(Images/2.png); background-repeat:no-repeat;">
</td>
</tr>
</table>
The problem is that no images are displayed in the second row.
If I use:
<img src="Images/2.png" width="567" height="108" />
then the image 2.png does display.
Why isn't my first image appearing?
The cell has no content, so it has no height, and there are no other cells in the row to give it a height, so there is no space to display a background image in.
Try putting some content inside the the td. Ex:
<td style="background-image:url(Images/2.png); background-repeat:no-repeat;">
<p>Hi, I am some content.</p>
</td>
If that resolves, then you'll know that the problem is that no background appears when an element has no dimensions.
Related
I want to add table to my website that will not change height or width when I added a picture. The picture needed to automatic resize to td.
How can I do it?
<table style="width:100%" border="1">
<tr>
<td style="width:34%"><!--Right-->
<table border="1" style="width:100%">
<tr>
<!--Symbol--><td>
<i class="fa fa-arrow-circle-right" style="font-size:72px"></i>
</td>
<!--Name--><td style="text-align:center"><b><font style="font-size:42px">dsfdsfs</font></b><br /><font style="font-size:32px">sdfdsdsf</font></td>
<!--logo--><td>
</td>
</tr>
</table>
</td>
<td style="width:32%" rowspan="8"><!--center-->
</td>
<td style="width:34%"><!--Left-->
<table border="1" style="width:100%">
<tr>
<!--logo--><td></td>
<!--Name--><td style="text-align:center"><img src="images/company/integrity.png" /></td>
<!--Symbol--><td style="text-align:left">
<i class="fa fa-arrow-circle-left" style="font-size:72px; left:0"></i>
</td>
</tr>
</table>
</td>
</tr>
</table>
Use max-width and max-height and set it to size of td or 100%
And I would like to suggest you NOT to write inline styles...
you using the % value to the table. So table are using current resolution i mean of the window in which you opened the page. In order to say for the table to stay in same height you need to use pixels for example:
570px; not 100% or 50% of the viewing screen.
so for the fist line i believe you can simple use the pixel value.
for example:
<table style="width:1200px" border="1">
for the image don't forget to add 100% values for example:
<td style="text-align:center" width="100%" height="100%"><img src="images/company/integrity.png" /></td>
I'm using Chrome, and i'm trying to make a selection menu.
(please don't judge me for using tables I don't want to learn CSS)
http://jsfiddle.net/scottbeebiwan/FZB7C/44/
<table width="100%" height="100%" border="0">
<tr>
<td colspan="2">
<center>
Sign up<br /><img src="http://placehold.it/243x267" height="50%">
</center>
</td>
</tr>
<tr>
<td>
<center>
Download<br /><img src="http://placehold.it/243x267" width="50%">
</center>
</td>
<td>
<center>
Upload<br /><img src="http://placehold.it/243x267" width="50%">
</center>
</td>
</tr>
</table>
If you zoom out (or change the window resolution), The Sign Up image gets smaller while the rest of the images stay about the same size.
For sign up element, you are setting the height to 50%, while for the other two, you are setting the width. You might want to set the height of all the 3 elements.
I have a HTML table in a <div>:
<div id="ticket_summary" style="height:60px;">
<table width="100%" border="0" cellspacing="5" cellpadding="5">
<tr>
<td colspan="2" bgcolor="#666666" align="left"><font color="#FFFFFF"><strong>Summary</strong></font></td>
<td bgcolor="#666666" align="right"><font color="#FFFFFF"><strong><?php echo $result["datetime"]; ?></strong></font></td>
</tr>
<tr>
<td colspan="3"><?php echo nl2br(stripslashes($result["summary"])) ;?></td>
</tr>
<tr>
<td colspan="3"><hr /></td>
</tr>
</table>
</div>
I then have another table below:
<table width="100%" border="0" cellspacing="5" cellpadding="5">
<tr>
<td><div id="showticketupdates"><a onclick="show_ticketupdates()"><h3>Show Ticket Updates</h3></a></div>
<div id="hideticketupdates" style="display:none;"><a onclick="hide_ticketupdates()"><h3>Hide Ticket Updates</h3></a></div></td>
</tr>
</table>
the ticket_summary <div> is displaying over the link below. I think it has something to do with the style on the <div> - what can i add to stop it doing this?
Firstly, write this:
<div id="ticket_summary">
in place of:
<div id="ticket_summary" style="height:60px;">
Then, write this:
<td colspan="3"><div style="overflow-y: scroll; height: 60px;"><?php echo nl2br(stripslashes($result["summary"])) ;?></div></td>
in place of:
<td colspan="3"><?php echo nl2br(stripslashes($result["summary"])) ;?></td>
Instead of height, try making it to min-height, so:
<div id="ticket_summary" style="min-height:60px;">
Therefore it will extend when the length of ticket_summary div exceeds 60px.
Also try putting your second table in a div.
EDIT:
If you want to have a fixed height and just show a scroll bar when it exceeds your desired height, then just keep the height and add an overflow: scroll; to your ticker summary div:
<div id="ticket_summary" style="height:60px; overflow:scroll;">
Also, I noticed that you put an hr at the end of the table. But this will not be displayed if there's an overflow so I suggest that you just move the <hr /> at the end of the first table.
See this fiddle: http://jsfiddle.net/AmqRJ/
Got this simple piece of html code and I want to make the TEST (third <td> component) align to the bottom of the row but it stays up no matter what I try.
I know there are thousands of questions of this sort and I read 3-4 articles but non of the stuff I tried works.
<table border="0">
<tr>
<td width="144" height="125"><img src="images/logo.png" alt="CommuniTake" width="143"
height="123"></td>
<td width="775">
<h1><h:outputText value="#{msg.General_Configuration_Title}" /></h1>
</td>
<td style="float:right;vertical-align:text-bottom">
TEST
</td>
</tr>
</table>
Thanks!
<td valign="bottom">
should work
Just remove the float and make it vertical-align: bottom and it'll fall to the abyss!
How about:
<table border="0">
<tr>
<td width="144" height="125"><img src="images/logo.png" alt="CommuniTake" width="143"
height="123"></td>
<td width="775">
<h1><h:outputText value="#{msg.General_Configuration_Title}" /></h1>
</td>
<td valign="bottom">
TEST
</td>
</tr>
</table>
From W3Schools:
text-bottom The bottom of the element is aligned with the bottom of the parent element's font
Might be that this td does not have a parent element, which has font to align to. Using simple 'bottom', as suggested by others, would align to lowest element on the same line.
When I put an image inline in a table cell, like this:
<table border="1" cellspacing="5" cellpadding="5">
<tr>
<td>
<img width="20" height="20">Text
</td>
<td>
Text
</td>
</tr>
</table>
…it shifts the vertical alignment of the text in that cell, like this:
I've played around with vertical-align, but haven't been able to align the in the two cells. What's the right way to do that?
I've been continuing to play around with this problem, here's a workaround I came up with:
<table border="1" cellspacing="5" cellpadding="5">
<tr>
<td style="line-height: 20px;">
<img width="20" height="20" style="vertical-align: top;">Text
</td>
<td>
Text
</td>
</tr>
</table>
It renders like this:
I don't love that the the height of the image needs to be in CSS, so I'm still open to other ideas.
Ok how about... this!
<table border="1" cellspacing="5" cellpadding="5">
<tr>
<td>
<img style="float: left;" width="20" height="20">Text
</td>
<td>
Text
</td>
</tr>
</table>