Heim > Web-Frontend > HTML-Tutorial > Was ist eine Tabelle in HTML?

Was ist eine Tabelle in HTML?

清浅
Freigeben: 2019-03-12 13:41:58
Original
16986 Leute haben es durchsucht

Das Tabellen-Tag wird in HTML verwendet, um eine Tabelle zu definieren. Es und ein oder mehrere tr-, th-, td-Elemente bilden eine HTML-Tabelle. In der Tabelle können Sie Rahmen und Abstände dafür festlegen

In HTML kann das Tabellen-Tag zum Definieren von HTML-Tabellen verwendet werden. Im folgenden Artikel werden wir das Tabellen-Tag im Detail vorstellen. Es hat einen gewissen Referenzeffekt und ich hoffe, dass es für alle hilfreich ist.

Was ist eine Tabelle in HTML?

[Empfohlene Kurse: HTML-Tutorial]

Eine einfache HTML-Tabelle besteht aus dem Tabellen-Tag und einem oder mehreren tr-, th-, td-Elementen.

Tabellen-Tag

Tabellen-Tag kann eine einfache Tabelle definieren. Es wird hauptsächlich zur Steuerung des äußeren Randes der Tabelle verwendet Wird verwendet, um den äußeren Rand der Tabelle festzulegen. Das Attribut „border“ wird verwendet, um den Rand der Tabelle festzulegen, und das Attribut „cellspacing“ wird verwendet, um den Leerraum zwischen den Zellen anzugeben.

tr-Teil:

tr wird hauptsächlich zum Teilen verwendet Die Zeilen in der Tabelle müssen im Allgemeinen nur die Höhe festlegen

td-Teil:

td wird verwendet, um die Attribute jeder Zelle zu steuern, aber jede Zelle kann Die oberen, unteren, linken und rechten Ränder können separat gesteuert werden, einschließlich Füllattributen.

th Teil: Die Verwendung von

th ist die gleiche wie die von td, außer dass sie zur Unterscheidung des Tabellenkopfes verwendet wird.

Hinweis: Die Verwendung von Prozentsätzen und Pixeln in Tabellen entspricht den Einheiten

Beispiel:

<table border="1px solid #ccc">
        <h4>php中文网</h4>
     <tr>
        <td>教程</td>
        <td>教程地址</td>
   </tr>
   <tr>
        <td>php教程</td>
        <td>//m.sbmmt.com</td>
          
   </tr>
   <tr>
        <td>html教程</td>
        <td>//m.sbmmt.com</td>
            
    </tr>
    </table>
Nach dem Login kopieren

Rendering:

Was ist eine Tabelle in HTML?

Zeilen- und spaltenübergreifende Verarbeitung von Tabellen

Wir können es auch spaltenübergreifend zusammenführen, indem wir das colspan-Attribut der Zelle festlegen . Sie können auch das Rowspan-Attribut der Zelle festlegen, um sie zeilenübergreifend zusammenzuführen, wie unten gezeigt

Zelle erstreckt sich über zwei Spalten

 <tr>
        <td colspan="2">php教程</td>
        <td>//m.sbmmt.com</td>
          
   </tr>
   <tr>
        <td colspan="2">html教程</td>
        <td>//m.sbmmt.com</td>
            
    </tr>
     <tr>
        <td colspan="2">css教程</td>
        <td>//m.sbmmt.com</td>    
   </tr>
Nach dem Login kopieren

Das Rendering ist wie folgt:

Was ist eine Tabelle in HTML?

Die Zelle erstreckt sich über zwei Zeilen

 <tr>
        <td  rowspan="2">教程</td>
        <td>教程地址</td>
   </tr>
Nach dem Login kopieren

Die Darstellung ist wie folgt:

Image 021.png

Randeinstellung

Standardmäßig hat die Tabelle keinen Rand. Der Rand wird erst nach dem Festlegen angezeigt das Rahmenattribut für das Tabellen-Tag, aber diese Art von Rahmen sieht aufgrund des Abstands hässlich aus, daher können wir das Kollaps-Attribut verwenden, um den Rahmenabstand zu entfernen

Beispiel:

<table border="1" style="border-collapse:collapse">
 </table>
Nach dem Login kopieren

Der Effekt ist wie folgt:

Image 022.png

Hinweis: In der Tabelle bezieht sich die Breite auf die Breite der gesamten Tabelle, während sich die Breite von td auf die Breite ohne die bezieht interner Inhalt

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle hilfreich ist, um Tabellen-Tags zu lernen.

Das obige ist der detaillierte Inhalt vonWas ist eine Tabelle in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage