Du bist nicht angemeldet. [Anmelden]
Übersicht der Foren        Kalender     Hilfe   Forumsknigge
Knuddels.de-Forum » Das Forum » Archive » Hilfe & Fragen zur Knuddels-HP »

Tabbelausrichtung (HTML)
Optionen
Thema bewerten
Tabbelausrichtung (HTML) - #2303229 - 14.08.2011, 20:09:15
Grain
Nicht registriert


Hey :-D

Vorab: ich weiß das man sowas auch mit CSS machen kann. ;-)
Die Tabelle besteht aus 3 Spalten. Die alle 3 den selben Abstand zueinander haben, jedoch sind sie nicht alle gleich hoch wie man sieht.[img]http://i55.tinypic.com/2qito5s.jpg[/img]

So ist die Struktur:

Html:
<table>
    <tbody>
        <tr>
            <td width="300">
            <p>Test</p>
            </td>
            <td width="300">
            <p>Test2</p>
            </td>
            <td width="300">Test3</td>
        </tr>
    </tbody>
</table>


Wäre über eure Hilfe sehr dankbar.
[zum Seitenanfang]  
Re: Tabbelausrichtung (HTML) [Re: ] - #2303277 - 14.08.2011, 21:09:06
Scnappi
Nicht registriert


Hey,

mit der Struktur kann man recht wenig anfangen. Falls du wirklich p-Tags verwendest, bedenke, dass sie ohne CSS-Reset einen automatischen Absatz produzieren. In deiner Beispielstruktur hast du ein <p> vergessen, vielleicht ist es dir in deinem richtigen Code auch passiert.

Ich gehe aufgrund der Tatsache, dass es sich um ein Formular handelt, mal davon aus, dass es nicht um eine Knuddels-HP geht (sonst könnte es an den automatisch eingefügten Breaks liegen). Am besten wäre es, wenn wir deinen ganzen Code kennen würden oder man die Seite betrachten könnte (zwecks Untersuchung mit Firebug).
[zum Seitenanfang]  
Re: Tabbelausrichtung (HTML) [Re: ] - #2303293 - 14.08.2011, 21:24:10
Grain
Nicht registriert


Zum reproduzieren hier einmal ein Teil des Quellcodes, der auch MySQL umfasst.

Warnung! Spoiler!
Html:
        <table><tr><td width="300">
	<form name="eintrag" action="admin.php?edit" method="POST">
	<!-- Benutzername -->
	<p><b>Benutzername:</b><br><input size="30" value="'.$row["user"].'" type="text" name="name"></p>

	<!-- Gesperrt -->
	<p><b>Gesperrt:</b><br><input size="30" maxlength="1" value="'.$row["gesperrt"].'" type="text" name="gesperrt">
	
	<!-- Grund -->
	<p><b>Grund:</b><br><input size="30" value="'.$row["lockreason"].'" type="text" name="lockreason"></p>

	<!-- Sperradmin -->
	<p><b>Sperradmin:</b><br><input size="30" value="'.$row["sperradmin"].'" type="text" name="sperradmin" readonly="readonly"></p>
	</td><td width="300">
	<!-- E-Mail -->
	<p><b>E-Mail:</b><br><input size="30" value="'.$row["email"].'" type="text" name="email"></p>
	
	<!-- Letzter Login -->
	<p><b>Letzter Login:</b><br><input size="40" value="'.$lastactivity.'" type="text" name="lastlogin" readonly="readonly"></p>	

	<!-- Teams -->
	<p><b>Teams:</b><br><input size="30" value="'.$row["team"].'" type="text" name="team"></p>

	<!-- Rang -->
	<p><b>Rang:</b><br><select name="rang" style="background-color: #D9ABEF;>
	      <option value="0" '; if ($row[rang] == '0') { $inhalt .= 'selected'; } $inhalt .= '>Mitglied</option>
	      <option value="1" '; if ($row[rang] == '1') { $inhalt .= 'selected'; } $inhalt .= '>Familymitglied</option>
	      <option value="2" '; if ($row[rang] == '2') { $inhalt .= 'selected'; } $inhalt .= '>Stammuser</option>
	      <option value="3" '; if ($row[rang] == '3') { $inhalt .= 'selected'; } $inhalt .= '>Moderator</option>
	      <option value="4" '; if ($row[rang] == '4') { $inhalt .= 'selected'; } $inhalt .= '>Ehrenmitglied</option>
	      <option value="5" '; if ($row[rang] == '5') { $inhalt .= 'selected'; } $inhalt .= '>Admin</option>
	      <option value="6" '; if ($row[rang] == '6') { $inhalt .= 'selected'; } $inhalt .= '>Systemadmin</option>
	      <option value="7" '; if ($row[rang] == '7') { $inhalt .= 'selected'; } $inhalt .= '>Besitzer</option></select><br>
	</select>
	</td><td width="300">



	<!-- Geklaut -->
	<p><b>Geklaut:</b><br><input size="30" value="'.$row["geklaut"].'" type="text" name="klauen"></p>

	<!-- Punkte -->
	<p><b>Punkte:</b><br><input size="30" value="'.$row["punkte"].'" type="text" name="punkte"></p>


</td></table>
[zum Seitenanfang]  
Re: Tabbelausrichtung (HTML) [Re: ] - #2303306 - 14.08.2011, 21:36:39
Scnappi
Nicht registriert


Ersetze:
Html:
<td width="300">

durch:
Html:
<td width="300" style="vertical-align: top;">


Oder falls du doch gewillt bist, CSS sinnvoll zu verwenden:
Code:
td { vertical-align: top; }


Bearbeitet von Scnappi (14.08.2011, 21:38:34)
[zum Seitenanfang]  
Re: Tabbelausrichtung (HTML) [Re: ] - #2303309 - 14.08.2011, 21:40:54
Grain
Nicht registriert


Ah, gut das ich mir das mit dem ganzen Quelltext sparen kann. Hat wunderbar geklappt. Danke für deine schnelle Hilfe Scnappi. ;-)
[zum Seitenanfang]  
Re: Tabbelausrichtung (HTML) [Re: ] - #2303315 - 14.08.2011, 21:49:07
Scnappi
Nicht registriert


Kein Problem. Falls dich irgendwann die semantischere und einfachere Lösung mit CSS interessieren sollte, findest du hier ein recht gutes Beispiel in verschiedenen Varianten, die recht browserkompatibel umgesetzt sind.
[zum Seitenanfang]  
Re: Tabbelausrichtung (HTML) [Re: ] - #2303325 - 14.08.2011, 22:02:06
Grain
Nicht registriert


Wo wir gerade dabei sind:

Bei mir wird die Tabelle mit align nicht mittig. Mit <center> bzw. </center> habe ich es auch schon probiert.

Html:
<td width="300" align="center" style="vertical-align: top;">


Bearbeitet von Grain (14.08.2011, 22:02:26)
[zum Seitenanfang]  
Re: Tabbelausrichtung (HTML) [Re: ] - #2303327 - 14.08.2011, 22:08:14
Scnappi
Nicht registriert


Was genau soll zentriert sein? Die ganze Tabelle oder der Inhalt der Tabellenspalten?

Um die Tabelle an sich zu zentrieren:
Html:
<table style="width: 600px; margin:0 auto;">
  ...
</table>


Um die Zellinhalte zu zentrieren:
Html:
<td width="300" style="text-align: center; vertical-align: top;">
  ...
</td>
[zum Seitenanfang]  


Markiere alles als gelesen
Forums-Kontakt · Knuddels - Chat / Chatroom · [zum Seitenanfang]