HTML-Tabellen neu entdecken

巴扎黑
Freigeben: 2017-04-05 17:19:25
Original
1331 Leute haben es durchsucht

Basierend auf einigen meiner jüngsten Praktiken und nachdem ich mit einigen Lesern über die Verwendung von HTML-Tabellen gesprochen habe, habe ich beschlossen, diesen Artikel zu schreiben. Generell ist mir aufgefallen, dass sie aufgrund irreführender Informationen eine vorgefasste Abneigung gegen die Verwendung von Tabellen hegen. Tatsächlich werden viele Leute sagen: „Ich sehe, dass Tabellen niemals verwendet werden sollten“, aber das ist absolut falsch! Dieser Vorschlag gilt nur für die Verwendung von HTML-Tabellen zum Definieren des Layouts einer Webseite. Tabellen eignen sich jedoch perfekt zum bequemen Anordnen von Zeilen und Spalten mit Dateninformationen. Wenn Sie tabellarische Daten auf einer Seite anzeigen müssen, müssen Sie sie verwenden! Warum nicht? Allerdings ignorieren manche Leute in diesem Fall die Existenz bestimmter HTML-Tags für Tabellen und wissen nicht, wie man sie richtig verwendet.

HTML verfügt über 10 tabellenbezogene Tags. Nachfolgend finden Sie eine Liste mit einer Einführung. Zunächst muss das Dokument jedoch ordnungsgemäß unter HTML 4.01/XHTML 1 oder HTML 5 definiert werden:

  • Tabellentitel definieren (4, 5)

  • Definieren Sie Attribute (4, 5) für die Spalten der Tabelle

  • Definieren Sie die Gruppierung der Tabellenspalten (4, 5)

  • Tabelle (4, 5) definieren


  • Definieren Sie den Tabellenkörper (4, 5)

  • Definieren Sie eine Zelle (4, 5)

  • Tabellennotizen definieren (unten) (4, 5)

  • Definieren Sie die Kopfzeile der Tabelle (4, 5)

  • Definieren Sie die Kopfzeile der Tabelle (4, 5)


  • Definieren Sie die Zeilen (4, 5) der Tabelle

    Eine grundlegende Tabellenstruktur ist wie folgt:

    HTML-Tabellen neu entdecken

    ​Es enthält einen Titel, eine Kopfzeile, einen Hauptteil und eine Fußzeile. Die richtige Reihenfolge der HTML-Elemente ist:





    1. Sie können auch

      und verwenden, um Tabellenspalten oder Gruppenspalten zu definieren:







    2. Das Folgende ist ein Beispiel für eine korrekte Tabellenstruktur:

      <table border="1">
      	<caption>Table caption here</caption>
      	<colgroup span="1" style="background:#DEDEDE;"/>
      	<colgroup span="2" style="background:#EFEFEF;"/> 	<!-- Table Header-->
      	<thead>
      	<tr>
      		<th>Head 1</th>
      			<th>Head 2</th>
      			<th>Head 3</th>
      		</tr>
      	</thead> 	<!-- Table Footer-->
      	<tfoot>
      		<tr>
      			<td>Foot 1</td>
      			<td>Foot 2</td>
      			<td>Foot 3</td>
      		</tr>
      	</tfoot> 	<!-- Table Body-->
      	<tbody> 
      		<tr>
      			<td>A</td>
      			<td>B</td>
      			<td>C</td>
      		</tr>
      		<tr>
      			<td>D</td>
      			<td>E</td>
      			<td>F</td>
      		</tr>
      	</tbody></table>
      Nach dem Login kopieren

      Das Ergebnis im Browser sieht wie folgt aus:

      HTML-Tabellen neu entdecken

      Einige Tipps zu Formularen

      • Gemäß der Erklärung und Verwendung von w3schools muss in einer Tabellendefinition das

      -Element vor erscheinen, damit der Browser die Tabellenanmerkung rendern kann, bevor alle Daten empfangen werden. Wenn es außerdem nicht in dieser Reihenfolge ist, wird es die HTML4- und XHTML-Validierung des W3C nicht bestehen , unabhängig davon, welche DTD Sie deklarieren. (mehr erfahren).

    3. In HTML 4.01 waren die Tabellenattribute align und bgcolor veraltet, daher werden in HTML 5 keine Tabellenattribute unterstützt (tatsächlich werden in der XHTML 1.0 Strict DTD „align“ und „bgcolor“ keine Tabellenattribute unterstützt). "Attribute werden in );


    4. nicht mehr unterstützt Alle gängigen Browser unterstützen das Tag

    5. , aber Firefox, Chrome und Safari unterstützen nur die Spannen- und Breitenattribute des colgroup-Elements Empty-cells:show|hide in CSS kann festlegen, ob leere Zellen Ränder anzeigen. Beachten Sie, dass dieses
    6. anstelle von td/th

      in der Tabelle festgelegt werden muss. Dieses Problem tritt eher in IE6 auf;

    7. border-collapse:collapse |. Separat in CSS kann festgelegt werden, ob die Ränder der Tabelle zu einem Rahmen zusammengeführt werden Die Eigenschaft „border-spacing“ in CSS entspricht der Eigenschaft „cellspacing“ der Tabelle.
    8. Um das derzeit befürwortete Entwicklungsmodell der Trennung von Leistung und Struktur zu realisieren, empfiehlt die Front-End-Beobachtung die Verwendung von CSS zur Steuerung aller Dinge im Zusammenhang mit der Präsentationsebene auf der Seite, anstatt HTML-eigene Attribute zur Steuerung der Leistung der Seite zu verwenden. und der Tisch ist einer der am leichtesten zu übersehenden.

      Weitere Informationen zu Tabellen finden Sie im W3C-Dokument: w3 Introduction to tables

Das obige ist der detaillierte Inhalt vonHTML-Tabellen neu entdecken. 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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!