Tabellen formatieren

Wüstenfuchs · 28 Mai 2012

Hallo,

ich bin ein HTML Anfänger und hätte ein paar Fragen, wie man eine Tabelle schöner aussehen lässt.
Ich habe eine Seite, in der man über 3 Dropdown-Menüs auswählt, welche Dinge aus einer MYSQL-Datenbank
ausgelesen werden sollen und diese werden dann in einer Tabelle ausgelistet.
Nun habe ich aber ein paar Probleme:

1. Wenn der Text groß ist, verschwindet er einfach, man muss den Text markieren und dann mit der Maus
nach rechts ziehen, um den Rest des Textes zu sehen. Wie kann ich einstellen, dass der Text, wenn er den
Rand der Zelle berührt, in der nächsten Zeile weitergeht?

2. Die Überschriften haben blaue Ränder, wie bekomme ich diese weg?

3. Wie fülle ich die Zelle mit einem Button aus?

Hier ein Bild wie es aussieht, ich habe die "Problemzonen" markiert:

Hier das Codesegment, welches sich hauptsächlich mit der Tabellenerstellung beschäftigt:

PHP:

         if(isset($_POST['fertig3']))
         {
          $sql = "SELECT * FROM fragen INNER JOIN unterthemen ON unterthemen.utid = fragen.utid WHERE unterthemen.utid = '{$_POST['menu3']}'";

          $table = mysql_query($sql);

          echo "<form action='' method='post'>";
          echo "<table border='1'>";
          echo "<tr>";
          echo "<td><input type='text' name='ID' value='ID'></td>";
          echo "<td><input type='text' name='Frage' value='Frage'></td>";
          echo "<td><input type='text' name='Antwort' value='Antwort'></td>";
          echo "<td><input type='text' name='Punkte' value='Punkte'></td>";
          echo "</tr>";

          while ($row = mysql_fetch_assoc($table))
          {
            echo "<tr>";
            echo "<td><input type='text' name='id[$row[frid]]' value='$row[frid]' class='textanzeige'></td>";
            echo "<td><input type='text' name='frage[$row[frid]]' value='$row[frage]' class='textanzeige'></td>";
            echo "<td><input type='text' name='antwort[$row[frid]]' value='$row[antwort]' class='textanzeige'></td>";
            echo "<td><input type='text' name='punkte[$row[frid]]' value='$row[punkte]' class='textanzeige'></td>";
            echo "<td><input type='submit' name='delete[$row[frid]]' value='Löschen'></td>";
            echo "<td><input type='submit' name='add[$row[frid]]' value='Hinzufügen'></td>";
            echo "<td><input type='submit' name='update[$row[frid]]' value='Bearbeiten'></td>";
            echo "</tr>";
          }

          echo "</table>";
          echo "</form>";

         }

Und hier noch der Quellcode der Seite (Vorwiegend PHP):

PHP:

