Wie kann man einen Rahmen zur HTML-Tabelle hinzufügen

Um einem HTML-Tag <table> einen Rahmen hinzuzufügen, sollen Sie zuerst wissen, wie man eine HTML-Tabelle erstellt.

Hier erfahren Sie, wie Sie eine HTML-Tabelle erstellen können.

Nach der Erstellung einer HTML-Tabelle sollen Sie ihr einen Rahmen hinzufügen, da die Rahmen voreingestellt nicht hinzugefügt werden. Lassen Sie uns ein Beispiel für eine Tabelle ohne Rahmen sehen, um den Unterschied zu sehen:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <table>
      <tr>
        <th>Person</th>
        <th>Alter</th>
      </tr>
      <tr>
        <td>Ann</td>
        <td>19</td>
      </tr>
      <tr>
        <td>Susie</td>
        <td>22</td>
      </tr>
    </table>
  </body>
</html>

Das Element <table> hat ein Attribut border, welches in HTML5 nicht verwendet wird. Wir empfehlen daher, die CSS-Eigenschaft border zu verwenden, um Ihren Tabellen einen Rahmen hinzuzufügen. Um Ihrer Tabelle einen Rahmen hinzuzufügen, müssen Sie für Ihre Tabelle das Tag <style> definieren.

Vergessen Sie nicht, auch für die Tags <th> und <td> Rahmen hinzuzufügen, um eine vollständige Tabelle zu erhalten. Setzen Sie auch die Eigenschaft border-collapse (wenn Sie border-collapse nicht definieren, wird voreingestellt border-collapse: separate verwendet).

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      table, th, td {
      padding: 10px;
      border: 1px solid black; 
      border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>Person</th>
        <th>Alter</th>
      </tr>
      <tr>
        <td>Ann</td>
        <td>19</td>
      </tr>
      <tr>
        <td>Susie</td>
        <td>22</td>
      </tr>
    </table>
  </body>
</html>

Wie kann man den Rahmenstil von HTML-Tabellen mit CSS ändern

Sie können Ihre Tabelle mithilfe von CSS-Eigenschaften border, border-width, border-style, border-color, border-color stylen. Siehen Sie ein Beispiel, um das sichtbare Ergebnis dieser Eigenschaften zu erhalten:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      table {border-style: ridge;  border-width: 150px; border-color: #8ebf42; background-color: #d9d9d9;}
      th  {border:5px solid #095484;}   
      td {border:20px groove #1c87c9;}
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>Person</th>
        <th>Alter</th>
      </tr>
      <tr>
        <td>Ann</td>
        <td>19</td>
      </tr>
      <tr>
        <td>Susie</td>
        <td>22</td>
      </tr>
    </table>
  </body>
</html>

Wenn Sie nicht möchten, dass der Rand um die Tabelle herum verläuft (oder wenn Sie unterschiedliche Ränder auf jeder Seite der Tabelle möchten, können Sie eine der folgenden Eigenschaften verwenden: border-top, border-right, border-bottom und border-left. Betrachten Sie bitte ein weiteres Beispiel:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      table {
      border-collapse:collapse;
      }
      td, th { 
      padding: 10px; 
      border-bottom: 2px solid #8ebf42; 
      text-align: center;
      }
    </style>
    <table>
      <tr>
        <th>Person</th>
        <th>Alter</th>
      </tr>
      <tr>
        <td>Ann</td>
        <td>19</td>
      </tr>
      <tr>
        <td>Susie</td>
        <td>22</td>
      </tr>
    </table>
    </body>
</html>

Wie kann man abgerundete Grenzen haben

Sie können auch abgerundete Grenzen haben, indem Sie die CSS-Eigenschaft border-radius verwenden. Vergessen Sie nicht, die Eigenschaft border-collapse property zu entfernen, damit es ordnungsgemäß funktioniert. Sehen Sie ein Beispiel, wo alle Tabellenelemente gerundet sind:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      table, td, th { 
      padding: 10px; 
      border: 2px solid #1c87c9;
      border-radius: 5px;
      background-color: #e5e5e5;
      text-align: center;
      }
    </style>
    <table>
      <tr>
        <th>Person</th>
        <th>Alter</th>
      </tr>
      <tr>
        <td>Ann</td>
        <td>19</td>
      </tr>
      <tr>
        <td>Susie</td>
        <td>22</td>
      </tr>
    </table>
    </body>
</html>

Wie kann man Rahmen zu den Elementen <p>, <h2> oder <div> hinzufügen

Auf die gleiche Weise können Sie anderen HTML-Elementen einen Rahmen hinzufügen. Sehen Sie ein weiteres Beispiel an, wie man Grenzen zu den Elementen <p>, <h2> und <div> hinzufügen kann.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      h2, div, p {padding: 10px;}
      h2  {border: 3px double #1c87c9; background-color: #d9d9d9;}
      div {border-left: 5px solid #1c87c9; background-color: #cccccc}
      p {border: 10px groove #8ebf42;}
    </style>
  </head>
  <body>
    <h2>Beispiel mit Border</h2>
    <div> Div Beispiel für die Eigenschaft border.</div>
    <p>Ein Absatz mit border.</p>
  </body>
</html>

Wenn Sie eine abgerundete Grenze für Absätze machen möchten, folgen Sie diesem Beispiel, um zu erfahren, wie Sie das tun können. Finden Sie auch heraus, welchen Wert die Eigenschaft border-radius haben muss, damit Sie Ihr bevorzugtes Ergebnis erhalten.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      p {
      padding: 10px;
      }
      p.normal {
      border: 2px solid #1c87c9;
      }
      p.round1 {
      border: 2px solid #1c87c9;
      border-radius: 5px;
      }
      p.round2 {
      border: 2px solid #1c87c9;
      border-radius: 8px;
      }
      p.round3 {
      border: 2px solid #1c87c9;
      border-radius: 12px;
      }
    </style>
  </head>
  <body>
    <h2>Abgerundete Rahmen</h2>
    <p class="normal">Normale Rahmen</p>
    <p class="round1">Runde Rahmen</p>
    <p class="round2">Rounder Rahmen</p>
    <p class="round3">Rundlichste Rahmen</p>
  </body>
</html>