Tabellen-Template 01

Keywords: Tabellen, Template, Vorlage, Kopiervorlage, CSS-Formatierung, HTML5, HTML-Dokumente, Beispiel01

Begriffe: Tabelleneigenschaften, Tabellenüberschrift, Titel, Tabellenkopf, Spaltenüberschrift, Headline, Tabellenrand, Zellenrand, Abstände, Tabellenzelle, Tabellenbreite, Zeilenhöhe, Zellenbreite
Tabellen Template Vorlage HTML Kopiervorlagen mit CSS-Formatierung nach HTML5 für HTML-Dokumente Beispiel01
Tabellen-Template 01
 HomeTabellen • Kopiervorlagen Demo  Quellcode 

Tabellenbeispiele nach HTML 5  Vorlage 01

Hier finden Sie demnächst Tabellenbeispiele mit CSS-Formatierung nach HTML5 als Kopiervorlagen für Ihre Projekte. Die Vorlagen verzichten auf (einige) übliche Tabellenattribute. Stattdessen wurden für die Formatierung eigene CSS-Klassen definiert.
Tabelle <table> <tr> <td> Attribute Vorlage Beispiel

Kopiervorlage 01 mit CSS-Formatierung nach HTML5

UPDATE  18.02.2011  Demo und Quellcode (Textdatei)

Nutzen Sie meine Vorlagen um eigene Modelle zu entwickeln. Ändern Sie die Einträge für die CSS-Angaben und und passen Sie die Farbwerte, die Textformatierung und Breitenangaben nach Ihren Wünschen an. Notierte CSS-Klassen:

  • .beispiel   (Tabelleneigenschaften)
  • .beispiel caption   (Tabellenüberschrift / Titel)
  • .beispiel thead   (Tabellenkopf)
  • .beispiel th   (Spaltenüberschrift / Headline)
  • .beispiel td   (Tabellenzellen)
Titel
Headline Headline Headline
Text Text Text
Text Text Text

Weitere Beispiele sind gerade in Arbeit (18.02.2011)


  HTML 5-konforme Tabellen

Bitte beachten Sie das mit der Einführung von HTML 5 einige Tabellenattribute nicht mehr benutzt werden sollen. Sie werden von den Browsern allerdings weiterhin unterstützt.

Diese Tabellen-Attribute stehen auf der Streichliste:
align, bgcolor, border, cellpadding, cellspacing,
height, nowrap, rules, valign, width


1  CSS-Anweisungen im Head-Bereich Ihrer HTML-Seite:

Aus dem oben angeführten Grund hatte ich in den letzten Tagen die Einführungsseiten zum Thema Tabellen bereits überarbeitet und stelle Ihnen nun erste Kopiervorlagen bereit, welche den neuen Anforderungen entsprechen.

Die Angaben für die Breite der Tabelle sollten Sie löschen oder ändern!
<style type="text/css">
<!--

.beispiel
{
width: 200px;
border: 1px solid #6688AA;
}

.beispiel caption
{
background-color: #6688AA;
font-family: Arial,Verdana,sans-serif;
font-weight: normal;
font-size: 12px;
color: #FFFFFF;
padding: 6px 0 3px 0;
}

.beispiel thead th
{
font: bold 11px  Arial,Verdana,sans-serif;
padding: 3px;
background-color: #CCDDEE;
border: 1px solid #FFFFFF;
text-align: center;
color: #4E6C8D;
font-weight: normal;
}

.beispiel td
{
font: normal 11px Arial,Verdana,sans-serif;
padding: 5px 5px;
background-color: #DDEEFF;
border: 1px solid #FFFFFF;
line-height: 130%;
text-align: center;
}

-->
</style>

2  HTML-Code im Body-Bereich Ihrer HTML-Seite:

Die Angaben für Titel und Kopf können auch entfallen.

Die Notierung des Attributs 'class' mit dem Wert 'beispiel' bestimmt, dass die entsprechenden CSS-Notierungen im Kopf der HTML-Seite für diese Tabelle gültig sind. Durch diesen Eintrag werden die CSS-Formatierungen zugeordnet.
<table class="beispiel" cellspacing="0" cellpadding="0">

<caption>Titel</caption>

<thead><tr>
<th>Headline</th>
<th>Headline</th>
<th>Headline</th>
</tr></thead>

<tbody>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>

<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>

</table>


Demo:

Bildschirmauflösung Besucher am 21.12.2010
1024 x 761 1280 x 1024 1152 x 864 800 x 600
53,12 % 29,16 % 7,02 % 4,77 %
1062 582 140 94






Das könnte Sie auch interessieren: