Wie kann ich verhindern, dass meine HTML-Tabelle falsch formatiert wird?-HTML-Tutorial-php.cn

Wie kann ich verhindern, dass meine HTML-Tabelle falsch formatiert wird?

WBOY

Freigeben： 2023-08-19 21:21:24

nach vorne

1141 Leute haben es durchsucht

Wie kann ich verhindern, dass meine HTML-Tabelle falsch formatiert wird?

Es gibt eine gut unterstützte, aber wenig bekannte, äußerst nützliche CSS-Eigenschaft für Tabellen. Es ändert die Art und Weise, wie Tabellen angezeigt werden, sodass Sie ein zuverlässigeres und konsistenteres Layout erhalten. Die richtige Formatierung von Tabellen ist von Vorteil, da sie die Webseite benutzerfreundlicher macht und den Benutzern hilft, die Informationen in der Tabelle klarer zu verstehen.

In diesem Artikel erfahren Sie, wie Sie „Fehler“ bei der Tabellenformatierung in HTML verhindern. Bevor wir uns mit diesem Artikel befassen, werfen wir einen kurzen Blick auf Tabellen in HTML.

HTML-Tabelle

HTML-Tabellen werden mit dem Tag

erstellt, wobei das Tag zum Erstellen von Tabellenzeilen und das Tag

verwendet wird. Elemente unter

sind standardmäßig normaler Text und linksbündig.

HTML-Tabellen ermöglichen es Webseitenautoren, Text, Bilder, Links, andere Tabellen und andere Daten in Zellen in Zeilen und Spalten anzuordnen.

Syntax

Das Folgende ist die Syntax der HTML-Tabelle

<table>…</table>

Nach dem Login kopieren

Betrachten Sie das folgende Beispiel, um besser zu verstehen, wie Sie „falsche“ HTML-Tabellenformatierungen vermeiden können.

Beispiel

Im folgenden Beispiel verwenden wir CSS in Verbindung mit der zuvor genannten Tabellenhöhe, um „falsche“ Tabellenformatierungen zu vermeiden.

<!DOCTYPE html>
<html>
   <body>
      <style>
      table, td {
         width: 100%;
         border: 2px solid #82E0AA ;
         border-collapse: collapse;
      }
      td {
         height: 52px;
         width: 52%;
      }
      td[rowspan="2"] {
         height: 110px;
      }
      </style>
      <table>
         <tbody>
            <tr>
               <td colspan="2">1.MSD</td>
            </tr>
            <tr>
               <td rowspan="2">2.VIRAT</td>
               <td>3.YUVI</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

Nach dem Login kopieren

Wenn das Skript ausgeführt wird, generiert es eine Ausgabe, die eine Tabelle mit Daten im richtigen Format für die Anzeige auf der Webseite enthält.

Beispiel

Betrachten Sie das folgende Beispiel: Wir möchten ein Bild als Hintergrundbild einer Tabelle haben. Wir werden es mithilfe von CSS hinzufügen, um „Fehler“ im Tabellenformat zu vermeiden.

<!DOCTYPE html>
<html>
   <body>
      <table border = "2" bordercolor = "#BB8FCE" background = "https://www.tutorialspoint.com/images/asp.net_mvc_icon.svg">
         <tr>
            <th>Stream</th>
            <th>Course</th>
            <th>Amount</th>
         </tr>
         <tr>
            <td rowspan = "2">Technical</td>
            <td>HTML</td><td>6000</td>
         </tr>
         <tr>
            <td>JAVA</td>
         </tr>
      </table>
   </body>
</html>

Nach dem Login kopieren

Nachdem Sie den obigen Code ausgeführt haben, wird das Ausgabefenster angezeigt, das das Bild mit den Daten zeigt und als Hintergrund zur auf der Webseite angezeigten Tabelle hinzugefügt wird.

Beispiel

Schauen wir uns Folgendes an: Wir werden die Höhe und Breite der Tabelle verwenden, um die Tabelle in unserem gewünschten Format zu erstellen und eine „falsche“ Tabellenformatierung zu vermeiden.

<!DOCTYPE html>
<html>
   <body>
      <table border = "2" bordercolor="#CCCCFF" width = "300" height = "100">
         <tr>
            <td>1</td>
            <td>2</td>
         </tr>
         <tr>
            <td>3</td>
            <td>4</td>
         </tr>
      </table>
   </body>
</html>

Nach dem Login kopieren

Wenn das Skript ausgeführt wird, generiert es eine Ausgabe, die eine auf der Webseite gezeichnete Tabelle im gewünschten Format mit angewendetem CSS enthält.

Das obige ist der detaillierte Inhalt vonWie kann ich verhindern, dass meine HTML-Tabelle falsch formatiert wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!