CSS-Methode zum horizontalen Ausrichten der Tabelle

96

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 warnt jedoch in dieser Zeile:

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

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

html css alignment css-tables Alexander Prokofyev
quelle

2

Also, für welche Lösung haben Sie sich am Ende entschieden?

Ola Tuvesson

183

Steven hat theoretisch recht :

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 Möglichkeit, eine Tabelle zu zentrieren.

Eine elegante Cross-Browser-Lösung für CSS: Dies funktioniert sowohl in MSIE 6 (Quirks and Standards), Mozilla, Opera als auch in Netscape 4.x, ohne explizite Breiten festzulegen:

div.centered 
{
    text-align: center;
}

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


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

VonC
quelle

Sie können die Tabelle mit dem Rand zentrieren: 0 auto; in IE6 und höher, wenn Sie sicherstellen, dass Ihre Seite eine gültige Doctype-Deklaration hat.

Ola Tuvesson

@Marco: Ich habe diese Informationen momentan nicht, aber das könnte eine gute Grundlage für eine Frage zu StackOverflow sein.

VonC

1

Du hast vollkommen recht. TABELLE muss keine Breite angeben, um horizontal zentriert zu werden. Ich habe es getestet. Bei DIV muss eine Breite angegeben werden, um eine horizontale Zentrierung zu erzielen.

Marco Demaio

17

Versuche dies:

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

Jalbert
quelle

2

Einfach. IE6 und höher zentriert Ihre Tabelle gerne mit "margin: 0 auto;" wenn nur die Seite im "Standard" -Modus gerendert wird. Um dies zu erreichen, 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 weiterhin, die Tabelle zu zentrieren, aber vielleicht können Sie damit leben, insbesondere wenn die Seite weiterhin funktionsfähig ist und die Tabelle linksbündig ausgerichtet ist. Ich denke, dass Benutzer von IE5.5 und darunter mittlerweile ziemlich an einige seltsam aussehende Websites gewöhnt sind - aber Sie müssen trotzdem sicherstellen, dass diese visuellen Störungen Ihre Website nicht unbrauchbar machen.

Viel Spaß beim Codieren!

EDIT: Sorry, ich sollte vielleicht darauf hinweisen, dass Sie keinen "strengen" Doctype haben müssen, um IE6 und höher in den "Standard" -Rendering-Modus zu bringen. Aus den oben veröffentlichten Doctype-Beispielen wurde mir klar, dass dies so aussehen könnte. Zum Beispiel funktioniert diese Doctype-Deklaration natürlich gleichermaßen:

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

Ola Tuvesson
quelle

2

Obwohl es in der heutigen Welt eine Häresie sein könnte, haben Sie in der Vergangenheit den folgenden Nicht-CSS-Code verwendet. Dies funktioniert in allen Bereichen bis einschließlich der heutigen Browser, aber - wie gesagt - in der heutigen Welt ist es eine Häresie:

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

Was Sie brauchen, ist eine Möglichkeit zu erkennen, dass Sie eine Tabelle zentrieren möchten und die Person einen älteren Browser verwendet. Fügen Sie dann die Befehle "<center>" in die Tabelle ein. Ansonsten - benutze CSS.

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

text-align: center;

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

Mark Manning
quelle

0

style="text-align:center;"

(Meiner Ansicht nach)

oder Sie könnten es einfach ignorieren, es funktioniert immer noch

Steven A. Lowe
quelle

0

Das sollte funktionieren:

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

Matt Howell
quelle

0

Ich lerne das gerade und was schließlich für mich funktioniert hat, war, zuerst eine Tabelle mit drei Zeilen zu erstellen. 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.

quelle

0

<style>
    .abc {
        text-align: center;
    }
</style>

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

Chandra Shekhar Sharma
quelle

0

Grundsätzlich funktioniert es wie:

<table align="center">
...

Sie können dies jedoch besser mit CSS tun. Dies ist ein besserer Ansatz für die Verwendung von CSS, da es einer Webseite ein dynamisches Verhalten verleiht und darauf reagiert.

  <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 ausführen.

 <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 Bootstrap-Funktionen wäre dies einfacher und interaktiver.

Gourav Goutam
quelle

0

Zum div-Stil hinzufügen:

width: fit-content;

Khaled Mohab
quelle

CSS-Methode zum horizontalen Ausrichten der Tabelle

Antworten: