adding tables to page

The solution for my last question is very good.  I now have another one.  It is in the following page:

http://www.pinyinology.com/wheel/display/wheel.html

Thanks a lot for your help.  
fuli3665Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jason C. LevineNo oneCommented:
fuli3665,

It's always better to post the code along with a link.  I have included your code below.

There is a gap between the text and the tables because you have some invalid javascript here:

for( var i=0;i<text2beshown.length;i++ ){
  document.write('<td><span id="td'+i+'"> </span></td><br />');
}

The addition of the <br /> at the end breaks the table and the browser moves the line break to the outside of the table.  Simply change the above to:

for( var i=0;i<text2beshown.length;i++ ){
  document.write('<td><span id="td'+i+'"> </span></td>');
}

to fix it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<title>letters</title>
 
<style type='text/css'>
body {margin:20px;}
table {border-collapse:collapse;}
 
td {border:3px blue solid; width:30px; height:30px; text-align:center;}
 
#first {margin-bottom:20px;}
</style>
 
<script type='text/javascript'>
 
//var text2beshown='FLORIDA,USA';
 
//var text2beshown='ABCDEFG,XYZ';
 
var text2beshown='u±YNh4Ñ‹';
var tout;
var lno;
var show=0;
 
function showLetter(){
  document.getElementById('td'+lno).innerHTML = show?text2beshown.charAt(lno):' ';
  lno++;
  if( lno<text2beshown.length ) tout=setTimeout("showLetter()",show?300:1);
}
 
function showIt(){
  lno=0;
  show=1;
  showLetter();
}
 
function hideIt(){
  lno=0;
  show=0;
  showLetter();
}
 
</script>
</head>
<body>
 
1. The code is very good. It can display different number of cells and Chinese script. 
 
<p>
 
2. At least 9 more tables need to be placed in the page. I tried to modify the code, but to no avail. Please show me how to add another table.  I may be able to do the rest. 
</p>
 
3. Please teach how to reduce space between this sentence and the following table. Thanks a million.
 
<table id='first'>
<tr>
<script type='text/javascript'>
for( var i=0;i<text2beshown.length;i++ ){
  document.write('<td><span id="td'+i+'"> </span></td><br />');
}
</script>
</tr>
 
</table>
 
<form>
 
<input type='button' value='show letters' name='name1' onClick="showIt()"/>
 
<input type='button' value='reset' name='name2' onClick="hideIt()" />
 
 
</form>
 
<br />
 
<p>
 More tables need to be placed in this page.
</p>
 
<table id='second' style='border-collapse:collapse;'>
<tr>
<td>F</td><td>L</td><td>O</td><td>R</td><td>I</td><td>D</td><td>A</td>
 
</tr>
 
</table>
 
<p>
<form>
<input type='button' value='show letters'style='margin-right:15px;'>
 
<input type='button' value='reset'>
</form>
</p>
 
<br /><br />
 
<table id='second' style='border-collapse:collapse;'>
<tr>
<td>F</td><td>L</td><td>O</td><td>R</td><td>I</td><td>D</td><td>A</td>
 
</tr>
 
</table>
 
<p>
<form>
<input type='button' value='show letters'style='margin-right:15px;'>
 
<input type='button' value='reset'>
</form>
</p>
 
. . . More tables . . .
 
 
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
fuli3665Author Commented:
Hi, Jason

Thanks for your help. Now the gap problem is solved. I modified the code following your advice.

 I still need to add more interactive tables to the page.  There are three one-row tables in the following page.  Only the first one has  interaction, but not the next two. I code them in html to show my intention.  If you can show me how to add another table, I may be able to add more by myself.

http://www.pinyinology.com/listing/quote/test.html

If possible, please help more.  Thanks..
0
Jason C. LevineNo oneCommented:
I don't understand the question.  If you need more tables, add them.

Or am I missing something?
0
fuli3665Author Commented:
I don't know how to modify the code to  the second table to be interactive  Please open the following page:

http://www.pinyinology.com/listing/quote/test2.html

Thanks for your help.
0
Jason C. LevineNo oneCommented:
Here's the code for the first table:

<table id='first'>
<tr>
<script type='text/javascript'>
for( var i=0;i<text2beshown.length;i++ ){
  document.write('<td><span id="td'+i+'"> </span></td>');
}
</script>
</tr>
</table>
<form>
<input type='button' value='show letters' name='name1' onClick="showIt()"/>
<input type='button' value='reset' name='name2' onClick="hideIt()" />
</form>
 
And here is the code for the second table:
 
<table id='second' style='border-collapse:collapse;'>
<tr>
<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
</table>

<form>
<input type='button' value='show letters' style='margin-right:15px;'>
 <input type='button' value='reset'>
</form>

----------

See the difference?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.