Leere Tabellen-Markup

<table>
	<thead>
		<tr>
			<th></th>
			<th></th>
			<th></th>
			<th></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table>

Kommentare

Renato Alves

# 17. Juni 2012

Danke Chris! Hat mir sehr geholfen! :D

Antworten

Jannik

# 7. Januar 2013

Ich dachte immer, Layouts mit Tabelle wären schlecht ...

Antworten

fazle

# 14. Februar 2013

War das ein Schnipsel, der so wichtig war, dass er gezeigt werden musste? Warum sollte jemand überhaupt hier sein, wenn er nicht weiß, was eine HTML-Tabelle ist?

Antworten

Shez

# 2. März 2013

@Jannik: Ja, Layouts mit Tabellen sind schlecht, aber diese Seite erwähnt nicht, dass wir Tabellen für Layouts verwenden sollten, sondern weist lediglich auf die korrekte Verwendung hin, falls wir DATEN anzeigen müssen, d. h. echte Tabellen.

Antworten

tomasz86

# 29. Juli 2013

Caption, colgroup und tfoot fehlen :P

<table> <caption></caption> <colgroup> <col> <col> </colgroup> <thead> <tr> <th></th> <th></th> </tr> </thead> <tfoot> <tr> <td></td> <td></td> </tr> </tfoot> <tbody> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </tbody> </table>

@fazle Viele Leute wissen nicht, wie man eine Datentabelle richtig mit Caption, thead, tbody usw. organisiert.

Antworten

Marijke

Permalink zum Kommentar# 12. September 2013

Wenn Sie schon dabei sind, vergessen Sie nicht die id/headers Attribute!
Wenn ich könnte, würde ich Ihnen ein Lob für die Platzierung von tfoot über tbody aussprechen.
Lassen Sie uns über Medien sprechen

Permalink zum Kommentar# 30. August 2017

Sollte das Element <tfoot> nicht unter <tbody> platziert werden??

https://www.w3.org/TR/html/tabular-data.html#the-table-element

Inhaltliches Modell

In dieser Reihenfolge: optional ein caption-Element, gefolgt von null oder mehr colgroup-Elementen, gefolgt optional von einem thead-Element, gefolgt von entweder null oder mehr tbody-Elementen oder einem oder mehreren tr-Elementen, gefolgt optional von einem tfoot-Element, optional durchsetzt mit null oder mehr script-unterstützenden Elementen.

Orbit Sites

# 3. Dezember 2013

Ich benutze das IMMER, wollte nur danke sagen.

@tomasz86 @Marijke
Es ist ein fairer Kommentar :) aber die grundlegende Tabellenstruktur ist meistens

Antworten

Wahhab Baldwin

# 4. Februar 2014

Wenn HTML5-Unterstützung gegeben ist, gibt es manchmal Vorteile bei der Verwendung des display:table-Ansatzes

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Tables</title>
<style>
div { 
        display: table; 
    }
div div { 
        display: table-row; 
    }
div div div { 
    display: table-cell;
    background: #EEE;
    border: 1px solid #777;
    padding: 1em;
}
</style>
</head>

<body>
<div>
    <div>
        <div>Row one col one</div>
        <div>Row one col two</div>
    </div>
    <div>
        <div>Row two col one</div>
        <div>Row two col two</div>
    </div>
</div>
</body>
</html>

Antworten

Fred

Permalink zum Kommentar# 6. Mai 2014

Tolles Beispiel, danke. Ich habe mich gefragt, wie man das macht.

Ich habe das ein paar Minuten lang ohne Erfolg ausprobiert, daher habe ich eine Frage, bitte: Wo geht in dem obigen Layout der „DIV“ hin, damit die oberste Zeile zwei oder mehr Spalten überspannen kann? Und wie lautet der Code bitte?

Im „alten“ HTML mit Tabellen war es „COLSPAN“.
zsitro

Permalink zum Kommentar# 8. August 2014

Wann?
Carlos Cordero

Permalink zum Kommentar# 7. Juli 2016

@Wahhab Baldwin, das ist ein gutes Beispiel, es könnte jedoch Probleme für die Barrierefreiheit (a11y) verursachen. Einige Screenreader könnten sich beim Durchgehen des Inhalts dieser Divs verirren oder die Daten sind für den Screenreader-Benutzer möglicherweise nicht sinnvoll. Das Schreiben von semantischem HTML ist wichtig und hilft all Ihren Benutzern.
Ein anderer Entwickler

Permalink zum Kommentar# 28. Juli 2017

Großartig! Gut gemacht! Fantastisch! Wunderbar! Fabelhaft! Fantastisch!

Kommentare

Hinterlasse eine Antwort Antwort abbrechen