Heim >Web-Frontend >HTML-Tutorial >Wie kann ich verhindern, dass meine HTML-Tabelle falsch formatiert wird?
Wie kann ich verhindern, dass meine HTML-Tabelle falsch formatiert wird?
- WBOYnach vorne
- 2023-08-19 21:21:241180Durchsuche
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
| 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. SyntaxDas Folgende ist die Syntax der HTML-Tabelle <table>…</table> Betrachten Sie das folgende Beispiel, um besser zu verstehen, wie Sie „falsche“ HTML-Tabellenformatierungen vermeiden können. BeispielIm 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>
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. BeispielBetrachten 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>
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. BeispielSchauen 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>
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!