• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Tabelle zentrieren

bine

bine

Lounge-Member
Immer wieder muß ich überlegen wie ich eine Seite also ein komplettes Tabellenlayout mit fester Größe per html oder css zentriere, wobei das horizontal kein Problem ist:
Deshalb hab ich hier mal die mir bekannten Möglichkeiten aufgeschrieben.

I. horizontal zentrieren:

1. Die wohl Browsersicherste Möglichkeit = Rahmentabelle erstellen:
<table width=100%>
<tr>
<td align=center>
Hier die Tabellen der Seite
</td>
</tr>
</table>

2. Seite in ein div setzen:
<div style="width:700px; margin:auto;">
Hier die Tabellen der Seite
</div>

Ia. Seite etwas nach rechts setzen:

1. <body style="margin-left:100px; marginwidth:100px;">

II. vertikal zentrieren:

1. alte Methode: ne Rahmentabelle mit height=100% und dann td valign=middle
dachte immer das geht, geht aber nicht und außerdem gibt's kein <table height

2. Tja und die Seite vollkommen vertikal zu zentrieren gelingt mir gar nicht :( Beim googeln hab ich auch nichts browserübergreifend funktionierendes gefunden.

(table height=100% und dann die Inhaltstabelle in eine Zelle packen geht ja nur wenn man keinen doctype angibt.)

Also ich weiß nicht, wie man ein festes Tabellenlayout ordentlich vertikal zur Bilschirmgröße zentrieren kann.

IIa) etwas nach unten setzen

1. im body-Tag
<body style="margin-top:4%; marginheight:4%;">
oder mit px-Angaben also z.B. margin-top:100px

margin-top für IE, marginheight für NS soweit ich weiß

2. im head oder über eine externe css-Datei
<head>
<style type="text/css">
body { margin-top:100px; marginheight:100px; }
</style>

Würd mich über Verbesserungen/Ergänzungen und nen Tip für's vertikale zentrieren freuen.
 
Zuletzt bearbeitet:
Hey bine,
wenn:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

noch über dem Header steht (wie jeder doctype ...)

funktioniert das:

HTML: 
  <table style="position:absolute; top:0px; left:0px; width:100%; height:100%;">
   <tr>
    <td align="center" valign="middle">
      Inhalt
    </td>
   </tr>
  </table>

als vertikale und horizontale positionierung.

Mfg Jigger
 
ach da habt ihr ja was wieder hochgekramt, so wie ich oben geschrieben hab würd ich das jetzt grad gar nicht mehr machen.
Aber ehrlich ich mach das fast jedesmal anders.
Im Moment lautete meine Schreibweise aus dem Stegreif z.B. so um eine Content-Tabelle horizontal und vertikal im Browserfenster zu zentrieren.
Code: 
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/transitional.dtd">
<html>
<head>
<title>zentrieren</title>
<style type="text/css">
html, body 		{ 	width:100%;
					height:100%;
}
table.aussen 	{ 	       width:100%;
					height:100%;
                                        margin:0px; auto;
					text-align:center;
					vertical-align:middle;
}
table.innen 	{
					height:250px;
	                                margin-left:auto;
	                                margin-right:auto;
	                                width:760px;
	                                background-color:#00AFAF;

                                        border:1px solid black;

}
table.innen td	{	       vertical-align:top;
                                        text-align:left;
                                        padding:20px;
}
</style>
<body>
<table class="aussen" cellpadding=0 cellspacing=0>
	<tr>
    	<td>
			<table class="innen" cellpadding=0 cellspacing=0>
            	             <tr>
                	          <td>Inhalt</td>
            	             </tr>
                      </table>
	</td>
    </tr>
</table>
</body>
</html>

danke @dkdenz gern schau ich mir den Link mal näher an, das sieht recht vielversprechend aus.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben