HTML - Creating Table

Hi guys, this is my first post an ive only started to use HTML, PHP and mySQL so here goes.

The problem I am having is that i want a single line table to duplicate more lines of code when an onClick button is pressed. it basically goes

Staff name Wage hours worked
I:::::::I I:::::::::::::I I:::::::::::::::::I IButtonI

When the button is pressed i want the form table to change to
Staff name Wage hours worked
I:::::::I I:::::::::::::I I:::::::::::::::::I
I:::::::I I:::::::::::::I I:::::::::::::::::I IButtonI

and so on. I am storing staff name etc as an array so i can easily calculate totals. Is there a way to do this dynamically without having to show / hide or else using DOM?

Any help appreciated!
0 Answers Posted ( Reply | Quote ) Unsubscribe

I will be brief in hoping that the issue does not require a thesis to properly fix. I'm dealing with tables within tables..within tables. In one instance, I have a 2x1 (row by column) table inside another table. So, we'll call the inside table "B" and the outside table "A". Table B is centered inside a column in Table A. I'm trying to maximize the space, but nearly nothing works. Setting Table B height=100% does nothing. The only thing that works is setting the height=N px, where N is a number. This is no good, as I want to the site to work on all resolutions. I want it to be proportional. How can I fix this?

Here's what I'm dealing with, visually:



Any help would be welcome. Thanks.

The table itself is working fine, but the size of each cell is not correct in Firefox.
Here is a screenshot of what is happening:

http://img35.imageshack.us/img35/1938/tabletroubles.gif


Here is the head of my page, the css for the table is he

HTML Code:

<style type="text/css">
#cat table {border:0px solid #333333; cell-padding:0; cell-spacing:0; align=center} 
#cat tr {align=center}
#cat td {font-size: 13px; font-family=tahoma; font-weight: bold; padding: 0px; border:0px solid #333333; align=center;} 
#cat td a {text-decoration: none; color:#757575; background-color: white; display:block; height=23; background-image: url(linkbg1.gif); align=center;} 
#cat td a:hover {background-color: #333333; font-weight: bold; text-decoration: none;color: #ffffff; background-image: url(linkbg2.gif); align=center;} 
</style>

and here is the table code, located in the body of the page:

HTML Code:

<div style="Height:53px; overflow:auto; width:900px; position:absolute; top:0; left:0">


<TABLE bgcolor=#333333 cellspacing=0; cellpadding=0;><tr><td>

<div id="cat"> 

<table width=900; cellpadding:0px; cellspacing:0px> 
<tr align=center> 
<td width=20%>
<font face=tahoma><a href="home.html">Home</a></font>
</td>
<td width=20%><center><font face=tahoma><a href="openings.html" target="_top">Openings</a></font></center></td> 
<td width=20%><center><font face=tahoma><a href="dance.html" target="_top">Dance</a></font></center></td> 
<td width=20%><center><font face=tahoma><a href="projects.html" target="_top">Projects</a></font></center></td> 
<td width=20%><center><font face=tahoma><a href="vocaloid.html" target="_top">Vocaloid</a></font></center></td> 
</tr> 
<tr> 
<td width=20%><center><font face=tahoma><a href="fanflashes.html" target="_top">Fanflashes</a></font></center></td> 
<td width=20%><center><font face=tahoma><a href="caramelldansen.html" target="_top">Caramelldansen</a></font></center></td> 
<td width=20%><center><font face=tahoma><a href="cosplay.html" target="_top">Cosplay</a></font></center></td>
<td width=20%><center><font face=tahoma><a href="endings.html" target="_top">Endings</a></center></td>
<td width=20%><center><font face=tahoma><a href="anime.html" target="_top">Anime Episodes</a></font></font></center></td> 
</tr> 
</table>


</div> 
</td></tr></table> 
</div>

A table is nested within another table. The table on the outside has no content, it is there to make a gray border around everything else.

If you look at the table in firefox & internet explorer, you'll see that in IE- the table is much thicker than in firefox. How can i make it so that the table in Firefox will have the same thickness as the one in IE? I could really use some help. Thanks!

Here is an image depicting the trouble I'm having:



I want to make a table, consisting of many cells. These cells would be fixed, and *very different* in sizes.

It's easy to make a no-space table when all the images are exactly the same size, but when you have images with a variety of sizes, the table doesn't fit perfectly.

Basically I want to create a collage of images with overlay text on each image. My idea was that I could create a table, and each cell (td) would have a background which is the image. Then I could just type in that cell, so the text would be over the image.
Then I'd do this for every one of my images, and a collage would be formed.

The problem is, the table makes large white spaces wherever the image sizes don't match!

How do I get rid of these spaces, or is there an entirely different code/approach I should be using?

Thanks!

Here is my current code:

HTML Code:

<html>
<head>
<style type="text/css">
table.nospace {
        padding: 0; margin: 0;
        border-collapse: collapse;
}
table.nospace tr {
        padding: 0; margin: 0;
}
table.nospace td {
        padding: 0; margin: 0;
}
</style>
</head>
<body>
<TABLE class="nospace" width="2040px" height="2000px" cellspacing="0px" cellpadding="0px">
<TR>

<td valign="top">
<table><tr>
<TD WIDTH="800px" HEIGHT="800px" BACKGROUND="image.jpg" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>text</FONT></h1>
</TD></tr></table>
</td>

<td valign="top">
<table><tr>
<TD WIDTH="700" HEIGHT="497" BACKGROUND="image" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>Text</FONT></h1>
</TD></tr></table>
</td>

<td valign="top">
<table><tr>
<TD WIDTH="700" HEIGHT="467" BACKGROUND="image.jpg" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>Text</FONT></h1>
</TD></tr></table>
</td>

</TR>
</TABLE>

</body>
</html>

I would like to know if there is such a thing as a tag within a table, that can collapse if the next table within that prior one gets too big to center?

Here is an example of a part of my code:

Code:

      <table style="width:757; border-style:solid; border-width:thin; margin:0 0 15px 0">
       <tr><td class="spb-category" width="750" style="text-align:left;" colspan="3">Title of this category</td></tr>       
       <tr>
        <td valign="top" width="33%">
         <table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=103">large size book title with author</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=187">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=197">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
         </table>        </td>
        <td valign="top" width="33%">
         <table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=101">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=188">small sized book</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=120">Medium sized boot title</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
         </table>        </td>
        <td valign="top" width="33%">
         <table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr><td width="100%" onmouseover="this.style.background='#ddddff';" onmouseout="this.style.background='#ffffff';"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="spb-book"><a href="product_info.php?products_id=102">a very long title of a book which includes the author</a></td></tr><tr><td class="spb-author">Author</td></tr></table></td></tr>
         </table>
        </td>
       </tr>
      </table>

1. I want to center each column so that the first letter of each book title is lined-up, but that the longest title on each column has equal space on both left and right.

2. If you look at each column, the width is about 245px. With regard to the first book title in the first column, I have 50px that is extra, therefore I'd like to automatically add 25px to the front of each one of the books for that column.

3. On the second column, there is about 80px extra, therefore I'd like to auto-add 40px to the front of each book in that column.

My problem is that I don't want the column centered individually because then I will lose the straight line that I'd like each book to be on top of each other as it starts the line.

I tried:
style="margin-left:20px"
and
style="padding-left:20px"
but when the title got too long it would not auto-collapse the left side, I want it to collapse!

I want one tag that I can insert evenly on every section to get the push to the right an even amount of spaces for every book on each column.

If it comes down to it, I wouldn't mind sacrificing that each column gets auto aligned to what is necessary for its own column. So if I have to use one number, say 30px, for the whole webpage, then ok, I'd do it.

My problem is that sometimes the 30px empty filler space for the left, in order to push the title to the right, is not enough space for a very long title and it winds up sending half the title to the next line, which I don't want.

This code is a list of books that spans about 20 categories and about 400 book titles.

Thanks in advance for any help you might offer.

If anyone could take the time to answer this then much appreciated, it's pretty easy to read through, the php code is very basic and repeats itself in most places..

To create a CMS in PHP, is the best way to do it to save sections of the html to either say either a db or text file. This seems a bit messy but maybe the best way, for example say i have this html and i want to have a user be able to add more images to their page by just uploading an image and clicking a button ........,

HTML Code:

<table>
   <tr>
    
     <td> <img src = "i1.jpg" ></td>

   </tr>
