Text in Tabellenzelle zentrieren

Lesezeit: 3 Minuten

Benutzer-Avatar
Jack Stevens

Ich finde keine Antwort auf mein Problem. Ich habe eine Tabelle mit zwei Zeilen und zwei Spalten (wie der unten gezeigte Code). Wie richte ich den Text in bestimmten Zellen zentriert aus? Ich möchte den Text in einer oder zwei der Zellen zentrieren – nicht in allen Zellen.

<div style="text-align: center;">
    <table style="margin: 0px auto;" border="0">
        <tbody>
            <tr>
                <td>Cell 1</td>
                <td>Cell 2</td>
            </tr>
            <tr>
                <td>Cell 3</td>
                <td>Cell 4</td>
            </tr>
        </tbody>
    </table>
</div>

Benutzer-Avatar
Cᴏʀʏ

Ich würde die Verwendung von CSS dafür empfehlen. Sie sollten eine CSS-Regel erstellen, um die Zentrierung zu erzwingen, zum Beispiel:

.ui-helper-center {
    text-align: center;
}

Und füge dann die hinzu ui-helper-center class zu den Tabellenzellen, für die Sie die Ausrichtung steuern möchten:

<td class="ui-helper-center">Content</td>

BEARBEITEN: Da diese Antwort akzeptiert wurde, fühlte ich mich verpflichtet, die Teile, die einen Flammenkrieg in den Kommentaren verursachten, zu bearbeiten und schlechte und veraltete Praktiken nicht zu fördern.

In Gabes Antwort erfahren Sie, wie Sie die CSS-Regel in Ihre Seite einfügen.

  • CSS 1 wurde vor fast 15 Jahren zur Empfehlung. Verwenden Sie nicht das align-Attribut.

    – QUentin

    3. Oktober 2011 um 22:00 Uhr

  • @Quentin – Vereinbart über “nicht ‘ausrichten’ verwenden”. Aber Cory Larson selbst empfahl das CSS-Äquivalent gegenüber “align=center”. Ich hoffe, Sie markieren ihn nicht (und wenn Sie es getan haben, ziehen Sie bitte in Betracht, es zu ändern. OK?)

    – paulsm4

    3. Oktober 2011 um 22:03 Uhr

  • @paulsm4 — Ich habe es nicht getan, und er hatte es nicht getan, als ich den Kommentar abgegeben habe.

    – QUentin

    3. Oktober 2011 um 22:04 Uhr

  • Vielen Dank für all Ihre Vorschläge. Ich weiß sehr wenig über CSS. Wo sollte ich die CSS-Regel in meinem Code platzieren?

    – Jack Stevens

    3. Oktober 2011 um 22:23 Uhr

  • @Jack – im Kopfbereich Ihres HTML-Dokuments. Idealerweise möchten Sie eine CSS-Include-Datei erstellen und sie aus dem Header verlinken: htmlhelp.com/reference/css/style-html.html

    – Daniel Szabo

    3. Oktober 2011 um 22:44 Uhr

Benutzer-Avatar
Gabe

Wie wäre es einfach (Bitte beachten Sie, überlegen Sie sich einen besseren Namen für den Klassennamen, dies ist nur ein Beispiel):

.centerText{
   text-align: center;
}


<div>
   <table style="width:100%">
   <tbody>
   <tr>
      <td class="centerText">Cell 1</td>
      <td>Cell 2</td>
    </tr>
    <tr>
      <td class="centerText">Cell 3</td>
      <td>Cell 4</td>
    </tr>
    </tbody>
    </table>
</div>

Beispiel hier

Sie können die platzieren css in einer separaten Datei, was empfohlen wird. In meinem Beispiel habe ich eine Datei namens erstellt styles.css und platzierte meine css Regeln darin. Fügen Sie es dann in das HTML-Dokument ein <head> Abschnitt wie folgt:

<head>
    <link href="https://stackoverflow.com/questions/7641130/styles.css" rel="stylesheet" type="text/css">
</head>

Die Alternative, keine separate CSS-Datei zu erstellen, überhaupt nicht zu empfehlen … Erstellen <style> Blockieren Sie in Ihrem <head> im HTML-Dokument. Dann platzieren Sie einfach Ihre Regeln dort.

<head>
 <style type="text/css">
   .centerText{
       text-align: center;
    }
 </style>
</head>

1158600cookie-checkText in Tabellenzelle zentrieren

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy