it-swarm.com.de

CSS-Methode zum horizontalen Ausrichten der Tabelle

Ich möchte eine Tabelle mit fester Breite in der Mitte des Browserfensters anzeigen. Jetzt benutze ich

<table width="200" align="center"> 

Visual Studio 2008 gibt jedoch in dieser Zeile eine Warnung aus:

Attribut 'align' gilt als veraltet. Ein neueres Konstrukt wird empfohlen.

Welchen CSS-Stil sollte ich auf die Tabelle anwenden, um dasselbe Layout zu erhalten?

92

Steven hat recht, in Theorie :

die "richtige" Art, eine Tabelle mit CSS zu zentrieren. Konforme Browser sollten Tabellen zentrieren, wenn der linke und der rechte Rand gleich sind. Der einfachste Weg, dies zu erreichen, besteht darin, den linken und rechten Rand auf "auto" zu setzen. Man könnte also in ein Stylesheet schreiben:

table
{ 
    margin-left: auto;
    margin-right: auto;
}

Der am Anfang dieser Antwort erwähnte Artikel bietet Ihnen jedoch die andere Möglichkeit, eine Tabelle zu zentrieren.

Eine elegante CSS-Cross-Browser-Lösung: Dies funktioniert in MSIE 6 (Quirks and Standards), Mozilla, Opera und sogar Netscape 4.x ohne explizite Breiteneinstellung:

div.centered 
{
    text-align: center;
}

div.centered table 
{
    margin: 0 auto; 
    text-align: left;
}


<div class="centered">
    <table>
    …
    </table>
</div>
180
VonC

Versuche dies:

<table width="200" style="margin-left:auto;margin-right:auto">
14
jalbert

Einfach. IE6 und höher zentrieren Ihre Tabelle gerne mit "margin: 0 auto;" wenn nur die Seite im "Standard" -Modus gerendert wird. Dazu benötigen Sie eine gültige Doctype-Deklaration, z

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

oder

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Zwar weigert sich IE5.5 und niedriger immer noch, die Tabelle zu zentrieren, aber vielleicht können Sie damit leben, besonders wenn die Seite noch funktionsfähig ist und die Tabelle linksbündig ausgerichtet ist. Ich denke, Benutzer von IE5.5 und niedriger sind an einige seltsam aussehende Websites ziemlich gewöhnt - aber Sie müssen trotzdem sicherstellen, dass diese visuellen Störungen Ihre Website nicht unbrauchbar machen.

Viel Spaß beim Codieren!

EDIT: Entschuldigung, ich sollte vielleicht darauf hinweisen, dass Sie keinen "strengen" Doctype benötigen, um IE6 und höher in den "Standard" -Rendermodus zu bringen. Ich erkannte, dass es aus den Beispielen für Doctypen, die ich oben gepostet hatte, so aussehen könnte. Zum Beispiel funktioniert diese Doctype-Deklaration natürlich genauso:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
Ola Tuvesson

Obwohl dies in der heutigen Welt eine Irrlehre sein könnte, haben Sie in der Vergangenheit den folgenden Nicht-CSS-Code ausgeführt. Dies funktioniert in allen Browsern bis einschließlich der heutigen, aber - wie gesagt - ist es eine Irrlehre in der heutigen Welt:

<center>
<table>
   ...
</table>
</center>

Was Sie brauchen, ist eine Art zu sagen, dass Sie eine Tabelle zentrieren möchten und die Person einen älteren Browser verwendet. Fügen Sie dann die Befehle "<center>" um die Tabelle ein. Andernfalls verwenden Sie CSS.

Überraschenderweise können Sie - wenn Sie alles im BODY-Bereich zentrieren möchten - einfach den Standard verwenden

text-align: center;

der Befehl css und in IE8 (zumindest) zentriert er alles auf der Seite, einschließlich Tabellen.

2
Mark Manning
style="text-align:center;" 

(Ich glaube)

oder man könnte es einfach ignorieren, es funktioniert immer noch

0
Steven A. Lowe

Das sollte funktionieren:

<div style="text-align:center;">
  <table style="margin: 0 auto;">
    <!-- table markup here. -->
  </table>
</div>
0
Matt Howell
<style>
    .abc {
        text-align: center;
    }
</style>

<table class="abc">
    <tr>
        <td>Item1</td>
        <td>Item2</td>
    </tr>
</table>

Ich lerne gerade das und was schließlich für mich funktionierte, war, zuerst einen Tisch mit drei Reihen zu machen. Stellen Sie den Rand für die linke und rechte Reihe auf 50% ein. Fügen Sie dann eine einzeilige Tabelle mit fester Breite in die "Tabellendaten" der mittleren "Tabellenzeile" ein.

0
sean

Grundsätzlich funktioniert es wie folgt:

<table align="center">
...

Mit CSS können Sie dies jedoch besser tun. Dies ist ein besserer Ansatz für die Verwendung von CSS, da es ein dynamisches Verhalten für eine Webseite bietet und reaktionsschneller ist.

  <table style="text-align:center;">

Wenn Sie nur eine Tabelle auf einer Seite anzeigen müssen, können Sie die Ausrichtung der Body-Tags nur wie unten gezeigt vornehmen.

 <body style="text-align:center;">
<table>
  ...
</table>

Wenn Sie weitere Vorschläge wünschen, lassen Sie es mich bitte wissen. Wird Ihnen sicherlich dabei helfen. Auch mit den Funktionen von bootstrap wäre dies einfacher und interaktiver.

0
Gourav Goutam

Zum Div-Stil hinzufügen:

width: fit-content;
0
Khaled Mohab