• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tabellenaufbau total missglückt...

D

dboff

Neues Mitglied
Hallo,
für ein Formular möchte ich eine Tabelle aufbauen. Ich war schoneinmal sehr nah an dem wie ich es eigentlich haben wollte, habe dann aber aus Optimierungseifer wieder alles mögliche umgeworfen. Fazit: Meine Tabelle sieht jetzt einfach total vermurkst aus! Kannn mir jemand bei dem Aufbau helfen? Ich bin noch ein Anfänger, also bitte steinigt mich nicht :)

HTML: 
<table>
    <form id="form1" action="" method="post" name="form1">
    <table width="100%" border="0">

    <tbody>
    <tr>
        <td size="40%">Lieferant:</td>
        <td colspan="3"><input type="text" size="60%" maxlength="40" name="lieferant" id="lieferant"  /></td>
    </tr>
    <tr>
        <td size="40%">Straße:</td>
        <td colspan="3"><input type="text" size="60%" maxlength="40" name="straße" id="straße"  /></td>
    </tr>
    <tr>
        <td size="25%">PLZ:</td>
        <td><input type="int" size="25%" maxlength="5" name="plz" id="plz"  /></td>
        <td size="25%">Ort:</td>
        <td><input type="text" size="25%" maxlength="40" name="ort" id="ort"  /></td>
    </tr>

    <tr>
    <table>
        <form id="form1" action="" method="post" name="form1">
        <table width="100%" border="1">
        <tbody>
        <tr>
            <th></th>
            <th>Warenbezeichnung</th>
            <th>Menge</th>
            <th>ME</th>
            <th>Preis (€)</th>
            <th>PE</th>
        </tr>
        <tr>
            <td>1.</td>
            <td><input type="int" size="60%" maxlength="30" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
        </tr>
        <tr>
            <td>2.</td>
            <td><input type="int" size="60%" maxlength="30" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
        </tr>
        <tr>
            <td>3.</td>
            <td><input type="int" size="60%" maxlength="30" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
        </tr>
        <tr>
            <td>4.</td>
            <td><input type="int" size="60%" maxlength="30" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
        </tr>
        <tr>
            <td>5.</td>
            <td><input type="int" size="60%" maxlength="30" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
        </tr>
        </tbody>
    </table>
    </tr>
    <tr>
        <td>Bemerkung:</td>
        <td colspan="3"><label><textarea id="message" name="message" rows="3" cols="10"></textarea></label></td>
    </tr>
    <tr>
        <td>Gesamtwert*:</td>
        <td><input type="int" size="10%" maxlength="10" name="gesamtwert" id="gesamtwert"  /></td>
        <td>Wunschtermin:</td>
        <td>
            <head>
            <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

            <!-- link calendar resources -->
            <link rel="stylesheet" type="text/css" href="scripts/datetimepicker/tcal.css" />
            <script type="text/javascript" src="scripts/datetimepicker/tcal.js"></script> 
            </head>
        <body>
            <form action="#">     
            <!-- add class="tcal" to your input field -->
            <div><input type="text" name="date" class="tcal" value="" /></div>
            </form>
        </body>
        </td>
    </tr>
    <tr>
        <td>Investnummer:</td>
        <td colspan="3"><input type="text" size="50%" maxlength="45" name="investnummer" id="investnummer"  /></td>
    </tr>
    
    <tr>
        <td>EK-Sachbearbeiter:</td>
        <td colspan="3"><input type="text" size="50%" maxlength="45" name="eksachbearbeiter" id="eksachbearbeiter"  /></td>
    </tr>
    
    <tr>
        <td>Dateianhang:</td>
        <td colspan="3"><input type="file" size="20%" maxlength="40" name="dateianhang" id="dateianhang"  /></td>
    </tr>
</table>
 
Hallo!
HTML: 
<table>
        <form id="form1" action="" method="post" name="form1">
        <table width="100%" border="1">

Warum oeffnest du den table-Tag 2 mal? Weiss nicht ob das jetzt dein Problem ist, aber das scheint mir wenig Sinn zu machen...


Und der body und head Tag in der Zelle sind kompletter Unfug! Mach die raus!

lg
 
Hi,
ok danke, dass hab ich jetzt mal korrigiert. Aber geändert hats leider nix bei der Darstellung der Tabelle:(

gruß
 
Zeig deinen neuen Code bitte^^

Hast du den Head-Tag geloescht, oder wie vorgesehen an den Anfgang deiner HTML Datei geschoben?

So sollte das Grundgeruest ausschauen!
HTML: 
<html>
    <head>
        CSS Files einbinden
        <title>Titel</title>
        .... usw.
    </head>
    <body>
        Inhalt... z.B deine Tabelle!
    </body>
</html>
 
sry, hat man vllt bischen falsch verstanden. Die Tabelle ist nur ein Auszug aus meiner ganzen html datei. Das Grundgerüst ist natürlich vorhanden. Was hast du mit dem Head-Tag gemeint in der Zelle? Da ist doch gar keiner?!

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Anforderung</title>
 <meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
#box {
position:absolute; top:936px; left:470px; 
z-index:3;}

#box a {
color:#FF0000;
background:#999999;
font:bold 11px verdana, sans-serif;
text-decoration:none;
display:block;
padding:5px;
border:1px solid black;}

#box a:hover {
color:black;
background:#333333;
width:200px;}

#box a span {display:none;}

#box a:hover span {
color:FF0000;
background:#ffffff;
font:normal 11px courier, sans-serif;
border:1px solid black;
display:block;
padding:10px;}
-->
</style>
</head>
 
<body>
<form enctype="multipart/form-data" action="<?php echo htmlentities($_SERVER['REQUEST_URI']); ?>" method="post" name="formular" id="formular">


    <legend><strong>Felder mit einem (*) sind Pflichtfelder und müssen ausgefüllt werden.</strong></legend>
    <strong>Bitte Daten eingeben:</strong>
<br>
<table>
    <form id="form1" action="" method="post" name="form1">
    <width="100%" border="0">

    <tr>
        <td size="40%">Lieferant:</td>
        <td colspan="3"><input type="text" size="60%" maxlength="40" name="lieferant" id="lieferant"  /></td>
    </tr>
    <tr>
        <td size="40%">Straße:</td>
        <td colspan="3"><input type="text" size="60%" maxlength="40" name="straße" id="straße"  /></td>
    </tr>
    <tr>
        <td size="25%">PLZ:</td>
        <td><input type="int" size="25%" maxlength="5" name="plz" id="plz"  /></td>
        <td size="25%">Ort:</td>
        <td><input type="text" size="25%" maxlength="40" name="ort" id="ort"  /></td>
    </tr>

    <tr>
    <table>
        <form id="form1" action="" method="post" name="form1">
        <width="100%" border="1">

        <tr>
            <th></th>
            <th>Warenbezeichnung</th>
            <th>Menge</th>
            <th>ME</th>
            <th>Preis (€)</th>
            <th>PE</th>
        </tr>
        <tr>
            <td>1.</td>
            <td><input type="int" size="60%" maxlength="30" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
        </tr>
        <tr>
            <td>2.</td>
            <td><input type="int" size="60%" maxlength="30" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
        </tr>
        <tr>
            <td>3.</td>
            <td><input type="int" size="60%" maxlength="30" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
        </tr>
        <tr>
            <td>4.</td>
            <td><input type="int" size="60%" maxlength="30" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
        </tr>
        <tr>
            <td>5.</td>
            <td><input type="int" size="60%" maxlength="30" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
            <td><input type="int" size="10%" maxlength="10" name="menge" id="menge"  /></td>
        </tr>
        </tbody>
    </table>
    </tr>
    <tr>
        <td>Bemerkung:</td>
        <td colspan="3"><label><textarea id="message" name="message" rows="3" cols="10"></textarea></label></td>
    </tr>
    <tr>
        <td>Gesamtwert*:</td>
        <td><input type="int" size="10%" maxlength="10" name="gesamtwert" id="gesamtwert"  /></td>
        <td>Wunschtermin:</td>
        <td>
            <head>
            <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

            <!-- link calendar resources -->
            <link rel="stylesheet" type="text/css" href="scripts/datetimepicker/tcal.css" />
            <script type="text/javascript" src="scripts/datetimepicker/tcal.js"></script> 
            </head>
        <body>
            <form action="#">     
            <!-- add class="tcal" to your input field -->
            <div><input type="text" name="date" class="tcal" value="" /></div>
            </form>
        </body>
        </td>
    </tr>
    <tr>
        <td>Investnummer:</td>
        <td colspan="3"><input type="text" size="50%" maxlength="45" name="investnummer" id="investnummer"  /></td>
    </tr>
    
    <tr>
        <td>EK-Sachbearbeiter:</td>
        <td colspan="3"><input type="text" size="50%" maxlength="45" name="eksachbearbeiter" id="eksachbearbeiter"  /></td>
        <td><div id="box"><a href="#">?<span>Ab einem Betrag von 8000€ muss ein Mitarbeiter des Einkaufs hinzugezogen werden. Mit diesem muss persönlich Rücksprache gehalten werden.</span></a></div><td>
    </tr>
    
    <tr>
        <td>Dateianhang:</td>
        <td colspan="3"><input type="file" size="20%" maxlength="40" name="dateianhang" id="dateianhang"  /></td>
    </tr>
