Verwendung von Divs in Tabellen

Trotz ihres Status als Todfeinde können Divs und Tabellen zusammenarbeiten, wenn Sie sie dazu brauchen. Aufgrund der Möglichkeit, Tabellen vertikal zu zentrieren, ist es eine ziemlich beliebte Technik, eine einzelne Tabellenzelle mit horizontaler und vertikaler Zentrierung zu verwenden, um den Seiteninhalt absolut in einem Browserfenster zu zentrieren (hauptsächlich nur für Inhalte mit fester Größe nützlich).

Eine wichtige Sache, die Sie beachten sollten, wenn Sie ein Div in eine Tabelle einfügen, ist, dass das Div innerhalb einer bestimmten Tabellenzelle leben muss, also **innerhalb** eines `td`- oder `th`-Elements, das sich **innerhalb** eines `tr`-Elements befindet.

Um zu sehen, was ich meine, sehen Sie sich eine Tabelle wie diese an

<table border=1 width=200 cellpadding=10>
  <tr>
    <td>
      <p>I'm text in a cell.</p>
    </td>
    <td>
      <p>I'm text in a cell.</p>
    </td>
    <td>
      <p>I'm text in a cell.</p>
    </td>
  </tr>
  <tr>
    <td>
      <p>I'm text in a cell.</p>
    </td>
    <td>
      <p>I'm text in a cell.</p>
    </td>
    <td>
      <p>I'm text in a cell.</p>
    </td>
  </tr>
</table>

Wenn Sie nun eine weitere Zeile zu dieser Tabelle hinzufügen und ein Div hineinlegen möchten, könnten Sie Folgendes tun:

<table border=1 width=200 cellpadding=10>
  <tr>
    <td>
      <p>I'm text in a cell.</p>
    </td>
    <td>
      <p>I'm text in a cell.</p>
    </td>
    <td>
      <p>I'm text in a cell.</p>
    </td>
  </tr>
  <tr>
    <td>
      <p>I'm text in a cell.</p>
    </td>
    <td>
      <p>I'm text in a cell.</p>
    </td>
    <td>
      <p>I'm text in a cell.</p>
    </td>
  </tr>
  <tr>
    <div id="my_box">
      <p>I'm text in a div.</p>
    </div>
  </tr>
</table>

Aber das zerstört das Layout! Seltsam, aber wahr. Sehen Sie unten

Was Sie tun müssen, ist sicherzustellen, dass das Div in einer tatsächlichen Tabellenzelle, einem `td`- oder `th`-Element, enthalten ist, also tun Sie das

<tr>
  <td colspan=3>
    <div id="my_box">
      <p>I'm text in a div.</p>
    </div>
  </td>
</tr>

Und Sie sollten das erhalten, was Sie erwarten: **ein vollständig gestaltbares Div** innerhalb einer Tabelle

Dies kann auch bei der Verwendung von absoluter Positionierung innerhalb von Tabellenzellen hilfreich sein. Siehe diesen Artikel.