HTML Tabelle komplett zentrieren

[dom6770]

Hey,

Nach paar Stunden PHP und HTML wollte ich mal eine kleine Login-Seite erstellen.
Das Formular habe ich bereits und habe es einfacherweise in eine Tabelle gesteckt.

Jetzt wäre nur noch mein Ziel das Formular komplett mittig zu zentrieren, also vertikal UND horizontal bei beliebiger Auflösung/Fenstergröße.

Wie stelle ich das am besten an?

 

[Domi83]

In der CSS kannst Du das wie folgt machen...

.class {
 height: 100px;
 margin: auto;
 width: 100px;
}

Damit sollte es funktionieren. Ich zentriere eigentlich nur horizontal, daher bin ich mir jetzt nicht 100% sicher.

 

[SymA]

http://stackoverflow.com/questions/...r-a-div-on-a-page-vertically-and-horizontally

 

[Suxxess]

Willst du es schnell und schmutzig? <center> </center>

 

[Fettoni]

Mal komplett umeditiert für ne andere Lösung mit vertikaler Ausrichtung. (Horizontal wäre ja auch quick and dirty einfach <Table align="center"> )

Du kannst ja mal folgendes versuchen:

.center {
  width: 100px;
  height: 100px;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Und dann eben die Tabelle so:

<div class="center">
	<table border="1">
		<tr>
			<td>test</td>
		</tr>
	</table>
</div>

 

[DaVian]

Eine table missbrauchen als Strukurelement ist semantisch falsch!
Arbeite lieber mit div's und baue dir eine ordentliche Struktur.

 

[dom6770]

Eine table missbrauchen als Strukurelement ist semantisch falsch!
Arbeite lieber mit div's und baue dir eine ordentliche Struktur.

Ist mir bewusst Mit div's kenne ich mich aber noch nicht so aus und für eine einfache erste Login-Seite ist eine Tabelle noch akzeptable. Sobald ich mich mit div auseinander gesetzt habe, mach ich eine neue

Mal komplett umeditiert für ne andere Lösung mit vertikaler Ausrichtung. (Horizontal wäre ja auch quick and dirty einfach <Table align="center"> )

Du kannst ja mal folgendes versuchen:

.center {
  width: 100px;
  height: 100px;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Und dann eben die Tabelle so:

<div class="center">
    <table border="1">
        <tr>
            <td>test</td>
        </tr>
    </table>
</div>

In der CSS kannst Du das wie folgt machen...

.class {
 height: 100px;
 margin: auto;
 width: 100px;
}

Damit sollte es funktionieren. Ich zentriere eigentlich nur horizontal, daher bin ich mir jetzt nicht 100% sicher.

Im Prinzip läufts, aber komplett zentriert ist es leider nicht! Liegt aber vielleicht an der Tabelle.

 

[Speedy.]

1. Tabelle für ein Login-Formular: pfui
2. Zentrieren mit <center> oder align="center": pfui
3. Wenn du ein <form>-Element verwendest (was du hoffentlich tust), dann kannst du diesem eine gewisse Breite geben und die Höhe meinetwegen auf auto lassen. Über margin: 0 auto wird das Formular dann horizontal zentriert.
4. Die vertikale Zentrierung lässt sich über viele Wege lösen. Anstatt das jetzt ewig lange niederzuschreiben verweise ich einfach mal auf diese Seite: http://blog.themeforest.net/tutorials/vertical-centering-with-css/
Da kannst du dir 5 Methoden anschauen und entscheiden, welche bei dir am besten funktionieren würde.

So oder so, wenn du mit HTML anfängst, dann fang gar nicht erst falsch an. Und Tabellen sind nur für tabelarische Daten, nicht mehr und nicht weniger. In deinem Fall definitiv falsch.

 

[Domi83]

1. Tabelle für ein Login-Formular: pfui

Wie baust Du es denn, mit DIV?

<div class="row">
 <div>Bla</div>
 <div>INPUT</div>
</div>

oder hast Du da noch bessere Möglichkeiten / Optionen?

 

[Speedy.]

Wie gesagt sind Tabellen nur für tabelarische Daten. Meine Formulare sehen in der Regel so aus (aus einem aktuellen Projekt):

<form action="" method="get" id="contact-form">
	<fieldset>
		<legend>Bitte füllen Sie alle Felder mit einem * aus</legend>

		<label for="contact-name">Ihr Name: *</label>
		<input type="text" name="contact-name" id="contact-name" autofocus required>

		<label for="contact-email">Ihre E-Mail: *</label>
		<input type="email" name="contact-email" id="contact-email" required>

		<label for="contact-message">Ihre Nachricht: *</label>
		<textarea rows="30" cols="10" id="contact-message" name="contact-message" required></textarea>

		<input type="submit" value="Absenden" class="button">
	</fieldset>
</form>

Keine Tabellen weit und breit
Gestylt wird das dann mit CSS, und nur damit.

 

[Domi83]

Finde ich gut strukturiert... Da ich demnächst eines unserer Formulare umbauen kann und das komplett mit DIVs gebaut hatte und dabei auch Probleme hatte, finde ich deine Variante sehr gut Allerdings habe ich zwei Spalten für das Formular

Gibt es eigentlich einen semantischen Fehler, oder ähnliches wenn man minus "-" oder den underscore "_" verwendet in CLASS oder ID Bezeichnungen, oder ist das egal?

 

[Daaron]

vollkommen Banane. Zum Wohle der späteren Lesbarkeit sollte man nur einheitlich bleiben.

Man könnte sich übrigens streiten, ob Formulare evtl. sogar tabellarische Daten sind. Du hast oftmals eine zeilenweise Zuordnung: Feldbezeichnung -> Feld.
Tatsache ist aber, dass man sich mit Tabellen zu viel ans Bein bindet, wenn man die Darstellung doch mal ändern will.

 

[Speedy.]

Wenn du im Formular zwei Spalten machen willst, dann solltest du wohl auf divs setzen. Es würde auch ohne gehen, ist aber ein wenig schwer zu formatieren.

Es gibt meines Wissens solche Code Conventions für jede Sprache (auch HTML und CSS), wo solche Dinge wie die Bezeichnung von Variablen oder eben Klassen und IDs als "Best Practice" zu sehen sind.

Im Grunde ist's egal, ob die _ oder - verwendest, du kannst auch Camel Case einsetzen (meineKlasse). Bei HTML und CSS wird aber die Schreibweise meine-klasse oder meine-id mit Bindestrichen empfohlen, was ich auch am ansehnlichsten finde. Bei JavaScript ist's Camel Case, also meineVariable und bei PHP sind Unterstriche empfohlen: meine_variable. Sind aber reine Empfehlungen, im Grunde ist's dir überlassen.

 

[Domi83]

Okay, dann werde ich es wieder mit DIV aufbauen. Vielleicht kann ich ja Chef davon überzeugen, dass ich nur eine Spalte mache und dann schaue ich mal wie das Formular aussieht

Was die empfohlenen Schreibweisen angeht...
- HTML = meine-Klasse, meine-Id
- PHP = meine_variable
- JS = meineKlasse

werde ich mich mal daran lang hangeln und es mir einprägen. Okay, auch wenn es egal ist welche Schreibweise man verwendet, wollte ich mich wenigstens ein wenig an die üblichen Varianten halten

 

[Daaron]

Es sind Vorschläge. Mach, was dir am leichtesten von der Hand geht, aber bleib dabei einheitlich. Ich verwende z.B. auch in PHP Camel Case.

Und was die Spalte(n) angeht: Auch ohne kapselnde <div> pro Zeile kannst du problemlos mit Spalten arbeiten. Wozu gibts display:block, width:50%; float:left; und clear:both?