</table>

Now i could save,

HTML Code:

<table>
   <tr>

to say text1.txt

and

HTML Code:

</tr>
</table>

to text2.txt,

and the images to say text3.txt,

HTML Code:

 <td> <img src = "i1.jpg" ></td>

i could then say something like,

PHP Code:
<?php

$fname = "text1.txt";

$fo = fopen($fname,r);

$fr1 = fread($fo,filesize($fname));

fclose($fo);


$fname = "text2.txt";

$fo = fopen($fname,r);

$fr2 = fread($fo,filesize($fname));

fclose($fo);


$fname = "text3.txt";

$fo = fopen($fname,r);

$fr3 = fread($fo,filesize($fname));

fclose($fo);

$f_final=   $fr1.$fr3.$fr2;

echo $f_final;

?>


This would put the contents of all 3 text files into a single variable $f_final so that all i would need to do if i needed a new image added is add that images html to text3.txt.

This seems like a pretty good way of doing things, i assume this is how CMS systems are made pretty much??

So basically i could have a user frontend "addimg.html" which is for adding the image,


HTML Code:

<form method="post" action ="newimage.php">

<input tpye = "text" name = "img1">
<input type = "submit">

</form>

and then a modified version of the above php,

PHP Code:
<?php

//save new image name to text3.txt ***********
$newimgge_to_ADD = $_POST["img1"];

$fname = "text3.txt";

$fo = fopen($fname,a);

fwrite($fo,"\r\n".'<td> <img src = "'.$newimgge_to_ADD.'.jpg"> </td>');

fclose($fo);
//**********************

//Open all the text files one by one and save their contents to a variable *****
$fname = "text1.txt";

$fo = fopen($fname,r);

$fr1 = fread($fo,filesize($fname));

fclose($fo);


$fname = "text2.txt";

$fo = fopen($fname,r);

$fr2 = fread($fo,filesize($fname));

fclose($fo);


$fname = "text3.txt";

$fo = fopen($fname,r);

$fr3 = fread($fo,filesize($fname));

fclose($fo);

//******************

//Combine the contents of all 3 varables to one varable f_final  **********

$f_final=   $fr1.$fr3.$fr2;

//*********************

//Print out the result *********************

echo $f_final;

//**************************


?>

This would need a good bit of tweaking but i just want to know if i am on the right tracks..

please help me everyone

i need a form with:

radio buttons - where you can only choose one option

some options and a submit button, i can edit it to how i want it.

just put 'example' or something where i should put things.


Thank you everyone in advance. I would be very greatful.
yrag_football@yahoo.co.uk

Hello. =)

I'd like to create a web form, but I don't understand scripting languages (yet)...so I need a user-friendly, WYSIWYG form creator [*] . I have FrontPage 2003, but that's not "WYSIWYG"-enough for me. Plus I heard that FrontPage isn't that great when it comes to coding things.

I also want my form creator to let me:

-Insert "special fields/code" (see #1, #2, #3 and #4 - from DynamicDrive.com)

-Validate all email addresses typed in the form

-Send results to my email, and store certain fields/answers to an Excel document

-Hide my email address from spambots (it's called "encrypting", right?)


There are websites that'll make the form for me, but I want to host the finished form (and accompanying files) on MY OWN SERVER. The best site I could find (phpFormGenerator) will let me download everything. But it'll also post my forms -- and files -- in public. So my email address, database info, etc. will be available for spambots and hackers. =\

Thanks in advance!

[*] I'd prefer a freeware creator. If you know some good shareware, I ONLY want one that lets me create a fully-functional (ad-free, watermark free, 100% working for life) web form. I don't care if it expires in 30 days...as long as I get my one form made, no strings attached.

PS: Since I'm a complete n00b when it comes to web forms, I have a few more questions to ask (mostly database related). But I'll do that later.

I'm trying to learn a little bit of html. I've got some basic knowledge now, but I can't figure out one thing. I want to make a button to go to another webpage. How do I add webpages to my website and access them through a button?

I'm trying to create a link to a file that is located on my microsoft local server from a web page that is on a UNIX webserver. I'm using Dreamweaver CS5 and IE 8

I've set the link up as file:///M|/folder/folder/file.xlsx Link doesn't work.


I've also tried

M:\folder\folder\file.xlsx

M:/folder/folder/file.xlsx

file:///M:\folder\folder\file.xlsx

file:///M/folder/folder/file.xlsx

file://M/folder/folder/file.xlsx

None of these work.

What am I doing wrong?

Hello All,

I am looking to create a website very similar to this http://www.loserstatus.com/ that is my friends site and I currently have this www.canapictures.com . I like how simple his layout is but it looks sooo much better than mine lol. He hired someone to build it so he has no idea how it was made. Does anyone know if there is a template or something I can use to make something similar, I mainly just want the scrolling box with pictures that are linked to videos like he has on the top of the page below the banner.

How I can do designed polls by myself? For example like in this site:
http://easy.pro-gaming.co.il/m/inc_form.php

thanks to the helpers

Popup Windows: The Basics

We'll begin the tutorial by creating a basic popup window. The technique described here addresses all the major issues in popups. The popup always comes to the front. Different links can target the same popup. The code is simple and easily modified. Everything for the rest of the turorial is a variation on the theme described here. The code in this page creates a popup that is opened from a link. In this section we'll show the code with just the minimal description you need to get it going.

First, copy this script into the <HEAD> section of your page:

HTML Code:

<SCRIPT TYPE="text/javascript">
<!--
function popup(mylink, windowname)
{
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string')
   href=mylink;
else
   href=mylink.href;
window.open(href, windowname, 'width=400,height=200,scrollbars=yes');
return false;
}
//-->
</SCRIPT>

For now we'll skip the details of how the script works, and move to the next step. The script above opens the popup, but something needs to run the script. The most common situation is that the script is run when the user clicks on a link. A link like the following would run the script:

HTML Code:

<A 
   HREF="popupbasic.html" 
   onClick="return popup(this, 'notes')">my popup</A>

Most of the link is as usual. The URL of the page being linked to is in the HREF attribute. We've added an additional attribute called onClick. Copy the code as it is into your link, with only a small modification. The second argument of the popup() -- 'notes' -- indicates name of the popup window. Every popup window should have its own unique name. Be sure to put the name in single quotes (''). So if you want to name the popup 'stevie' then this would be the code:

HTML Code:

<A HREF="popupbasic.html" onClick="return popup(this, 'stevie')">my popup</A>

Read This Next Part Or You'll Go Insane Trying to Figure Out Why Your Popup Doesn't Work

A small but crucial point is often overlooked. The command in onClick must begin with return or the script won't work. Be sure to start the command with return like this:
HTML Code:

onClick="return popup(this, 'notes')"

And don't put a space in the page name between the single quotes. If you do, the link will act just like a regular link.

Popup Windows: From an Image Map

In our first variation we'll open the popup from an image map instead of from a regular anchor. We'll use the same script as from our first example. With that script, an <AREA ...> tag in an image map can be made to open a popup in exactly the same way as an <A ...> tag:

HTML Code:

<MAP NAME="index">
<AREA 
   HREF="mypopup.html" ALT="My Popup"
   COORDS="10,10,120,120" SHAPE=RECT 
   onClick="return popup(this, 'gloss')">
<AREA 
   SHAPE=RECT ALT="Your Popup"
   COORDS="140,10,180,50" HREF="yourpopup.html" 
   onClick="return popup(this, 'gloss')">

<AREA SHAPE=DEFAULT NOHREF>
</MAP>

<IMG SRC="mymap.gif" HEIGHT=130 WIDTH=190 ALT="Image Map Example"
BORDER="0" USEMAP="#index">

Popup Windows: Opening Automatically

In the first two examples (Popup Windows: The Basics and Popup Windows: From an Image Map) the popup is opened when the user clicks on something. In this example the popup opens automatically.

We'll use the same script as in the first example. Copy this script in the <HEAD> section of your page:

HTML Code:

<SCRIPT TYPE="text/javascript">
<!--
function popup(mylink, windowname)
{
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string')
   href=mylink;
else
   href=mylink.href;
window.open(href, windowname, 'width=400,height=200,scrollbars=yes');
return false;
}
//-->
</SCRIPT>

This time, instead of running the script from a link we'll run it from the onLoad attribute of the <BODY ...> tag.

HTML Code:

<BODY onLoad="popup('autopopup.html', 'ad')">

The command in onLoad is run when the document is finished loading. Like in our previous example, the command runs popup(), but this time the first argument for popup() is a little different. In the previous example we put this, meaning the link itself, and the script got the URL from the link. In this case there is no link so we pass the actual URL to open. So in our example we put 'autopopup.html'.

Popup Windows: From a Form

For our next variation on the popup theme we're going to open the popup from a form. In this example we're going to change the script around. The following script is custom designed for opening a popup from a form. It works with forms that use both POST and GET. Copy the following script exactly as-is into the <HEAD> section of your document:

HTML Code:

<SCRIPT TYPE="text/javascript">
<!--
function popupform(myform, windowname)
{
if (! window.focus)return true;
window.open('', windowname, 'height=200,width=400,scrollbars=yes');
myform.target=windowname;
return true;
}
//-->
</SCRIPT>

Now we'll add some code so that the popup opens when the user submits the form. Add an onSubmit attribute to <FORM ...> tag:

HTML Code:

<FORM METHOD=POST
   ACTION="../cgi-bin/mypopupcgi.pl"
   onSubmit="popupform(this, 'join')">

The first argument for popupform() is always this, meaning the form itself. The second argument, 'join' in this case, is a unique name for the popup.

Popup Windows: Targeting the Opener

Once a popup window has been created, linking from the popup back to the main window (i.e. the window which opened the popup) is a little trickier than might be expected. The problem is that the main window doesn't have a "name" the way the popup window does. Fortunately, JavaScript provides an answer in the form of opener.

To create links in the popup window that target back to the main window, first put this JavaScript in the <HEAD> of the popup page:

HTML Code:

<SCRIPT TYPE="text/javascript">
<!--
function targetopener(mylink, closeme, closeonly)
{
if (! (window.focus && window.opener))return true;
window.opener.focus();
if (! closeonly)window.opener.location.href=mylink.href;
if (closeme)window.close();
return false;
}
//-->
</SCRIPT>

A link that uses this script looks like this:

HTML Code:

<A 
   HREF="rbex.html" 
   onClick="return targetopener(this)">my page</A>

Popup Windows: Closing When They Go to the Opener

In the previous example the link in the popup targets the main page, but the popup stays open in the background after the user clicks on the link. In this page we'll set the link so that it closes the popup after the click.

targetopener takes three parameters. The first is always this, meaning the link itself. The second and third parameters are optional and default to false. (Notice we don't use them in the example above, we'll get to them shortly.) The second parameter indicates if the popup should close. The third is if the link should actually send the opener to the linked resource, or if the opener should just get the focus regardless of what its current page is. The third parameter provides a safe way to close the popup after closing, but still having a link to an existing page if the window isn't actually a popup (such as if the user found the page through a search engine).

When the user clicks on the link, targetopener checks if the browser has the focus command (a few older browsers don't) and if the current window was opened by another window. If these conditions are true, then the opener window gets the focus, the opener is directed to the referenced URL, and the script returns false. Because the function returns false, the link does not go on to the URL (the script has already done that). Note that the link which targets the opener is a little different than the link that opened the popup window to begin with. In this link, onClick says "return goOpener(this)"... the links on the previous pages did not use return.

By default, the popup window stays open but is in the background. If you want the popup to close after going back to the opener, add a second parameter of true to the targetopener function call:

HTML Code:

<A 
   HREF="rbex.html" 
   onClick="return targetopener(this,true)">main page</A>

Ok so i've built plenty of general websites using fairly basic html and they've all been pretty successful and people have been pleased but now I need to build an online shop for myself and i'm not 100% I have the know how to do it (but I can't afford to get it done elsewhere so eek I need to try..)

Is it safe to create a webshop and integrate a checkout system using plain old html?
There is now way to disable source viewing from what I understand...

And if so, can anyone suggest a really easy to understand and integrate checkout to go for? This is the point that has really confused and made me a bit unsure if i'm able to do this. There's so many that it would be good to know of a UK one that I shold be able to get to grips with!

Thanks

Hi ,

I have created an announcement box using html and javascript.It can be moved inside the page where ever we want. But along with this feature I need to make it stay on the screen even if people go to other webpages.How can it be possible?Please giv me reply as soon as possible.