Grenzen aus HTML-Tabelle entfernen

1. Verwenden Sie die CSS-Eigenschaft border-collapse, um den Rahmen von Zellen in Tabellen in HTML zu entfernen
2. Setzen Sie die CSS-Eigenschaft border auf none, um den Rahmen aus einer Tabelle in HTML zu entfernen

In diesem Artikel werden Methoden zum Entfernen von Rahmen aus der HTML-Tabelle vorgestellt. Wir werden lernen, die Ränder der Zellen zu entfernen, während Sie Bilder in die Tabellenzellen einfügen.

Verwenden Sie die CSS-Eigenschaft border-collapse, um den Rahmen von Zellen in Tabellen in HTML zu entfernen

Wir können die HTML-Tabelle verwenden, um Bilder einzufügen. Wir können den Elementen in der Tabelle Klassen zuordnen und die Attribute der Klassen in CSS definieren. Diese Methode hilft uns, die Höhe und Breite des td-Elements festzulegen und das Bild mit der Eigenschaft background-image einzufügen. So können wir in jedes der td-Elemente das Bild einfügen. Beim Einfügen der Bilder auf diese Weise können wir den Rahmen jeder Zelle in der Tabelle sehen. Vielleicht möchten wir die Rahmen in den Zellen und der Tabelle entfernen, damit unsere Bilder besser aussehen. Dazu können wir die CSS-Eigenschaft border-collapse verwenden. Wir können den Wert der Eigenschaft auf collapse setzen, damit der Rand der Zellen zusammengeführt wird. Dadurch wird der Zellenabstand auf 0 gesetzt. Der Rahmen wird nicht angezeigt, wenn wir das Attribut border im table-Tag nicht verwenden.

Schreiben Sie beispielsweise in HTML das Tag <table> und dann das Tag <tr> hinein. Schreiben Sie in das Tag <tr> drei <td>-Tags und schreiben Sie die Klassen left, middle und right in die erste, zweite und dritte Klasse. Wählen Sie in CSS das Tag table aus und setzen Sie die Eigenschaft border-collapse auf collapse. Wählen Sie dann alle drei Klassen left, middle und right auf einmal aus und legen Sie Höhe, Breite und ein Hintergrundbild fest.

Im folgenden Beispiel haben wir drei td-Elemente erstellt und Bilder in diese Elemente eingefügt. Mit der Eigenschaft border-collapse haben wir die Ränder der Zellen entfernt. Wir können die Eigenschaft border-collapse entfernen, um zu sehen, wie der Rand der Zellen das Bild aussehen lässt.

Beispielcode:

<table>
 <tr>
 <td class="left"></td>
 <td class="middle"></td>
 <td class="right"></td>
 </tr> 
</table>

table{
 border-collapse:collapse;
}
.left, .middle, .right
{
 width: 200px;
 height: 280px;
 background-image: url('https://loremflickr.com/212/280'); 
}

Setzen Sie die CSS-Eigenschaft border auf none, um den Rahmen aus einer Tabelle in HTML zu entfernen

Wir können die Eigenschaft border auf none setzen, um den Rahmen aus einer HTML-Tabelle zu entfernen. Die Eigenschaft ist eine Abkürzung für verschiedene Grenz-Eigenschaften. Diese verschiedenen Eigenschaften sind border-width, border-style und border-color. Eine Grenze wird nicht gebildet, wenn wir die Eigenschaft border verwenden und sie auf none setzen.

Beispielsweise können wir die oben erstellte Tabelle verwenden. Wir können das obige CSS ein wenig modifizieren, um unser Ziel mit der Eigenschaft border zu erreichen. Wir können die Tags table, tr und td aus der Tabelle auswählen und die Eigenschaft border auf none setzen. Auf diese Weise können wir in HTML den Rahmen aus einer Tabelle und den Rahmen aus den Zellen der Tabelle entfernen.

Beispielcode:

table, tr, td{
 border:none;
}

<table>
 <tr>
 <td class="left"></td>
 <td class="middle"></td>
 <td class="right"></td>
 </tr> 
</table>