<?php

          include 'connect.php';

          if(isset($_POST['delete']))
          {
            $deleteID = key($_POST['delete']);

            $auswahl = mysql_query("SELECT * FROM fragen WHERE frid = '$deleteID'");

            $row = mysql_fetch_array($auswahl);

            $frid = $row["frid"];
            $fid = $row["fid"];
            $tid = $row["tid"];
            $utid = $row["utid"];
            $frage = $row["frage"];
            $antwort = $row["antwort"];
            $punkte = $row["punkte"];

            mysql_query("INSERT INTO papierkorb (frid, fid, tid, utid, frage, antwort, punkte)
                        VALUES ('$frid', '$fid', '$tid', '$utid', '$frage', '$antwort', '$punkte')");

            $loesch = mysql_query("DELETE FROM fragen WHERE frid = '$deleteID'");
          }
          if(isset($_POST['add']))
          {
            $addID = key($_POST['add']);

            $auswahl = mysql_query("SELECT frage, antwort, punkte FROM fragen WHERE frid = '$addID'");

            $row = mysql_fetch_array($auswahl);

            $frage = $row["frage"];
            $antwort = $row["antwort"];
            $punkte = $row["punkte"];

            mysql_query("INSERT INTO auswahl (frage, antwort, punkte)
                         VALUES ('$frage', '$antwort', '$punkte')");

          }
          if(isset($_POST['update']))
          {
            $updateID = key($_POST['update']);

            $auswahl = mysql_query("SELECT * FROM fragen WHERE frid = '$updateID'");

            $row = mysql_fetch_array($auswahl);

            $frid = $row["frid"];
            $fid = $row["fid"];
            $tid = $row["tid"];
            $utid = $row["utid"];
            $frage = $row["frage"];
            $antwort = $row["antwort"];
            $punkte = $row["punkte"];

            echo "<form action='update.php' method='post' name='weiterleitung'>";
            echo "<input type='hidden' name='frid' value='$frid'>";
            echo "<input type='hidden' name='fid' value='$fid'>";
            echo "<input type='hidden' name='tid' value='$tid'>";
            echo "<input type='hidden' name='utid' value='$utid'>";
            echo "<input type='hidden' name='frage' value='$frage'>";
            echo "<input type='hidden' name='antwort' value='$antwort'>";
            echo "<input type='hidden' name='punkte' value='$punkte'>";

            echo "<input type='submit' name='aufrufen' value=''>";

            echo "</form>";

            echo "<script type='text/javascript' language='JavaScript'>document.weiterleitung.aufrufen.click();</script>";
          }
?>
<title>Datenbank auslesen</title>
<link rel="stylesheet" type="text/css" href="formate.css">
<head></head>
<body background="bg.jpg">

<?php
echo "<form action='' target='_self' method='post' name='drop1' target='_self'>";

        echo "<p>";
        echo "<select name='menu1'>";
        echo "<option value=''>Bitte w&auml;hen...</option>";

        $query = "SELECT * FROM faecher";
        $ergebnis = mysql_query($query) or die ("mysql_error()");

        while($row = mysql_fetch_array($ergebnis))
        {
         echo "<option value='".$row["fid"]."'>".$row["Fach"]."</option>";
        }

        echo "</select>";
        echo"<input type='submit' name='fertig1' value='Bestaetigen' size ='20' />";
        echo "</p>";

        echo "</form>";

        echo "<form action='' target='_self' method='post' name='drop2' target='_self'>";


         echo "<p>";
         echo "<select name='menu2'>";
         echo "<option value=''>Bitte w&auml;hen...</option>";


         $query = "SELECT * FROM themen INNER JOIN faecher ON themen.fid = faecher.fid WHERE faecher.fid = '{$_POST['menu1']}'";
         $ergebnis = mysql_query($query) or die ("mysql_error()");

         while($row = mysql_fetch_array($ergebnis))
         {
          echo "<option value='".$row["tid"]."'>".$row["Thema"]."</option>";
         }

         echo "</select>";
         echo"<input type='submit' name='fertig2' value='Bestaetigen' size ='20' />";
         echo "</p>";

        echo "</form>";

        echo "<form action='' target='_self' method='post' name='drop3' target='_self'>";

         echo "<p>";
         echo "<select name='menu3'>";
         echo "<option value=''>Bitte w&auml;hen...</option>";

         $query = "SELECT * FROM unterthemen INNER JOIN themen ON unterthemen.tid = themen.tid WHERE themen.tid = '{$_POST['menu2']}'";
         $ergebnis = mysql_query($query) or die ("mysql_error()");

         $fach = $_POST["menu1"];

         while($row = mysql_fetch_array($ergebnis))
         {
          echo "<option value='".$row["utid"]."'>".$row["Unterthema"]."</option>";
         }

         echo "</select>";
         echo"<input type='submit' name='fertig3' value='Bestaetigen' size ='20' />";
         echo "</p>";

        echo "</form>";
         if(isset($_POST['fertig3']))
         {
          $sql = "SELECT * FROM fragen INNER JOIN unterthemen ON unterthemen.utid = fragen.utid WHERE unterthemen.utid = '{$_POST['menu3']}'";

          $table = mysql_query($sql);

          echo "<form action='' method='post'>";
          echo "<table border='1'>";
          echo "<tr>";
          echo "<td><input type='text' name='ID' value='ID'></td>";
          echo "<td><input type='text' name='Frage' value='Frage'></td>";
          echo "<td><input type='text' name='Antwort' value='Antwort'></td>";
          echo "<td><input type='text' name='Punkte' value='Punkte'></td>";
          echo "</tr>";

          while ($row = mysql_fetch_assoc($table))
          {
            echo "<tr>";
            echo "<td><input type='text' name='id[$row[frid]]' value='$row[frid]' class='textanzeige'></td>";
            echo "<td><input type='text' name='frage[$row[frid]]' value='$row[frage]' class='textanzeige'></td>";
            echo "<td><input type='text' name='antwort[$row[frid]]' value='$row[antwort]' class='textanzeige'></td>";
            echo "<td><input type='text' name='punkte[$row[frid]]' value='$row[punkte]' class='textanzeige'></td>";
            echo "<td><input type='submit' name='delete[$row[frid]]' value='Löschen'></td>";
            echo "<td><input type='submit' name='add[$row[frid]]' value='Hinzufügen'></td>";
            echo "<td><input type='submit' name='update[$row[frid]]' value='Bearbeiten'></td>";
            echo "</tr>";
          }

          echo "</table>";
          echo "</form>";

         }

?>

</body>
</html>

Für Hilfe wäre ich sehr dankbar!

Mit freundlichen Grüßen

threadi · 28 Mai 2012

Relevant für die Antwort auf deine Frage wäre der erzeugte HTML- sowie der CSS-Code der Seite. Der PHP-Code bringt hierbei rein gar nichts außer er verursacht durch fehlerhafte Programmierung falschen HTML-Code, was ich momentan aber nicht so sehe.

Wüstenfuchs · 28 Mai 2012

Also der HTML-Code wird ja mit den ganzen echos erzeugt, aber
ich habe es hier jetzt nochmal ohne PHP-Code:

HTML:

          <form action='' method='post'>
          <table border='1'>
          <tr>
          <td><input type="text" name="ID" value="ID"></td>
          <td><input type="text" name="Frage" value="Frage"></td>
          <td><input type="text" name="Antwort" value="Antwort"></td>
          <td><input type="text" name="Punkte" value="Punkte"></td>
          </tr>


            <tr>
            <td><input type="text" name="id[$row[frid]]" value="$row[frid]" class="textanzeige"></td>
            <td><input type="text" name="frage[$row[frid]]" value="$row[frage]" class="textanzeige"></td>
            <td><input type="text" name="antwort[$row[frid]]" value="$row[antwort]" class="textanzeige"></td>
            <td><input type="text" name="punkte[$row[frid]]" value="$row[punkte]" class="textanzeige"></td>
            <td><input type="submit" name="delete[$row[frid]]" value="Löschen"></td>
            <td><input type="submit" name="add[$row[frid]]" value="Hinzufügen"></td>
            <td><input type="submit" name="update[$row[frid]]" value="Bearbeiten"></td>
            </tr>";


          </table>
          </form>

Die CSS-Klasse "textanzeige" legt lediglich die Höhe und Breite des Textfeldes fest:

Code:

.textanzeige
{
  width:148px;
  height:80px;
}

Wie gesagt an sich funktioniert sie, ich möchte nur die oben genannten Verbesserungen vornehmen.

threadi · 28 Mai 2012

Wüstenfuchs schrieb:
Also der HTML-Code wird ja mit den ganzen echos erzeugt, aber
ich habe es hier jetzt nochmal ohne PHP-Code:

Das stimmt nicht. Was ist denn das hier?

HTML:

$row[frid]

Nochmal: relevant ist der erzeugte HTML- sowie der gesamte CSS-Code.

Wüstenfuchs · 29 Mai 2012

Das sind ja die Einträge aus der Datenbank, das muss ja so stehen bleiben,
weil es ja keinen festen Eintrag gibt, sondern je nach dem was ich auswähle
etwas anderes in der Tabelle steht.

Hier der ganze CSS-Code, den ich aber hauptsächlich für Buttons verwende
die ich in der Tabelle eh nicht verwende:

Code:

h1
{
         margin: 20px 0;
         padding: 10px;
         font-size: 150%;
         color: black;
         font-family: helvetica, arial, sans-serif;
         background-color: white;
         border: 1px solid #804000;
}

.textanzeige
{
  width:148px;
  height:80px;
}

.button
{
         padding: 5px 10px;
         display: inline;
         background: #777 url(button.png) repeat-x bottom;
         border: none;
         color: #fff;
         cursor: pointer;
         font-weight: bold;
         border-radius: 5px;
         -moz-border-radius: 5px;
         -webkit-border-radius: 5px;
         text-shadow: 1px 1px #666;
         text-decoration:none
}
.button:hover
{
         background-position: 0 -48px;
}
.button:active
{
         background-position: 0 top;
         position: relative;
         top: 1px;
         padding: 6px 10px 4px;
}

.button.red { background-color: #e50000; }
.button.purple { background-color: #9400bf; }
.button.green { background-color: #58aa00; }
.button.orange { background-color: #ff9c00; }
.button.blue { background-color: #2c6da0; }
.button.black { background-color: #333; }
.button.white { background-color: #fff; color: #000; text-shadow: 1px 1px #fff; }
.button.small { font-size: 75%; padding: 3px 7px; }
.button.small:hover { background-position: 0 -50px; }
.button.small:active { padding: 4px 7px 2px; background-position: 0 top; }
.button.large { font-size: 125%; padding: 7px 12px; }
.button.large:hover { background-position: 0 -35px; }
.button.large:active { padding: 8px 12px 6px; background-position: 0 top; }

Tabellen formatieren

Wüstenfuchs

Neues Mitglied

threadi

Moderator

Wüstenfuchs

Neues Mitglied

threadi

Moderator

Wüstenfuchs

Neues Mitglied

Neueste Beiträge