</table>



<input type="submit" name="eintragen" id="eintragen" value="Abschicken" />
</form>
</body>
</html>
 
(Nicht zum eigentlichen Problem, eher generell: die Idee der Id ist, dass sie einmalig ist. Bei dir taucht ein und die selbe Id (»menge«) ständig auf. Als Name hast du »menge« auch erstaunlich oft vergeben. Bist du dir sicher, dass es den Type »int« für Input-Felder gibt? Wie gesagt: alles nicht zum Thema ...)
 
Außerdem hat du mehrfach ein form-Tag aufgemacht und nicht wieder geschlossen. Ein form innerhalb eines anderen forms ist nicht zulässig.
An den Darstellungsfehler ändert das vermutlich nichts, aber kann später zu größeren Problemen bei der Verarbeitung der Daten kommen...

Wie bodil schon richtig angemerkt hat, sollte der Name der Inputfelder dem Inhalt entsprechen. Den Typ "int" gibt es nicht, allenfalls "number". In der Regel verwendet man jedoch "text".

Da bei dir einiger Code "verrutscht" (Copy-Paste-Fehler?) und ziemlich durcheinader ist, würde ich eigentlich empfelhlen, nochmal sauber neu anzufangen.
 
input-Felder vom Typ number und int gibt es bei HTML5, siehe: input type=number – number input control (NEW) - HTML5

Da Du keinen HTML5-Doctype hast, solltest Du den Typ text verwenden.

Außerdem ist dein HTML-Code weit entfernt davon valide zu sein. Den müsstest Du gründlich ausmisten, die Tipps oben sollten da schonmal helfen. Außerdem ein Blick in den Validator.

Unabhängig davon würde ich eher raten auf dieses Tabellenkonstrukt komplett zu verzichten und alles per <fieldset>, <label> und den Formularfeldern zu machen. Mit CSS gestaltet erreicht man da eigentlich die selbe Ansicht wie mit deiner Tabelle - mit viel weniger Code.
 
Hallo,
hab jetzt meinen Code nochmal gründlich überarbeitet, auch mit dem Validator.
Code sollte jetzt etwas sauberer sein, wenn auch nicht perfekt...
Mein Problem ist, dass ich eigentlich immer 2 Felder habe. Als Beispiel: Ganz oben steht Lieferant und daneben soll der Nutzer dann seinen Lieferanten eingeben. Problem entsteht jetzt bei der 3. Zeile, da hier erst PLZ abgefragt und dann direkt der Ort, also quasi beides in einer Zeile. D.H es sind insgesamt 4 Felder in dieser Zeile. Dadurch verrutsch das komplette Tabellengerüst. Und ich bekomms einfach nicht hin...Klar könnt ichs auch untereinander machen, aber ich fänds so einfach schöner und es muss ja wohl auch irgendwie funktionieren. Du meintest jetzt ich soll mehr mit fieldsets und labeln arbeiten und das ganze dann mit CSS richtigstellen. Ich hab das zu spät gelesen und jetzt komplett andersrum gemacht und nur mit Tabellen. Aber vielleicht hast du recht und mit CSS ist es weitaus kürzer und einfacher zu regeln, aber leider habe ich da auch nicht so wirklich die Erfahrung. Aber vielleicht könnt ihr jetzt nochmal meinen Code anschauen und was dazu sagen wie ich dass irgendwie hinkriegen könnt.


HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Anforderung</title>


<link rel="stylesheet" type="text/css" href="scripts/datetimepicker/tcal.css">
<script type="text/javascript" src="scripts/datetimepicker/tcal.js"></script> 


<meta http-equiv="Content-Style-Type" content="text/css">

            

<style type="text/css">
<!--
#box {
position:absolute; top:936px; left:470px; 
z-index:3;}

#box a {
color:#FF0000;
background:#999999;
font:bold 11px verdana, sans-serif;
text-decoration:none;
display:block;
padding:5px;
border:1px solid black;}

#box a:hover {
color:black;
background:#333333;
width:200px;}

#box a span {display:none;}

#box a:hover span {
color:FF0000;
background:#ffffff;
font:normal 11px courier, sans-serif;
border:1px solid black;
display:block;
padding:10px;}

textarea {resize:none} 
textarea {
    width:90%;
    padding: 3px;
    rows: 3;
    cols: 10;
    border: 1px solid grey;
    }

-->
</style>


</head>
 
<body>



    <strong>Felder mit einem (*) sind Pflichtfelder und müssen ausgefüllt werden.</strong>
    <strong>Bitte Daten eingeben:</strong>
<br>
<table width="100%" border="0">

    <tr>
        <td>Lieferant:</td>
        <td><input type="text" size="60%" maxlength="40" name="lieferant" id="lieferant"></td>
    </tr>
    <tr>
        <td>Straße:</td>
        <td><input type="text" size="60%" maxlength="40" name="strasse" id="strasse"></td>
    </tr>
    <tr>
        <td>PLZ:</td>
        <td><input type="text" size="10%" maxlength="5" name="plz" id="plz"> </td>
        <td>Ort:</td>
        <td><input type="text" size="40%" maxlength="40" name="ort" id="ort"></td>
    </tr>

    <tr>
    <td colspan="4"><table width="100%" border="1">

        <tr>
            <th></th>
            <th>Warenbezeichnung</th>
            <th>Menge</th>
            <th>ME</th>
            <th>Preis (€)</th>
            <th>PE</th>
        </tr>
        <tr>
            <td>1.</td>
            <td><input type="text" size="30%" maxlength="30" name="menge" id="menge11"></td>
            <td><input type="text" size="4%" maxlength="10" name="menge" id="menge12"></td>
            <td><input type="text" size="4%" maxlength="10" name="menge" id="menge13"></td>
            <td><input type="text" size="4%" maxlength="10" name="menge" id="menge14"></td>
            <td><input type="text" size="4%" maxlength="10" name="menge" id="menge15"></td>
        </tr>
        <tr>
            <td>2.</td>
            <td><input type="text" size="30%" maxlength="30" name="menge" id="menge21"></td>
            <td><input type="text" size="4%" maxlength="10" name="menge" id="menge22"></td>
            <td><input type="text" size="4%" maxlength="10" name="menge" id="menge23"></td>
            <td><input type="text" size="4%" maxlength="10" name="menge" id="menge24"></td>
            <td><input type="text" size="4%" maxlength="10" name="menge" id="menge25"></td>
        </tr>
        <tr>
            <td>3.</td>
            <td><input type="text" size="30%" maxlength="30" name="menge" id="menge31"></td>
            <td><input type="text" size="4%" maxlength="10" name="menge" id="menge32"></td>
            <td><input type="text" size="4%" maxlength="10" name="menge" id="menge33"></td>
            <td><input type="text" size="4%" maxlength="10" name="menge" id="menge34"></td>
            <td><input type="text" size="4%" maxlength="10" name="menge" id="menge35"></td>
        </tr>
        <tr>
            <td>4.</td>
            <td><input type="text" size="30%" maxlength="30" name="menge" id="menge41"></td>
            <td><input type="text" size="4%" maxlength="10" name="menge" id="menge42"></td>
            <td><input type="text" size="4%" maxlength="10" name="menge" id="menge43"></td>
            <td><input type="text" size="4%" maxlength="10" name="menge" id="menge44"></td>
            <td><input type="text" size="4%" maxlength="10" name="menge" id="menge45"></td>
        </tr>
        <tr>
            <td>5.</td>
            <td><input type="text" size="30%" maxlength="30" name="menge" id="menge51"></td>
            <td><input type="text" size="4%" maxlength="10" name="menge" id="menge52"></td>
            <td><input type="text" size="4%" maxlength="10" name="menge" id="menge53"></td>
            <td><input type="text" size="4%" maxlength="10" name="menge" id="menge54"></td>
            <td><input type="text" size="4%" maxlength="10" name="menge" id="menge55"></td>
        </tr>
        </tbody>
    </table>
    </td>
    </tr>
    <tr>
        <td>Bemerkung:</td>
        <td><textarea></textarea></td>
    </tr>
    <tr>
        <td>Gesamtwert*:</td>
        <td><input type="text" size="19%" maxlength="10" name="gesamtwert" id="gesamtwert"></td>
        <td>Wunschtermin:</td>
        <td><input type="text" name="date" class="tcal" value=""></td>
    </tr>
    <tr>
        <td>Investnummer:</td>
        <td><input type="text" size="60%" maxlength="45" name="investnummer" id="investnummer"></td>
    </tr>
    
    <tr>
        <td>EK-Sachbearbeiter:</td>
        <td><input type="text" size="60%" maxlength="45" name="eksachbearbeiter" id="eksachbearbeiter"></td>
        <td><div id="box"><a href="#">?<span>Ab einem Betrag von 8000€ muss ein Mitarbeiter des Einkaufs hinzugezogen werden. Mit diesem muss persönlich Rücksprache gehalten werden.</span></a></div></td>
    </tr>
    
    <tr>
        <td>Dateianhang:</td>
        <td><input type="file" size="40%" maxlength="40" name="dateianhang" id="dateianhang"></td>
    </tr>
</table>
<input type="submit" name="eintragen" id="eintragen" value="Abschicken">

</body>
</html>
 
dboff schrieb:
Was hast du mit dem Head-Tag gemeint in der Zelle? Da ist doch gar keiner?!
HTML: 
...
   <tr>
        <td>Gesamtwert*:</td>
        <td><input type="int" size="10%" maxlength="10" name="gesamtwert" id="gesamtwert"  /></td>
        <td>Wunschtermin:</td>
        <td>
            <head>
            <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

            <!-- link calendar resources -->
            <link rel="stylesheet" type="text/css" href="scripts/datetimepicker/tcal.css" />
            <script type="text/javascript" src="scripts/datetimepicker/tcal.js"></script> 
            </head>
        <body>
            <form action="#">     
            <!-- add class="tcal" to your input field -->
            <div><input type="text" name="date" class="tcal" value="" /></div>
            </form>
        </body>
        </td>
    </tr>
  .....
Zum Vergrößern anklicken....

Grundgeruest ist vorhanden, aber ich meinte den Head und Body Tag in diesem Abschnitt... Wahrscheinlich ein C&P Fehler.

Ansonsten nimm dir die Tipps mit HTML5 bzw. Fieldsets und Labels zu Herzen!

lg
 
Ich hab den Code angepasst. Das mit dem Body und Head war natürlich ein C&P Fehler und der Teil gehört natürlich auch gar nicht mitten in den html code. Bei meinem vorigen Post ist der neue Code gepostet. Mein Problem besteht leider immernoch...

lg
 
Jetzt hast du alle Form-Tags rausgeworfen. Einer ist aber auf jeden Fall nötig, sonst passiert gar nichts.

Aber zu deinem Darstellungsproblem: Natürlich gibt es Probleme wenn eine Tabellenzeile nur 2 Zellen hat, die nächste dafür deren 4. Also entweder fügst du in die Zeile mit 2 Zellen weitere, leere Zellen ein, oder du nutzt das "colspan"-Attribut, um Zellen zu verbinden.
Oder aber du wirfst die Tabellen komplett aus dem Fenster...
 
Ok, wo sollte ich das Form-Tag am besten platzieren oder ist das egal?
Das mit dem Colspan Attribut habe ich auch schon probiert aber irgendwie will auch das nicht richtig funktionieren. Ich dachte dadurch, dass ich 2mal eine 4spaltige Zeile habe, muss ich bei allen anderen Zeilen die ja nur 2spaltig sind, ein colspan="3" an das 2. Feld der Zeile machen, damit dieses Eingabefeld sich quasi die restlichen 3 Spalten überstreckt, aber das funktioniert nicht. Auch alle anderen Versuche mit dem colspan Attribut sind missglückt. Ich glaube das hängt mit der inneren Tabelle zusammen, da nutze ich auch den Colspan und es funktioniert
 
Dein Problem liegt in der Tabelle und den Größenangaben im HTML. Ich weiß ja nicht, was du mit diesem Formular vorhast, aber sofern du die Eingaben weiterverarbeiten und speichern will, solltest du den name-Attributen unterschiedliche Werte geben.

Der richtige Ansatz wäre, sich erst einmal Gedanken über die Funktionalität zu machen. Woher sollen die Daten kommen, wohin sollen sie gehen, und was soll mit ihnen passieren? Dafür würde ein winziges Formular mit ein oder zwei input-Elementen und einem Button völlig ausreichen. Wenn darüber Klarheit besteht und alles wie gewünscht funktioniert, dann dupliziert man den Code. Das Styling kommt erst ganz am Ende.

Als Tipp am Rande: Üblicher Weise bezieht man die Daten aus einer Datenbank und legt sie auch dort wieder ab. Die notwendige Anzahl von input-Elementen wird dabei dynamisch durch PHP-Schleifen erzeugt. Insofern bringt es auch wenig, das alles als statisches HTML zu schreiben.
 
Ja das mit den Name-Attributen weiß ich und des kommt sicher auch noch. Ich hab einfach ein Darstellungsproblem. Und klar macht man sich erst Gedanken wie das ganze Formular an sich funktionieren soll und das weiß ich auch. Aber ich für meinen Teil möchte jetzt erst mein Darstellungsproblem lösen, weil ich mit dem Rest sicher klar komm. Das weiß ich...Ich habe halt im mittelteil viel kopiert und natürlich kommt dann überall das gleiche Name-Attribut vor, aber das ist nicht mein Problem!
PS: Ich versteh nicht ganz warum bei einem Formular Daten erst aus der Datenbank ausgelesen werden, aber das sie eingelesen werden ist klar und auch kein Problem. Und ich brauch auch keine PHP-Schleifen weil es nunmal ein statisches Formular ist was sich niemals verändern wird. Es soll ausgefüllt werden und in die Datenbank gespeichert werden. Und das ist beides nicht mein Problem. Es geht mir einzig um die momentan Darstellung. Und wenn du sagst, dass mein Problem in der Größenangabe der Tabellen liegt, könntest du das bitte noch ein bisschen ausführen? Auch mit den Größenangaben habe ich schon viel experimentiert, aber ich komm einfach nicht auf den grünen Zweig. Würd mich um Hilfe echt sehr freuen:)

grüße
 
Ich hab ehrlich gesagt nicht so genau verstanden, wie das ganze am Ende aussehen soll. Da sind Zeilen mit 2 und Zeilen mit 4 Zellen. Ein bisschen siehts aus, als hättest du versucht, die Spaltenbreite dadurch zu beeinflussen, indem du in die Input-Felder size-Angaben gemacht hast. Oder ist das Absicht? Size kenne ich als Parameter nicht. HTML 4.01 übrigens auch nicht. Oder?
Sieht komisch aus:
HTML: 
<td><input type="text" size="10%" maxlength="5" name="plz" id="plz"></td>
Hätte ich eher so erwartet:
HTML: 
<td width="10%"><input type="text" maxlength="5" name="plz" id="plz"></td>
 
Ja das mit den Zellen habe ich ja schon versucht zu erklären. Ganz oben im Formular steht "Lieferant" + input, sind also 2 Zellen. PLZ und Ort möchte aber zusammen mit den inputs in eine Zeile bekommen, also habe ich in dieser Zeile 4 Zellen. Dann kommt die innere Tabelle. Ich dachte da ich durch meine PLZ und Ortsangabe eine 4 spalten Tabelle habe muss ich die innere Tabelle mit einem colspan="4" erweitern, sonst würde die komplette innere Tabelle ja nur in die erste Spalte geschrieben werden. Das sieht auch ganz gut aus. Nur die Zeile mit PLZ und Ort (und die weiter unten mit Gesamtpreis und Wunschdatum) verschiebt sich. Ach vielleicht muss ich PLZ und Ort doch untereinander machen, auch wenn mir das so eigentlich nicht gefällt...
 
Dann solltest du mal versuchen, in allen Zeilen auf die selbe Zellenzahl zu kommen, sei es durch tatsächlich vorhandene Zellen oder durch in Zellen eingefügte Colspans.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben