Hoe centreer ik de inhoud van een HTML-tabel?

Ik gebruik een HTML <table>en ik wil de tekst van <td>uitlijnen met het midden in elke cel.

Hoe centreer ik de tekst horizontaal en verticaal?


Antwoord 1, autoriteit 100%

Hier is een voorbeeld met CSS en inline styleattributen:

td 
{
    height: 50px; 
    width: 50px;
}
#cssTable td 
{
    text-align: center; 
    vertical-align: middle;
}
<table border="1">
    <tr>
        <td style="text-align: center; vertical-align: middle;">Text</td>
        <td style="text-align: center; vertical-align: middle;">Text</td>
    </tr>
</table>
<table border="1" id="cssTable">
    <tr>
        <td>Text</td>
        <td>Text</td>
    </tr>
</table>

Antwoord 2, autoriteit 16%

De CSS om tekst in uw td-elementen te centreren is

td {
  text-align: center;
  vertical-align: middle;
}

Antwoord 3, autoriteit 8%

Probeer dit in je CSS-bestand te zetten.

td {
    text-align: center;
    vertical-align: middle;
}

Antwoord 4, autoriteit 8%

HTML in lijnstijlvoorbeeld:

<td style='text-align:center; vertical-align:middle'></td> 

CSS-bestand voorbeeld:

td {
    text-align: center;
    vertical-align: middle;
}

Antwoord 5, Autoriteit 3%

<td align="center" valign="center">textgoeshere</td>

is het enige juiste antwoord IMHO, sinds uw werken met tabellen die oude functionaliteit is die het meest gebruikte wordt gebruikt voor e-mailopmaak. Dus je beste gok is om niet alleen stijl te gebruiken, maar inline stijl en bekende tabel-tags.


Antwoord 6

Selector & GT; Kind:

.text-center-row>th,
.text-center-row>td {
  text-align: center;
}
<table border="1" width='500px'>
  <tr class="text-center-row">
    <th>Text</th>
    <th>Text</th>
    <th>Text</th>
    <th>Text</th>
  </tr>
  <tr>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
  </tr>
  <tr class="text-center-row">
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
  </tr>
</table>

Antwoord 7

Het volgende werkte voor mij om de inhoud (multi-line) in een lijst-tabel

verticaal uit te lijnen

.. list-table::
   :class: longtable
   :header-rows: 1
   :stub-columns: 1
   :align: left
   :widths: 20, 20, 20, 20, 20
   * - Classification
     - Restricted
     - Company |br| Confidential
     - Internal Use Only
     - Public
   * - Row1 col1
     - Row1 col2
     - Row1 col3 
     - Row1 col4
     - Row1 col5

Het gebruik van thema Overschrijft. CSSS-optie Ik heb gedefinieerd:

.stub {
       text-align: left;
       vertical-align: top;
}

In het thema dat ik ‘Python-Docs-Theme’ gebruik, wordt het celinvoer gedefinieerd als ‘Stub’-klasse. Gebruik uw browserontwikkelingsmenu om te inspecteren wat uw themases voor celinhoud is en dat dienovereenkomstig bijwerkt.


Antwoord 8

<td align="center"valign="center">textgoeshere</td>

meer op Valign

Other episodes