Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

XHTML-Elemente: Tabellen

Posted by sura1 - 21. August 2008

Bookmark and Share

TABELLEN:

Erklärung zu den Beispielen:

Klicken Sie bitte auf den Link BESCHREIBUNG und Sie erhalten eine ausführliche Erläuterung des betreffenden XHTML-Elementes (entnommen aus http://de.selfhtml.org/ ).

Für jedes Element stelle ich Ihnen ein von mir gestaltetes Beispiel vor (mit Quell-Text und Browser-Ansicht). Zusätzlich finden Sie unter WEITERE BEISPIELE je einen Link auf die englischsprachigen XHTML-Tutorials der Webseiten http://htmlplayground.com/ und
http://www.w3schools.com/

<caption> </caption>

Tabellenüberschrift ( Beschreibung )

Das <caption>-Element definiert in einer Tabelle die zugehörige Überschrift.

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>caption-Element: Definition Tabellenüberschrift</title>
</head>
<body>
<h1>Definition Tabellenüberschrift</h1>

<table border="1" rules="groups">
  <caption>Hier steht die Tabellenüberschrift</caption>
  <thead>
    <tr>
      <th>Zeile im Tabellenkopf</th>
      <th>Zeile im Tabellenkopf</th>
      <th>Zeile im Tabellenkopf</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td><i>Tabellenzelle<br />im Tabellenfuß</i></td>
      <td><i>Tabellenzelle<br />im Tabellenfuß</i></td>
      <td><i>Tabellenzelle<br >im Tabellenfuß</i></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Hannover</td>
      <td>Hamburg</td>
      <td>M&uuml;nchen</td>
    </tr><tr>
      <td>Milj&ouml;h</td>
      <td>Kiez</td>
      <td>Bierdampf</td>
    </tr><tr>
      <td>Buletten</td>
      <td>Frikadellen</td>
      <td>Fleischpflanzerl</td>
    </tr>
  </tbody>
</table>

</body>
</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_caption.asp
http://htmlplayground.com/#tag_caption


<col />

Daten für eine Tabellenspalte ( Beschreibung )

Mit dem <col>-Element werden den einzelnen Spalten innerhalb einer Tabelle Attribute zugewiesen..

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>col-Element: Definition Tabellenspalte</title>
</head>
<body>
<h3>Beispielschema 1</h3>

<table border="1">
  <colgroup>
    <col width="80">
    <col width="100">
    <col width="320">
  </colgroup>
  <tr>
    <td>1. Zeile, 1. Spalte</td>
    <td>1. Zeile, 2. Spalte</td>
    <td>1. Zeile, 3. Spalte</td>

  </tr>
  <!-- usw. andere Zeilen der Tabelle -->
</table>

</body>
</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_col.asp
http://htmlplayground.com/#tag_col


<colgroup> </colgroup>

Gruppe von Tabellenspalten ( Beschreibung )

Das <colgroup>-Element gehört zu den eher selten gesehenen HTML-Elementen. Damit lassen sich innerhalb einer Tabelle ganze Spalten auf einmal formatieren – ohne lästige Wiederholungen.

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>colgroup-Element: Definition Gruppe von Tabellenspalten</title>
</head>
<body>
<h1>Definition Tabellenspalten</h1>
<h3>Beispielschema 1</h3>

<table border="1">
  <colgroup>
    <col width="80">
    <col width="100">
    <col width="320">
  </colgroup>
  <tr>
    <td>1. Zeile, 1. Spalte</td>
    <td>1. Zeile, 2. Spalte</td>
    <td>1. Zeile, 3. Spalte</td>
  </tr>
  <!-- usw. andere Zeilen der Tabelle -->
</table>

<h3>Beispielschema 2</h3>

<table border="1">
  <colgroup width="200" span="3"></colgroup>
  <tr>
    <td>1. Zeile, 1. Spalte</td>
    <td>1. Zeile, 2. Spalte</td>
    <td>1. Zeile, 3. Spalte</td>
  </tr>
  <!-- usw. andere Zeilen der Tabelle -->
</table>

<h3>Beispielschema 3</h3>

<table border="1" width="100%">
  <colgroup>
    <col width="4*">
    <col width="2*">
    <col width="1*">
  </colgroup>
  <tr>
    <td>1. Zeile, 1. Spalte</td>
    <td>1. Zeile, 2. Spalte</td>
    <td>1. Zeile, 3. Spalte</td>
  </tr>
  <!-- usw. andere Zeilen der Tabelle -->
</table>

</body>
</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_colgroup.asp
http://htmlplayground.com/#tag_colgroup


<table> </table>

Tabelle ( Beschreibung )

Das <table>-Element definiert ein HTML-Element als Tabelle.

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>table-Element: Definition Tabelle</title>
</head>
<body>
<h1>Tabelle mit Gitternetzlinien</h1>

<table border="1">
  <tr>
    <th>Berlin</th>
    <th>Hamburg</th>
    <th>M&uuml;nchen</th>
  </tr>
  <tr>
    <td>Milj&ouml;h</td>
    <td>Kiez</td>
    <td>Bierdampf</td>
  </tr>
  <tr>
    <td>Buletten</td>
    <td>Frikadellen</td>
    <td>Fleischpflanzerl</td>
  </tr>
</table>

<h1>Tabelle ohne Gitternetzlinien (blinde Tabelle)</h1>

<table border="0">
  <tr>
    <td><h2>ARQ</h2></td>
    <td><p>Automatic Repeat Request. Eine allgemeine Bezeichnung
    f&uuml;r Fehlerprotokolle, die &Uuml;bertragungsfehler erkennt und
    defekte Bl&ouml;cke selbst&auml;ndig wiederholt</p></td>
  </tr>
  <tr>
    <td><h2>HDLC</h2></td>
    <td><p>High Level Data Link Control. Ein Standard-Protokoll, das
    von der Kommission f&uuml;r internationale Standards f&uuml;r
    Softwareanwendungen in synchronen Anlagen verwendet wird.</p></td>
  </tr>
</table>

</body>
</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_table.asp
http://htmlplayground.com/#tag_table


<tbody> </tbody>

Tabellenkörper ( Beschreibung )

Das <tbody>-Element definiert den Körper einer Tabelle.

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>tbody-Element: Definition Tabellenkörper</title>
</head>

<body>
<h1>Definition Tabellenkörper</h1>
<table border="1" rules="groups">
  <thead>
    <tr>
      <th>Assoziation 1</th>
      <th>Assoziation 2</th>

      <th>Assoziation 3</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td><i>betroffen:<br>4 Mio. Menschen</i></td>
      <td><i>betroffen:<br>2 Mio. Menschen</i></td>
      <td><i>betroffen:<br>1 Mio. Menschen</i></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Berlin</td>
      <td>Hamburg</td>
      <td>M&uuml;nchen</td>
    </tr><tr>
      <td>Milj&ouml;h</td>
      <td>Kiez</td>
      <td>Bierdampf</td>
    </tr><tr>
      <td>Buletten</td>
      <td>Frikadellen</td>
      <td>Fleischpflanzerl</td>
    </tr>
  </tbody>
</table>
</body>

</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_tbody.asp
http://htmlplayground.com/#tag_tbody


<td> </td>

Tabellenzelle im Tabellenkörper ( Beschreibung )

Mit dem <td>-Element wird eine Tabellenzelle im Tabellenkörper dargestellt.

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>td-Element: Definition Tabellenzelle im Tabellenkörper</title>
</head>

<body>
<h1>Definition Tabellenzelle im Tabellenkörper</h1>
<table border="1">
<tr>
<td>Cell A1</td>
<td>Cell B1</td>
</tr>
<tr>
<td>Cell A2</td>
<td>Cell B2</td>
</tr>
</table>
</body>

</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_td.asp
http://htmlplayground.com/#tag_td


<tfoot> </tfood>

Tabellenfuß ( Beschreibung )

Das <tfood>-Element stellt den Tabellenfuß einer Tabelle dar.

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>tfood-Element: Definition Tabellenfuss</title>
</head>

<body>
<h1>Kopf, K&ouml;rper und Fu&szlig; einer Tabelle definieren</h1>
<table border="1" rules="groups">
  <thead>
    <tr>
      <th>Assoziation 1</th>
      <th>Assoziation 2</th>
      <th>Assoziation 3</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td><i>betroffen:<br>4 Mio. Menschen</i></td>
      <td><i>betroffen:<br>2 Mio. Menschen</i></td>
      <td><i>betroffen:<br>1 Mio. Menschen</i></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Berlin</td>
      <td>Hamburg</td>
      <td>M&uuml;nchen</td>
    </tr><tr>
      <td>Milj&ouml;h</td>
      <td>Kiez</td>
      <td>Bierdampf</td>
    </tr><tr>
      <td>Buletten</td>
      <td>Frikadellen</td>
      <td>Fleischpflanzerl</td>
    </tr>
  </tbody>
</table>

</body>
</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_tfoot.asp
http://htmlplayground.com/#tag_tfoot


<th> </th>

Zeile im Tabellenkopf ( Beschreibung )

Das <th>-Element definiert eine Kopfzelle in einer Tabelle.

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>th-Element: Definition Zeile im Tabellenkopf</title>
</head>

<body>
<h1>Definition Zeile im Tabellenkopf</h1>
<table border = "1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Cell A1</td>
<td>Cell B1</td>
</tr>
<tr>
<td>Cell A2</td>
<td>Cell B2</td>
</tr>
</table>
</body>

</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_th.asp
http://htmlplayground.com/#tag_th


<thead> </thead>

Tabellenkopf in einer Tabelle ( Beschreibung )

Das <thead>-Element ist der Tabellenkopf und definiert eine Gruppe von Kopfzeilen in einer Tabelle.

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>thead-Element: Definition Tabellenkopf</title>
</head>

<body>
<h1>Definition Tabellenkopf</h1>
<table border="1" rules="groups">
  <thead>
    <tr>
      <th>Assoziation 1</th>
      <th>Assoziation 2</th>
      <th>Assoziation 3</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td><i>betroffen:<br>4 Mio. Menschen</i></td>
      <td><i>betroffen:<br>2 Mio. Menschen</i></td>
      <td><i>betroffen:<br>1 Mio. Menschen</i></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Berlin</td>
      <td>Hamburg</td>
      <td>M&uuml;nchen</td>
    </tr><tr>
      <td>Milj&ouml;h</td>
      <td>Kiez</td>
      <td>Bierdampf</td>
    </tr><tr>
      <td>Buletten</td>
      <td>Frikadellen</td>
      <td>Fleischpflanzerl</td>
    </tr>
  </tbody>
</table>

</body>
</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_thead.asp
http://htmlplayground.com/#tag_thead


<tr> </tr>

Tabellenzeile ( Beschreibung )

Das <tr>-Element definiert eine Tabellenzeile.

Beispiel:

Quellcode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>tr-Element: Definition Tabellenzeile</title>
</head>

<body>
<h1>Definition Tabellenzeile</h1>
<table border = "1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Zeile A1</td>
<td>Zeile B1</td>
</tr>
<tr>
<td>Zeile A2</td>
<td>Zeile B2</td>
</tr>
</body>

</html>

Beispiel: ( hier ansehen!)

weitere Beispiele

http://www.w3schools.com/tags/tag_tr.asp
http://htmlplayground.com/#tag_tr

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

 
%d Bloggern gefällt das: