I have two iframes, both of which are to the same page. Very little has been done to either, other than one having an onload function set. However, when I put them in the page, only the first one will load. If I switch the order they appear in, the second always fails to show up. Both work perfectly by themselves. Here is the code for the table with the frames in it:
</td>
</tr>
<tr id="gameFrame">
<td>
<iframe id="gameFrame" src="http://en.wikipedia.org/wiki/Special:Random"/>
</td>
<tr>
<tr id="controls">
<td>
<iframe id="goalFinder" onload="getGoal()" src="http://en.wikipedia.org/wiki/Special:Random"/>
</td>
</tr>
</table>
What is causing the second frame not to show up, and how can I fix it?
Simply add a closing tag for each iframe instead of />
<table>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<iframe id="gameFrame" src="http://en.wikipedia.org/wiki/Special:Random"></iframe>
</td>
<tr>
<tr id="controls">
<td>
<iframe id="goalFinder" onload="getGoal()" src="http://en.wikipedia.org/wiki/Special:Random"></iframe>
</td>
</tr>
</table>
Try to close your <iframe>. It's not a self-closing element.
<iframe id="gameFrame" src="http://en.wikipedia.org/wiki/Special:Random"></iframe>
<iframe id="goalFinder" onload="getGoal()" src="http://en.wikipedia.org/wiki/Special:Random"></iframe>
DEMO
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 html in one of my mails:
<center>
<table class="button">
<tbody>
<tr>
<td>
Set Now
</td>
</tr>
</tbody>
</table>
</center>
The problem is that on Gmail this Set Now button is properly centered but on Yahoo it is aligned to the left side. Here is picture that shows the problem:
Try following code :
<td align="center">
Set Now
</td>`
Nesting another <table> is safer than using <center>. This should cover all your bases:
<td style="text-align: center;">
<table class="button" align="center" style="margin: auto">
<tbody>
<tr>
<td>
Set Now
</td>
</tr>
</tbody>
</table>
</td>
Try with
<table class="button" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="100%" align="center">
Set Now
</td>
</tr>
</tbody>
Set margin-left and margin-right to auto to the parent table. Like this,
<table class="button" style="margin-left:auto;margin-right:auto;">
<tbody>
<tr>
<td>
Set Now
</td>
</tr>
</tbody>
Although I must say that only styling the anchor tag to be a button is not going to work across all email clients, you probably should use code generated from here https://buttons.cm/
I'm new to html/css, and I'm coding a website with a rather intricate layout.
Because I'm a musician, I want to have a personal website, but I have a problem. I have these two tables, one on the left and one on the right, and I want text in the middle of the tables, but it doesn't go there and instead, goes on top of the tables. Is there any way I can make it so that it can do this?
Here's my code:
<html>
<table width="400" height="675" border="5" style="float: left" cellpadding="2" cellspacing="2">
<tr>
<td>
<div>
(embedded gadget)
</div>
</td>
</tr>
<h2 align="center">FAQ</h2>
<table width="400" height="675" border="5" style="float: right;" cellpadding="2" cellspacing="2">
<tr>
<td>
<div>
(information on the album here)
</div>
</td>
</tr>
</html>
First of all I recommend using bootstrap-3 as it is very well documented and easy to make good looking sites.
That being said I am not great at HTML or CSS either. Also you are not closing your table with . You could try doing this:
<table width="100%">
<tr>
<td>
<table width="400" height="675" border="5"cellpadding="2" cellspacing="2">
<tr>
<td>
<div>
(embedded gadget)
</div>
</td>
</tr>
</table>
</td>
<td>
<table width="400" height="675" border="5"cellpadding="2" cellspacing="2">
<tr>
<td>
<div>
(information on the album here)
</div>
</td>
</tr>
</table>
</td>
</tr>
<table>
You have a HTML error where you haven't closed your table tags.
As a beginner in HTML you need some tools to check what you've created is valid. Try running your page through a HTML validator which will tell you about errors like that And/or use View Source in Firefox which highlights errors like that in red.
i have a table that consists of two rows, the second row is a table, which i want it's elements to be centered to the main table, so my code is as follows:
<TABLE>
<TBODY>
<TR>
<TD>
<DIV id=gform:scan_area>
<OBJECT></OBJECT>
</DIV>
</TD>
</TR>
<TR>
<TD>
<TABLE style="PADDING-LEFT: 300px"> // works in firefox but doesn't work in ie9
<TBODY>
<TR>
<TD>
<INPUT>
</TD>
<TD>
<SPAN></SPAN>
</TD>
<TD>
<INPUT>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
ISSUE: TABLE style="PADDING-LEFT: 300px" works fine in firefox but doesn't work in IE9 (Quirks mode), please advise how to fix this issue or if you have any other ideas.
I think your code is not written well enough, it was much better if you used "colspan" for solving this issue.
Any way, I tried to change your code in a way that centralize the second table in the first table:
<TABLE>
<TBODY>
<TR>
<TD>
<DIV id='gform:scan_area'>
<OBJECT></OBJECT>
</DIV>
</TD>
</TR>
<TR>
<TD>
<TABLE style="width:60%">
<TBODY>
<TR>
<TD style="width:20%;padding-right:160px;">
<INPUT>
</TD>
<TD style="width:20%">
<SPAN></SPAN>
</TD>
<TD style="width:20%">
<INPUT>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
You need to do it this way
<div style="padding-left: 300px;">
<table>
...
</table>
</div>
For more read this answer: Padding table with CSS doesn't work on IE
Table padding is only applied to cells. By adding it to the <td> you will see it work in IE9 and Firefox. See: W3schools: Tables
<TABLE> // works in firefox but doesn't work in ie9
<TBODY>
<TR>
<TD style="PADDING-LEFT: 300px">
<INPUT>
</TD>
<TD >
<SPAN></SPAN>
</TD>
<TD>
<INPUT>
</TD>
</TR>
</TBODY>
</TABLE>
I have a table element on a page here with the first row configured with a colspan=2 and a div inside the row like this below. For some reason the search element is forcing itself to the top of the page and completely outside of the table. I can't seem to track down why this is occuring instead of displaying within the table like it should.
Sample URL: http://tinyurl.com/9rjd2ta
<table width="100%" border="0">
<tbody>
<tr>
<td colspan="2">
<div>my content</div>
</td>
</tr>
<tr><td>other content
i think your code might be like this
<tr colspan="2">
<td >
<div>my content</div>
</td>
<td>other content</td>