Tutorialwelt.de » HTML-Tutorial http://www.tutorialwelt.de Tutorials aus der IT-Welt Sat, 22 May 2010 13:24:43 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 HTML Tutorial mit Video – Der Quirks Modus und margin auto im Internet Explorer http://www.tutorialwelt.de/537/html-tutorial-quirks-modus-margin-auto-internet-explorer.htm http://www.tutorialwelt.de/537/html-tutorial-quirks-modus-margin-auto-internet-explorer.htm#comments Thu, 04 Feb 2010 11:00:48 +0000 admin http://www.tutorialwelt.de/?p=537
  • CSS Tutorial mit Video – Hintergrund für Internet Seite erstellen Um einen Hintergrund für eine Webseite zu erstellen kann man...
  • WICHTIGES Sicherheits-Update für Internet Explorer 6-8 Heute möchte ich alle meine Besucher darauf aufmerksam machen, daß...
  • Webseiten auch für den Internet Explorer 6 optimieren Auch wenn ich bereits in einem anderen Tutorial (Vorschau von...
    • Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.]]>     HTML Tutorial mit Video – Der Quirks Modus und margin auto im Internet Explorer

    Hier können Sie das Video in voller Größe ansehen

    Wer schon einmal versucht hat, im Internet Explorer Divs per margin auto horizontal auszurichten, wird sich mit dieser Thematik früher oder später auseinandergesetzt haben: Dem Quirks Modus.

    Nein! Wir befinden uns nicht in einem Physik-Tutorial über Quarks und Co. Wir sprechen von den Browsern.

    Auch wenn jeder Designer sich Mühe geben sollte, seine Webseiten valide zu programmieren, so wird man nur wenige Internet Seiten im Internet finden, die einen sauberen einwandfreien Quellcode haben. Das hat auch schon oft den Ursprung in den CMS Systemen (Content-Management-Systeme – also Seiten, die man ohne Programmierkenntnisse einfach anpassen kann), die gerne eingesetzt werden.

    Die Browser müssen wahre Künstler sein, in dem, was sie teilweise aus sehr viel falschem Code noch zaubern. Teilweise grenzt es an ein Wunder, daß viele Seiten so ansehnlich aussehen.

    Damit das Ganze überhaupt möglich ist, haben die Entwickler in den einzelnen Browsern den sogenannten Quirks-Modus eingeführt. Dies ist ein Modus, der sehr viel falsches akzeptiert und versucht richtig zu interpretieren. Dieser Modus wird automatisch geschaltet, wenn der Doctype der Internet Seite nichts anderes verlangt.

    Der Internet Explorer zum Beispiel hat auch einen solchen Quirks Modus. Nur ist es hier ein klein wenig verwunderlich, daß ausgerechnet dieser “Fehlertolerante” Modus nicht in der Lage ist, ein Div per margin auto horizontal auszurichten.

    Demzufolge muss man im Internet Explorer den Quirks Modus ausschalten, um die horizontale Ausrichtung per margin auto zu realisieren.

    Hierfür gibt es folgende Doctypen:

    <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
    <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
    <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

    Wer sich mit dem Thema Quirks Modus in den verschiedenen Browsern weiter auseinandersetzen möchte kann dies unter folgenden Links tun:

    Mozilla/Firefox

    Mozilla’s DOCTYPE sniffing
    Mozilla Quirks Mode Behavior

    Internet Explorer

    DOCTYPE-Switch im Internet Explorer
    CSS Enhancements in Internet Explorer 6

    Opera

    The Opera 9 DOCTYPE Switches

    Related posts:

    1. CSS Tutorial mit Video – Hintergrund für Internet Seite erstellen Um einen Hintergrund für eine Webseite zu erstellen kann man...
    2. WICHTIGES Sicherheits-Update für Internet Explorer 6-8 Heute möchte ich alle meine Besucher darauf aufmerksam machen, daß...
    3. Webseiten auch für den Internet Explorer 6 optimieren Auch wenn ich bereits in einem anderen Tutorial (Vorschau von...

    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

    ]]>     http://www.tutorialwelt.de/537/html-tutorial-quirks-modus-margin-auto-internet-explorer.htm/feed 0     HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 2 http://www.tutorialwelt.de/377/html-tabellen-tbody-scrollen-und-korrekt-ausdrucken-teil-2.htm http://www.tutorialwelt.de/377/html-tabellen-tbody-scrollen-und-korrekt-ausdrucken-teil-2.htm#comments Sun, 18 Oct 2009 10:00:43 +0000 admin http://www.tutorialwelt.de/?p=377
  • HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 1 Im letzten Tutorial habe ich Euch gezeigt, wie man bei...
  • Tabellen in HTML – Teil 3 Cellpadding und Cellspacing In diesem Tutorial möchte ich mich mit Abständen innerhalb der...
  • Tabellen in HTML – Tutorial 2 der Rahmen ...Im letzten Tutorial habe ich erklärt, wie man die Rahmendicke...
    • Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.]]>     Fortsetzung Tutorial
    HTML Tabellen tbody scrollen und korrekt ausdrucken

    In unserem vorherigen Tutorial hatten wir zuletzt mehrere Probleme:
    Opera hat bei dem Einsatz von table-row-group in der ersten Zeile der zweiten Seite nur der Inhalt der ersten Zelle angezeigt.
    Opera und Firefox haben den Inhalt aller drei Spalten in die erste gesetzt.

    Um den Fehler des Opera Browsers in der ersten Zeile der zweiten Seite in den Griff zu bekommen, müssen wir
    display: table-row-group; mit display:block; ersetzen:

    Beispielcode print.css:

    #printoutertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 10px;
      left: 10px;
      }

  #screenoutertab {
          visibility:hidden;
      }

  #printoutertab tbody td {width: 220px;}
  tbody tr {display: block;}

    Und schon ist das Ergebnis besser:

    Screenshot Opera:

    tbody Tabelle Seitenumbruch im Opera ausgedruckt

    tbody Tabelle Seitenumbruch im Opera ausgedruckt

    Das gleiche Ergebnis liefert uns nun der Firefox Browser:

    Screenshot Firefox:

    Ausdruck im Firefox mit table-row-group

    Ausdruck im Firefox mit table-row-group

    Screenshot Firefox:

    Ausdruck Seitenumbruch im Firefox table-row-group

    Ausdruck Seitenumbruch im Firefox table-row-group

    Diese Stauchung gibt es nun im Internet Explorer nicht:

    Screenshot Internet Explorer:

    Ausdruck im Internet Explorer mit table-row-group

    Ausdruck im Internet Explorer mit table-row-group

    Screenshot Internet Explorer:

    Ausdruck Seitenumbruch im Internet Explorer table-row-group

    Ausdruck Seitenumbruch im Internet Explorer table-row-group

    Der Fehler beim Seitenumbruch besteht allerdings immer noch.
    Der Unterschied zwischen Internet Explorer und Opera/Firefox besteht darin, daß die Browser bei der Berechnung der Breite von unterschiedlichen Grundwerten ausgehen. Opera und Firefox setzen die table-row-group in die erste Spalte der Tabelle und verbreitern somit die komplette erste Spalte, während sie die letzten beiden stauchen. Der Internet Explorer würde von der Header Zeile ausgehen und nicht vom Body.

    Zu dem Firefox/Opera Problem der Stauchung gibt es eine Lösung. Man fügt eine weitere kleine Tabelle in die erste th Zelle des thead Bereiches ein. In dieser Tabelle sind nun die eigentlichen drei thead Werte vorhanden:

    Beispielcode HTML:

    <html>
 <head>
  <link rel="stylesheet" media="screen" href="screen.css">
  <link rel="stylesheet" media="print" href="print.css">
 </head>
 <body>
  <table id="screenoutertab">
    ..........
   </table>

  <table id="printoutertab">
   <thead>
    <tr>
     <th><table><tr><td class="z1">Überschrift 1</td><td class="z1">Überschrift 2</td><td class="z1">Überschrift 3</td></tr></table></th>
     <th>&nbsp;</th>
     <th>&nbsp;</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th><table><tr><td class="z1">Fußnote 1</td><td class="z1">Fußnote 2</td><td class="z1">Fußnote 3</td></tr></table></th>
     <th>&nbsp;</th>
     <th>&nbsp;</th>
    </tr>
   </tfoot>
   <tbody>
           <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            ........
            ........
            ........
    </tbody>
   </table>

  </body>
 </html>

    Ich habe zur einfacheren Zuordnung den Zellen der verschachtelten Tabelle die Klasse z1 zugeordnet.

    In der print.css müssen wir noch der Klasse css den Wert font-weight: bold; und width: 220px; zuordnen.

    Die print.css sähe dann folgendermaßen aus:

    Beispielcode print.css:

      #printoutertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 10px;
      left: 10px;
      }

  #screenoutertab {
          visibility:hidden;
      }

  #printoutertab tbody td {width: 220px;}
  tbody tr {display: block;}
  .z1 {font-weight: bold; width: 220px;}

    Nun sieht das Ganze im Firefox folgendermaßen aus:

    Screenshot Firefox:

    tbody Tabelle im Firefox ausgedruckt

    tbody Tabelle im Firefox ausgedruckt

    Und der Seitenumbruch sieht auch perfekt aus:
    Screenshot Firefox:

    tbody Tabelle Seitenumbruch im Firefox ausgedruckt

    tbody Tabelle Seitenumbruch im Firefox ausgedruckt

    Jetzt schauen wir uns das Ergebnis im Opera an:

    Screenshot Opera:

    tbody Tabellen Ausdruck im Opera

    tbody Tabellen Ausdruck im Opera

    Und beim Seitenumbruch:

    Screenshot Opera:

    tbody Tabellen Ausdruck Seitenumbruch im Opera

    tbody Tabellen Ausdruck Seitenumbruch im Opera

    Das Tabellenende ist nun korrekt berechnet worden. Die Spalten sind auf die richtige Breite gebracht. Hier passt nun alles.

    Doch nun kommt noch einmal der Internet Explorer an die Reihe. Diesmal zickt der IE:

    Screenshot Internet Explorer:

    tbody Tabelle im Internet Explorer ausgedruckt

    tbody Tabelle im Internet Explorer ausgedruckt

    Beim Seitenumbruch stimmt das Ganze auch nicht:

    Screenshot Internet Explorer:

    tbody Tabelle Seitenumbruch im Internet Explorer ausgedruckt

    tbody Tabelle Seitenumbruch im Internet Explorer ausgedruckt

    In der vorherigen Version stimmte die Anzeige des Internet Explorers, aber nicht die von Opera und Firefox.
    Jetzt ist es umgekehrt. Stehen wir nun vor einem unlösbaren Problem? NEIN!
    Wir werden nun eine Abfrage einführen. Wenn der Internet Explorer verwendet wird, soll die verschachtelte Tabelle nicht zum Einsatz kommen.

    Zuletzt ist mir noch aufgefallen, daß bei Opera bei thead und tfoot die Einträge nicht zentriert wurden, wie bei den anderen Browsern. Also werden wir in der CSS die z1 Klasse noch um ein text-align: center; erweitern.

    Beispielcode print.css:

      #printoutertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 10px;
      left: 10px;
      }

  #screenoutertab {
          visibility:hidden;
      }

  #printoutertab tbody td {width: 220px;}
  tbody tr {display: block;}
  .z1 {font-weight: bold; width: 220px; text-align: center;}

    Um den Internet Explorer abzufragen verwenden wir folgendes Javascript:
    if (navigator.appName==”Microsoft Internet Explorer”) {

    Unsere HTML Datei sähe dann folgendermaßen aus:

    Beispielcode HTML:

    <html>
 <head>
  <link rel="stylesheet" media="screen" href="screen.css">
  <link rel="stylesheet" media="print" href="print.css">
 </head>
 <body>
  <table id="screenoutertab">
    ..........
   </table>

  <table id="printoutertab">
   <thead>
    <tr>
     <th><script type="text/javascript">if (navigator.appName=="Microsoft Internet Explorer") {document.write("Überschrift 1")} else {document.write("<table><tr><td class='z1'>Überschrift 1</td><td class='z2'>Überschrift 2</td><td class='z3'>Überschrift 3</td></tr></table>");}</script></th>
     <th><script type="text/javascript">if (navigator.appName=="Microsoft Internet Explorer") {document.write("Überschrift 2")} else {document.write("&nbsp;");} </script></th>
     <th><script type="text/javascript">if (navigator.appName=="Microsoft Internet Explorer") {document.write("Überschrift 3")} else {document.write("&nbsp;");} </script></th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th><script type="text/javascript">if (navigator.appName=="Microsoft Internet Explorer") {document.write("Fußnote 1")} else {document.write("<table><tr><td class='z1'>Fußnote 1</td><td class='z2'>Fußnote 2</td><td class='z3'>Fußnote 3</td></tr></table>");}</script></th>
     <th><script type="text/javascript">if (navigator.appName=="Microsoft Internet Explorer") {document.write("Fußnote 2")} else {document.write("&nbsp;");} </script></th>
     <th><script type="text/javascript">if (navigator.appName=="Microsoft Internet Explorer") {document.write("Fußnote 3")} else {document.write("&nbsp;");} </script></th>
    </tr>
   </tfoot>
<tbody>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
........
........
........
</tbody>
</table>

</body>
</html>

    Wir schauen uns nun gemeinsam noch ein allerletztes Mal die Ergebnisse der unterschiedlichen Browser an.

    Um es gleich vorweg zu nehmen. Dem Internet Explorer wird man den korrekten Seitenumbruch nicht beibringen können. Auch ein page-break-after bzw. page-break-before ist hier sinnlos. Der Internet Explorer schafft es einfach nicht.

    Screenshot Firefox:

    tbody Tabelle in Firefox ausgedruckt

    tbody Tabelle in Firefox ausgedruckt

    Screenshot Firefox:

    tbody Tabelle mit Seitenumbruch in Firefox ausgedruckt

    tbody Tabelle mit Seitenumbruch in Firefox ausgedruckt

    Im Opera sieht es nun ebenfalls annehmbar aus:

    Screenshot Opera:

    tbody Tabellen Ausdruck im Opera Browser

    tbody Tabellen Ausdruck im Opera Browser

    Screenshot Opera:

    tbody Tabelle - Seitenwechsel ausgedruckt im Opera

    tbody Tabelle - Seitenwechsel ausgedruckt im Opera

    Auch wenn es uns nun nicht gelungen ist, dem Opera Browser es beizubringen, daß thead und tfoot auf jeder Seite wiederholt werden sollten, haben wir ein ansehnliches Ergebnis erreicht. Das Ende der Tabelle wir nun auch richtig berechnet und nicht mitten in die Tabelle gesetzt.

    Abschließend betrachten wir noch das Ergebnis im Internet Explorer. Hier ist leider nichts mehr zu machen.
    Der Fehler beim Seitenübergang ist nicht in den Griff zu bekommen. Angeblich soll Microsoft einen Patch für den Internet Explorer haben. Gefunden habe ich dazu allerdings leider nichts.

    Screenshot Internet Explorer:

    tbody Tabelle im Internet Explorer ausgedruckt

    tbody Tabelle im Internet Explorer ausgedruckt

    Screenshot Internet Explorer:

    tbody Tabelle Seitenwechsel im Internet Explorer ausgedruckt

    tbody Tabelle Seitenwechsel im Internet Explorer ausgedruckt

    Für dieses Tutorial sind so manche Kopfhaare ergraut. Ich glaube hier kann man überdeutlich sehen, wie komplex Internet Seiten Entwicklung sein kann, da es manchmal kein Patentrezept gibt und einem die Entwickler der Browser auch die eine oder andere Stolperfalle vor die Füsse werfen. Schade eigentlich. Es soll doch ein einheitlicher Standard geschaffen werden?! Davon sind wir noch meilenweit entfernt. Inzwischen startet CSS mit der dritten Generation. Befehle a la page-break-after sollten seit CSS 2.1 Standard sein. Obwohl man die aktuellsten Broser verwendet, kommt man bei so simplen Dingen wie dem Ausdrucken einer Tabelle ins straucheln.

    Trotz allem sind wir mit dem Entwickeln von Tabellen noch nicht fertig. Hierzu werden noch ein paar Tutorials folgen.

    Related posts:

    1. HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 1 Im letzten Tutorial habe ich Euch gezeigt, wie man bei...
    2. Tabellen in HTML – Teil 3 Cellpadding und Cellspacing In diesem Tutorial möchte ich mich mit Abständen innerhalb der...
    3. Tabellen in HTML – Tutorial 2 der Rahmen ...Im letzten Tutorial habe ich erklärt, wie man die Rahmendicke...

    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

    ]]>     http://www.tutorialwelt.de/377/html-tabellen-tbody-scrollen-und-korrekt-ausdrucken-teil-2.htm/feed 0     HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 1 http://www.tutorialwelt.de/319/html-tabellen-tbody-scrollen-und-korrekt-ausdrucken-teil-1.htm http://www.tutorialwelt.de/319/html-tabellen-tbody-scrollen-und-korrekt-ausdrucken-teil-1.htm#comments Sat, 17 Oct 2009 04:29:40 +0000 admin http://www.tutorialwelt.de/?p=319 Tutorial habe ich Euch gezeigt, wie man bei Tabellen in HTML den TBody Bereich scrollen kann, während thead und tfoot stehen bleiben. Das funktioniert in allen gängigen Browsern (auch dem Internet Explorer). Mit dieser Methode ist allerdings ein lesbarer Ausdruck der Tabelle nicht möglich. Letztlich wird nur ein Screenshot der Tabelle auf Papier gebracht.... Related posts:
    1. HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 2 In unserem vorherigen Tutorial hatten wir zuletzt mehrere Probleme: Opera...
    2. Tabellen in HTML – Teil 3 Cellpadding und Cellspacing In diesem Tutorial möchte ich mich mit Abständen innerhalb der...
    3. Tabellen in HTML – Tutorial 2 der Rahmen ...Im letzten Tutorial habe ich erklärt, wie man die Rahmendicke...
    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.]]>     HTML Tabellen tbody scrollen und korrekt ausdrucken

    Im letzten Tutorial habe ich Euch gezeigt, wie man bei Tabellen in HTML den TBody Bereich scrollen kann, während thead und tfoot stehen bleiben. Das funktioniert in allen gängigen Browsern (auch dem Internet Explorer). Mit dieser Methode ist allerdings ein lesbarer Ausdruck der Tabelle nicht möglich.

    Letztlich wird nur ein Screenshot der Tabelle auf Papier gebracht. Das Ergebnis sieht folgendermaßen aus:

    Screenshot Firefox:

    Tbody Tabelle Ausdruck 1 im Firefox

    Tbody Tabelle Ausdruck 1 im Firefox

    Screenshot Opera:

    Tbody Tabelle Ausdruck 1 im Opera

    Tbody Tabelle Ausdruck 1 im Opera

    Screenshot Internet Explorer:

    Tbody Tabelle Ausdruck 1 im Internet Explorer

    Tbody Tabelle Ausdruck 1 im Internet Explorer

    Das ist nicht unser Ziel. Wir wollen den Besuchern schließlich auch den Ausdruck unserer Informationen ermöglichen. Dieses Tutorial ist eines der umfassendsten zu diesem Thema im Web. Ihr werdet Euch wundern, wie komplex es sein kann, für die drei großen Browser ein annehmbares Ergebnis hinzubekommen. Hierzu werden wir CSS und Javascript einsetzen müssen. Doch dazu später mehr.

    Diesmal werden wir den CSS Code in externe Dateien auslagern.
    Wir werden eine CSS Datei für die normale Ansicht im Browser erstellen und eine weitere CSS-Datei für den Drucker. Für die Anzeige im Browser verwenden wir wieder die Tabelle aus dem vorangegangenen Tutorial.

    Wir nehmen zuerst die Tabelle aus dem vorangegangenen Tabellen-Tutorial als Grundlage.

    Wir kopieren den CSS Code und fügen ihn in eine CSS Datei ein:

    Beispielcode screen.css:

      #screenoutertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 20px;
      left: 20px;
      width:70%;
      height: 400px;
      }
  #innerdiv {
      width: 100%;
      height: 330px;
      overflow:auto;
      }
  #screeninnertab {
      border: 0px;
      width:  100%;
      height: 330px;
      }
  #screeninnertab td{
      border: 1px #000000 solid;
      }
  th+th+th {width:34%;}
  td+td {width:34%;}

    Diese screen.css binden wir per link rel in unsere HTML-Datei ein. Von @import ist abzuraten (siehe folgendes Tutorial: CSS-Tutorial Einbindung per link rel oder @import)

    Beispielcode HTML:

    <html>
 <head>
  <link rel="stylesheet" media="screen" href="screen.css">
 </head>
 <body>
  <table id="screenoutertab">
   <thead>
    <tr>
     <th>Überschrift 1</th>
     <th>Überschrift 2</th>
     <th>Überschrift 3</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Fußnote 1</th>
     <th>Fußnote 2</th>
     <th>Fußnote 3</th>
    </tr>
   </tfoot>
   <tbody>
    <tr>
     <td colspan="3">
       <div id="innerdiv">
          <table id="screeninnertab">
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
          </table>
       </div>
     </td>
    </tr>
    </tbody>
   </table>
  </body>
 </html>

    Ich habe nun absichtlich noch viele weitere Zeilen eingefügt. Wir wollen scrollen… Nicht nur am Monitor, sondern auch beim Ausdruck.

    Wir hängen nun folgende Tabelle an die bereits bestehende mit an:

    Beispielcode HTML:

    <html>
 <head>
  <link rel="stylesheet" media="screen" href="screen.css">
 </head>
 <body>
  <table id="screenoutertab">
   <thead>
    <tr>
     <th>Überschrift 1</th>
     <th>Überschrift 2</th>
     <th>Überschrift 3</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Fußnote 1</th>
     <th>Fußnote 2</th>
     <th>Fußnote 3</th>
    </tr>
   </tfoot>
   <tbody>
    <tr>
     <td colspan="3">
       <div id="innerdiv">
          <table id="screeninnertab">
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
          </table>
       </div>
     </td>
    </tr>
    </tbody>
   </table>

  <table id="printtab">
   <thead>
    <tr>
     <th>Überschrift 1</th>
     <th>Überschrift 2</th>
     <th>Überschrift 3</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Fußnote 1</th>
     <th>Fußnote 2</th>
     <th>Fußnote 3</th>
    </tr>
   </tfoot>
   <tbody>
    <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
    </tr>
    </tbody>
   </table>

  </body>
 </html>

    Zu der zweiten Tabelle müssen wir ebenfalls eine CSS erstellen:

    Beispielcode print.css:

     #printoutertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 10px;
      left: 10px;
      width:100%;
      height: 400px;
      }

  #screenoutertab {
          visibility:hidden;
      }

  th+th+th {width:34%;}
  td+td {width:34%;}

    In der print.css habe ich nun den Befehl visibility: hidden eingefügt. Dieser Befehl blendet den dazugehörigen Bereich aus. Sobald also die Tabelle ausgedruckt werden soll, wird die print.css geladen und die screenoutertab nicht mehr angezeigt.

    Nun sollten wir das gleiche (im umgekehrten Sinn) für die printoutertab in der screen.css machen:

    Beispielcode screen.css:

    #screenoutertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 20px;
      left: 20px;
      width:70%;
      height: 400px;
      }
  #innerdiv {
      width: 100%;
      height: 330px;
      overflow:auto;
      }
  #screeninnertab {
      border: 0px;
      width:  100%;
      height: 330px;
      }
  #screeninnertab td{
      border: 1px #000000 solid;
      }
  th+th+th {width:34%;}
  td+td {width:34%;}

  #printoutertab {
      visibility: hidden;
      }

    Und diese CSS wieder per link rel einbinden. Ich werde nun die screenouterTab-Tabelle nicht mehr ausführlich im Code anzeigen. Es wird sich an dieser Tabelle nichts mehr im Verlauf des Tutorials ändern. Ebenfalls werde ich den tbody Bereich kürzen. Auch hier wird sich nichts mehr ändern.

    Beispielcode HTML:

    <html>
 <head>
  <link rel="stylesheet" media="screen" href="screen.css">
  <link rel="stylesheet" media="print" href="print.css">
 </head>
 <body>
  <table id="screenoutertab">
    ..........
   </table>

  <table id="printoutertab">
   <thead>
    <tr>
     <th>Überschrift 1</th>
     <th>Überschrift 2</th>
     <th>Überschrift 3</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Fußnote 1</th>
     <th>Fußnote 2</th>
     <th>Fußnote 3</th>
    </tr>
   </tfoot>
   <tbody>
           <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            ........
            ........
            ........
    </tbody>
   </table>

  </body>
 </html>

    Nun werden wir die ersten Erfahrungen mit den Eigenarten der unterschiedlichen Browser machen.

    Um dieses Tutorial mit möglichst wenig Druckerfarbe und Papier absolvieren zu können, empfehle ich die Druckvoransicht zu wählen oder den PDF Creator zu installieren. Ihr könnt ihn hier herunterladen.
    Mit dem PDF-Creator ist es möglich, Internet Seiten als PDF-Datei abzuspeichern. Das Abspeichern als PDF-Dokument wird über das Druckermenü durchgeführt. Man wählt anstelle des Druckers den PDF Creator aus. Das Ergebnis des Druckers gleicht dem des PDF-Creators.

    Schaut sich man nun das erste Ergebnis in den verschiedenen Browsern an, wird man schnell feststellen, daß das Ergebnis nicht einmal annähernd zufriedenstellend ist.

    Hierzu mal drei Screenshots:

    Screenshot Firefox:

    Tbody Tabellenausdruck im Firefox

    Tbody Tabellenausdruck im Firefox

    Soweit sieht das Ergebnis noch in Ordnung aus. Schauen wir uns nun den Übergang von Seite 1 zu Seite 2 an:

    Screenshot Firefox:

    Tbody-Tabellenausdruck im Firefox Zwischenschritt 1

    Tbody-Tabellenausdruck im Firefox Zwischenschritt 1

    Hier kann man nun schon den ersten Fehler feststellen: Am Ende der ersten Seite wurde der Tfoot Bereich nicht wiederholt. Im Firefox Browser werden wir dies in den Griff bekommen. Im Opera sowie im Internet Explorer wird dies nicht unser einziges Problem sein.

    Schauen wir uns nun die Ergebnisse im Internet Explorer an:

    Screenshot Internet Explorer:

    Tbody Tabellenausdruck im Internet Explorer

    Tbody Tabellenausdruck im Internet Explorer

    Auch hier sieht es zu Beginn noch ganz gut aus.

    Schauen wir uns nun den Übergang zischen Blatt 1 und Blatt 2 an:

    Screenshot Internet Explorer:

    Tbody Tabellenausdruck im Internet Explorer

    Tbody Tabellenausdruck im Internet Explorer

    Auch hier wieder fehlt der Tfoot Bereich auf Seite 1. Doch das ist nicht alles beim Internet Explorer. Auf Seite 2 fehlt der thead Bereich. Und man kann ganz deutlich erkennen, daß der Internet Explorer innerhalb der Zeile den Seitenumbruch gemacht hat. Das ist ein ganz grober unschöner Fehler.

    Zuletzt schauen wir uns das Ergebnis in Opera an:

    Screenshot Opera:

    Tbody Tabellenausdruck in Opera

    Tbody Tabellenausdruck in Opera

    Als erstes fällt einem Betrachter bei diesem Screenshot auf, daß sich die Tabelle (im Vergleich zu Firefox und Internet Explorer) nicht über die komplette Breite der Seite erstreckt. Die Tabelle ist zusammengestaucht.

    Schauen wir uns nun den Übergang von Seite 1 zu Seite 2 im Opera an:

    Screenshot Opera:

    Tbody Tabellenausdruck im Opera

    Tbody Tabellenausdruck im Opera

    Im Opera wird es nun ganz schlimm. Auch hier fehlen wieder der tfoot Bereich am Ende von Seite 1 sowie der thead Bereich am Anfang von Seite 2. Doch das ist nicht alles. Opera ist ohne Hilfe nicht in der Lage, das Ende der Tabelle korrekt zu berrechnen (sobald mindestens ein Seitenwechsel vorhanden ist. Das Ende wird dann von Opera einfach mitten in die Tabelle gesetzt.

    Bei dieser Fülle von Fehlern in den unterschiedlichen Browsern kann man sich überhaut nicht vorstelle, daß man ein einigermaßen akzeptables Ergebnis erzielen kann. Wir werden es versuchen. Es wird nicht perfekt, aber es wird das beste Ergebnis sein, das man erzielen kann.

    Beginnen wir nun mit der Breite der Tabelle in Opera.

    Dazu werden wir nun die print.css abändern.

    Von der printoutertab löschen wir die Breiten und die Höhenangabe width und height.
    Wir löschen ebenfalls die Breitenangabe von th+th+th und td+td.

    Dafür fügen wir folgende Breitenangabe ein:
    #printoutertab tbody td {width: 400px;}
    Hiermit legen wir fest, daß alle td Zellen der printoutertab Tabelle 400 Pixel breit sein sollen.
    Eine breite von 400 Pixeln ist für drei Spalten ein optisch sehr gut aussehendes Ergebnis.

    Beispielcode print.css:

    #printoutertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 10px;
      left: 10px;
      }

  #screenoutertab {
          visibility:hidden;
      }

  #printoutertab tbody td {width: 400px;}

    Und schon haben wir das erste Problem gelöst.

    Hier die Screenshots:

    Screenshot Opera:

    Tabellenausdruck tbody im Opera

    Tabellenausdruck tbody im Opera

    Der Fehler am Ende der Tabelle besteht allerdings weiterhin:

    Screenshot Opera:

    tbody Tabelle Ausdruck Seitenwechsel im Opera Browser

    tbody Tabelle Ausdruck Seitenwechsel im Opera Browser

    Screenshot Firefox:

    Tbody Tabellenausdruck im Firefox

    Tbody Tabellenausdruck im Firefox

    Und der Übergang von Seite 1 zu Seite 2:

    Screenshot Firefox:

    Ausdruck einer tbody Tabelle im Firefox Seitenwechsel

    Ausdruck einer tbody Tabelle im Firefox Seitenwechsel

    Zu guter letzt wollen wir uns nochmal das Ergebnis im Internet Explorer ansehen:

    Screenshot Internet Explorer:

    tbody Tabelle im Internet Explorer ausgedruckt

    tbody Tabelle im Internet Explorer ausgedruckt

    Und beim Seitenumbruch haben wir das gleiche Problem wie zuvor:
    Screenshot Internet Explorer:

    tbody Tabelle im Internet Explorer ausgedruckt

    tbody Tabelle im Internet Explorer ausgedruckt

    Als nächstes nehmen wir uns das falsch berechnete Ende im Opera Browser vor:
    Wir fügen folgende Codezeile in unsere print.css ein: tbody tr {display: table-row-group;}
    Zur Erklärung: Offiziell heißt es, man könne die bestehenden Probleme mit folgenden drei Zeilen in den Griff bekommen:
    thead {display: table-header-group;}
    tfoot {display: table-footer-group;}
    tbody {display: table-row-group;}

    Diese display-Befehle fassen die Zellen zu einer Gruppe zusammen. Die Probleme wären angeblich damit beseitigt.
    Ich habe sehr lange mit diesen Befehlen herumexperimentiert und kein einziges, alle drei Browser bedienendes Ergebnis erzielen können.

    Habe ich allerdings NUR tbody tr {display: table-row-group;} eingefügt, kam ich meinem Wunschergebnis um einiges näher. Allerdings hat sich hier noch ein Opera Bug mit eingeschlichen, den ich Euch gleich zeigen werde.

    Demzufolge sieht die print.css nun folgendermaßen aus:

    Beispielcode print.css:

    #printoutertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 10px;
      left: 10px;
      }

  #screenoutertab {
          visibility:hidden;
      }

  #printoutertab tbody td {width: 220px;}
  tbody tr {display: table-row-group;}

    Ihr werdet gleich erschrecken. Nun sieht das Ganze sehr schlimm aus (und dennoch sind wir auf dem richtigen Weg:

    Screenshot Opera:

    tbody Tabelle mit table-row-group Ausdruck im Opera

    tbody Tabelle mit table-row-group Ausdruck im Opera

    Screenshot Opera:

    tbody Tabelle mit table-row-group Ausdruck beim Seitenumbruch im Opera

    tbody Tabelle mit table-row-group Ausdruck beim Seitenumbruch im Opera

    Jetzt ist das Ende der Tabelle richtig berechnet. Allerdings sind nun alle Zellen des tbody Bereichs in die erste Spalte gesetzt worden. Die erste Spalte wurde sehr breit und die anderen beiden viel zu schmal.
    Schaut Euch mal die erste Zeile der zeiten Seite an. Hier wurde nur der Wert der ersten Zelle ausgegeben. Die beiden anderen Zellen sind leer.

    Diesem Problem gehen wir im nächsten Tutorial auf den Grund.

    Related posts:

    1. HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 2 In unserem vorherigen Tutorial hatten wir zuletzt mehrere Probleme: Opera...
    2. Tabellen in HTML – Teil 3 Cellpadding und Cellspacing In diesem Tutorial möchte ich mich mit Abständen innerhalb der...
    3. Tabellen in HTML – Tutorial 2 der Rahmen ...Im letzten Tutorial habe ich erklärt, wie man die Rahmendicke...

    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

    ]]>     http://www.tutorialwelt.de/319/html-tabellen-tbody-scrollen-und-korrekt-ausdrucken-teil-1.htm/feed 2     CSS Tutorial – media Typen – link rel contra @import http://www.tutorialwelt.de/325/css-tutorial-link-rel-import.htm http://www.tutorialwelt.de/325/css-tutorial-link-rel-import.htm#comments Wed, 23 Sep 2009 15:21:39 +0000 admin http://www.tutorialwelt.de/?p=325 CSS-Tutorial erklärt, warum man zum einbinden von CSS Dateien @import verwenden sollte. In diesem hier muss ich diese Aussage wieder einschränken. Doch dazu später mehr.... Related posts:
    1. HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 1 Im letzten Tutorial habe ich Euch gezeigt, wie man bei...
    2. CSS-Tutorial – Wie man per CSS die Schriftgröße ändern kann Heute möchte ich Euch zeigen, wie man per CSS die...
    3. CSS Tutorial – CSS in eine HTML einbinden Viele Wege führen nach Rom. Um CSS in eine Seite...
    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.]]>     CSS Tutorial – media Typen – link rel contra @import

    Heute möchte ich Euch erklären, wie ihr festlegen könnt, welche CSS-Dateien geladen werden sollen, wenn es um die Anzeige auf dem Bildschirm, dem Drucker, einem mobilen Gerät (bspw. Handy) oder anderem geht.

    Ich habe bereits in einem anderen CSS-Tutorial erklärt, warum man zum einbinden von CSS Dateien @import verwenden sollte. In diesem hier muss ich diese Aussage wieder einschränken. Doch dazu später mehr.

    Es gibt verschiedene Medientypen in HTML. Früher gab es nur zwei Möglichkeiten, eine Internet-Seite anzuzeigen:
    1. Auf dem Bildschirm
    2. vom Drucker auf einem Blatt ausgedruckt oder in ein PDF exportiert.

    Heutzutage gibt es viel mehr Möglichkeiten.
    Handys können in der Regel inzwischen ebenfalls Webseiten anzeigen.
    Es gibt Beamer. Für Blinde Menschen computergesteuerte Sprachausgabe und und und….

    Ich werde Euch heute die Möglichkeiten aufzählen, die es seit dem CSS2-Standard gibt:

    Um eine allgemeine CSS einzubinden, verwendet man “all”:

    Beispielcode HTML:

             <head>
            <link rel="stylesheet" media="all" href="komplett.css">
         </head>

    Benötigt man eine CSS für den Drucker, sollte man splitten.

    1.: “all” für CSS-Code, der allgemein gültig ist, ganz gleich ob es sich um den Drucker oder den bildschirm handelt.

    2.: “print” wird für den Drucker verwendet

    3.: “screen” Screen wird für den Bildschirm verwendet.

    Beispielcode HTML:

             <head>
            <link rel="stylesheet" media="all" href="komplett.css">
            <link rel="stylesheet" media="print" href="print.css">
            <link rel="stylesheet" media="screen" href="screen.css">
         </head>

    Bei dem obigen Beispiel würde man eine komplett.css laden, die alle CSS Formatierungen beinhaltet, die auf Bildschirm und Drucker gleichermaßen angewendet werden. Hinzu käme eine print.css für den Drucker und eine screen.css für den Bildschirm.

    Man könnte theoretisch das gleiche auch per @import machen. (Wir erinnern uns daran, daß ich in einem anderen Tutorial geraten habe, @import zu verwenden, um ältere Browser, die kein CSS korrekt interpretieren können, auszuschließen.)

    Per @import würde dies folgendermaßen aussehen:

    Beispielcode HTML:

             <head>
           <style>
              @import url('komplett.css') all;
              @import url('print.css') print;
              @import url('screen.css') screen;
           </style>
         </head>

    So weit die Theorie. Praktisch gesehen, darf man @import nicht anwenden, sobald man CSS für verschiedene Medientypen aufsplittet. Daran ist mal wieder Microsoft mit seinem Internet Explorer schuld. Der Internet Explorer kann bis zur Version 7 die Import Regeln für verschiedene Medientypen nicht korrekt verarbeiten. Ab der Version 8 scheint Microsoft das endlich in den Griff bekommen zu haben.

    Da der Internet Explorer allerdings sehr weit verbreitet ist und diejenigen, die diesen Browser verwenden, meistens auch noch die älteren Versionen im Einsatz haben, wäre dies sehr unpraktisch.

    Wenn man also für verschiedene Medientypen optimiert, sollte man keine @import Regel einsetzen.

    Zuletzt möchte ich weitere Medientypen aufzählen, die man verwenden kann:

    aural – aural wird für die computergesteuerte Sprachausgabe verwendet.
    braille – braille wird für die Blindenschrift eingesetzt. Hierbei handelt es sich um Erhebungen, die ein Blinder Mensch mit seinen Fingern abtasten kann. Somit ist er in der Lage, den Text zu erfühlen.
    embossed – embossed ist vergleichbar mit braille. Hierbei handelt es sich um die Ausgabe für Blindendrucker.
    handheld – handheld wird für mobile Geräte verwendet (pocket pc, handy usw.)
    print – print ist für die Ausgabe am Drucker gedacht
    projection – projection ist für die Anzeige durch Beamer oder ähnlichen Geräten gedacht.
    screen – screen ist für die Bildschirmausgabe gedacht.
    tty – tty ist für die Ausgabe auf nicht-graphischen Medien wie Fernschreibern oder dem reinen Text Browser Lynx gedacht
    tv – tv ist gedacht für die Ausgabe an Fernsehgeräten mit geringer Bildschirmauflösung.

    Ihr seht: heutzutage gibt es schon viele Medienarten, von denen Internetseiten verarbeitet werden.
    Die wichtigsten sind selbstverständlich: screen, print und handheld.

    Related posts:

    1. HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 1 Im letzten Tutorial habe ich Euch gezeigt, wie man bei...
    2. CSS-Tutorial – Wie man per CSS die Schriftgröße ändern kann Heute möchte ich Euch zeigen, wie man per CSS die...
    3. CSS Tutorial – CSS in eine HTML einbinden Viele Wege führen nach Rom. Um CSS in eine Seite...

    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

    ]]>     http://www.tutorialwelt.de/325/css-tutorial-link-rel-import.htm/feed 1     Wie man in HTML Tabellen nur den tbody scrollt http://www.tutorialwelt.de/312/tabellen-nur-tbody-scrollen.htm http://www.tutorialwelt.de/312/tabellen-nur-tbody-scrollen.htm#comments Sat, 19 Sep 2009 00:34:17 +0000 admin http://www.tutorialwelt.de/?p=312
  • Tabellen in HTML – Teil 4 thead, tbody, tfoot ...Heute möchte ich Euch erklären, wie Ihr größere Tabellen in...
  • HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 2 In unserem vorherigen Tutorial hatten wir zuletzt mehrere Probleme: Opera...
  • HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 1 Im letzten Tutorial habe ich Euch gezeigt, wie man bei...
    • Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.]]>     HTML Tabellen nur tbody scrollen

    Ich habe es bereits in meinem letzten Tabellen Tutorial angesprochen: Um in allen Browsern den tbody Bereich scrollen zu können, muß ganz gewaltig getrickst werden. Und damit fangen wir heute an: Zuerst benötigen wir eine Standardtabelle mit einem thead, einem tfoot und einem tbody Bereich:

    Beispielcode HTML:

    <html>
 <body>
  <table>
   <thead>
    <tr>
     <th>Überschrift 1</th>
     <th>Überschrift 2</th>
     <th>Überschrift 3</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Fußnote 1</th>
     <th>Fußnote 2</th>
     <th>Fußnote 3</th>
    </tr>
   </tfoot>
   <tbody>
    <tr>
     <td>Zelle 1</td>
     <td>Zelle 2</td>
     <td>Zelle 3</td>
    </tr>
    </tbody>
   </table>
  </body>
 </html>

    Wir müssen, um tbody zu scrollen eine weitere Tabelle in den tbody Bereich einfügen. Dazu ist der erste Schritt, die drei td Zellen zu einer einzigen zusammenzufassen:

    Beispielcode HTML:

    <html>
 <body>
  <table>
   <thead>
    <tr>
     <th>Überschrift 1</th>
     <th>Überschrift 2</th>
     <th>Überschrift 3</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Fußnote 1</th>
     <th>Fußnote 2</th>
     <th>Fußnote 3</th>
    </tr>
   </tfoot>
   <tbody>
    <tr>
     <td colspan="3">Zelle 1</td>
    </tr>
    </tbody>
   </table>
  </body>
 </html>

    Mit colspan=”3″ teilen wir der Tabelle mit, daß sie die drei Zellen zu einer einzigen zusammenfügen soll.

    Nun machen wir weiter: Wir weisen der Tabelle eine id zu, damit wir die Tabelle per CSS formatieren können. Nennen wir die Tabelle outertab (für die äußere Tabelle):

    Beispielcode HTML:

    <html>
 <body>
  <table id="outertab">
   <thead>
    <tr>
     <th>Überschrift 1</th>
     <th>Überschrift 2</th>
     <th>Überschrift 3</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Fußnote 1</th>
     <th>Fußnote 2</th>
     <th>Fußnote 3</th>
    </tr>
   </tfoot>
   <tbody>
    <tr>
     <td colspan="3">Zelle 1</td>
    </tr>
    </tbody>
   </table>
  </body>
 </html>

    Nun möchte ich per CSS festlegen, daß die Tabelle einen Rahmen hat, der 1 Pixel breit und schwarz ist.
    Die Tabelle soll 20 Pixel von oben und links versetzt werden (ich möchte sie etwas freistehend haben), 70% breit und 400 Pixel hoch:

    Beispielcode HTML:

    <html>
 <head>
 <style type="text/css">
  #outertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 20px;
      left: 20px;
      width:70%;
      height: 400px;
      }
 </style>
 </head>
 <body>
  <table id="outertab">
   <thead>
    <tr>
     <th>Überschrift 1</th>
     <th>Überschrift 2</th>
     <th>Überschrift 3</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Fußnote 1</th>
     <th>Fußnote 2</th>
     <th>Fußnote 3</th>
    </tr>
   </tfoot>
   <tbody>
    <tr>
     <td colspan="3">Zelle 1</td>
    </tr>
    </tbody>
   </table>
  </body>
 </html>

    Nun müssen wir in den tbody Bereich einen Div Container einfügen. Diesem div Container geben ir eine id innerdiv:

    Beispielcode HTML:

    <html>
 <head>
 <style type="text/css">
  #outertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 20px;
      left: 20px;
      width:70%;
      height: 400px;
      }
 </style>
 </head>
 <body>
  <table id="outertab">
   <thead>
    <tr>
     <th>Überschrift 1</th>
     <th>Überschrift 2</th>
     <th>Überschrift 3</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Fußnote 1</th>
     <th>Fußnote 2</th>
     <th>Fußnote 3</th>
    </tr>
   </tfoot>
   <tbody>
    <tr>
     <td colspan="3">
       <div id="innerdiv">
       </div>
     </td>
    </tr>
    </tbody>
   </table>
  </body>
 </html>

    Der div Container soll 330 Pixel hoch (etwa 70px kleiner als die Tabelle), 100% breit und als overflow den Wert auto haben:

    Beispielcode HTML:

    <html>
 <head>
 <style type="text/css">
  #outertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 20px;
      left: 20px;
      width:70%;
      height: 400px;
      }
  #innerdiv {
      width: 100%;
      height: 330px;
      overflow:auto;
      }
 </style>
 </head>
 <body>
  <table id="outertab">
   <thead>
    <tr>
     <th>Überschrift 1</th>
     <th>Überschrift 2</th>
     <th>Überschrift 3</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Fußnote 1</th>
     <th>Fußnote 2</th>
     <th>Fußnote 3</th>
    </tr>
   </tfoot>
   <tbody>
    <tr>
     <td colspan="3">
       <div id="innerdiv">
       </div>
     </td>
    </tr>
    </tbody>
   </table>
  </body>
 </html>

    Nun möchte ich in den Div-Container eine zweite Tabelle setzen. Dieser Tabelle möchte ich die id innertab zuweisen. Diese Tabelle sollte nun zu Testzwecken schon mehrere tr Zeilen beinhalten. Wir wollen schließlich die Tabelle auch scrollen:

    Beispielcode HTML:

    <html>
 <head>
 <style type="text/css">
  #outertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 20px;
      left: 20px;
      width:70%;
      height: 400px;
      }
  #innerdiv {
      width: 100%;
      height: 330px;
      overflow:auto;
      }
 </style>
 </head>
 <body>
  <table id="outertab">
   <thead>
    <tr>
     <th>Überschrift 1</th>
     <th>Überschrift 2</th>
     <th>Überschrift 3</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Fußnote 1</th>
     <th>Fußnote 2</th>
     <th>Fußnote 3</th>
    </tr>
   </tfoot>
   <tbody>
    <tr>
     <td colspan="3">
       <div id="innerdiv">
          <table id="innertab">
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
          </table>
       </div>
     </td>
    </tr>
    </tbody>
   </table>
  </body>
 </html>

    Diese innere Tabelle sollte eine Höhe von 330 Pixel und eine Breite von 100% haben. Der Rand sollte auf 0px gesetzt werden (ist aber kein muss):

    Beispielcode HTML:

    <html>
 <head>
 <style type="text/css">
  #outertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 20px;
      left: 20px;
      width:70%;
      height: 400px;
      }
  #innerdiv {
      width: 100%;
      height: 330px;
      overflow:auto;
      }
  #innertab {
      border: 0px;
      width:  100%;
      height: 330px;
      }
 </style>
 </head>
 <body>
  <table id="outertab">
   <thead>
    <tr>
     <th>Überschrift 1</th>
     <th>Überschrift 2</th>
     <th>Überschrift 3</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Fußnote 1</th>
     <th>Fußnote 2</th>
     <th>Fußnote 3</th>
    </tr>
   </tfoot>
   <tbody>
    <tr>
     <td colspan="3">
       <div id="innerdiv">
          <table id="innertab">
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
          </table>
       </div>
     </td>
    </tr>
    </tbody>
   </table>
  </body>
 </html>

    Zu guter letzt noch ein paar Schönheitsmakulaturen: Die Zellen in der innertab Tabelle sollten schon einen Rand haben.

    Beispielcode HTML:

    <html>
 <head>
 <style type="text/css">
  #outertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 20px;
      left: 20px;
      width:70%;
      height: 400px;
      }
  #innerdiv {
      width: 100%;
      height: 330px;
      overflow:auto;
      }
  #innertab {
      border: 0px;
      width:  100%;
      height: 330px;
      }
  #innertab td{
      border: 1px #000000 solid;
      }
 </style>
 </head>
 <body>
  <table id="outertab">
   <thead>
    <tr>
     <th>Überschrift 1</th>
     <th>Überschrift 2</th>
     <th>Überschrift 3</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Fußnote 1</th>
     <th>Fußnote 2</th>
     <th>Fußnote 3</th>
    </tr>
   </tfoot>
   <tbody>
    <tr>
     <td colspan="3">
       <div id="innerdiv">
          <table id="innertab">
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
          </table>
       </div>
     </td>
    </tr>
    </tbody>
   </table>
  </body>
 </html>

    Und das rechte heading sollte auf 34% gesetzt werden, da es über dem Scrollbalken sitzt. Hier werden die Zellen um etwa 20 Pixel versetzt. Bei mir sah es besser aus, wenn ich die mittlere Spalte der innertab ebenfalls auf 34% gesetzt habe. Das Endergebnis sähe dann folgendermaßen aus:

    Beispielcode HTML:

    <html>
 <head>
 <style type="text/css">
  #outertab {
      border: 1px #000000 solid;
      position: absolute;
      top: 20px;
      left: 20px;
      width:70%;
      height: 400px;
      }
  #innerdiv {
      width: 100%;
      height: 330px;
      overflow:auto;
      }
  #innertab {
      border: 0px;
      width:  100%;
      height: 330px;
      }
  #innertab td{
      border: 1px #000000 solid;
      }
  th+th+th {width:34%;}
  td+td {width:34%;}

 </style>
 </head>
 <body>
  <table id="outertab">
   <thead>
    <tr>
     <th>Überschrift 1</th>
     <th>Überschrift 2</th>
     <th>Überschrift 3</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <th>Fußnote 1</th>
     <th>Fußnote 2</th>
     <th>Fußnote 3</th>
    </tr>
   </tfoot>
   <tbody>
    <tr>
     <td colspan="3">
       <div id="innerdiv">
          <table id="innertab">
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
            <tr>
             <td>Zelle 1</td>
             <td>Zelle 2</td>
             <td>Zelle 3</td>
            </tr>
          </table>
       </div>
     </td>
    </tr>
    </tbody>
   </table>
  </body>
 </html>

    Wer die th+th+th Notation nicht kennt: mit th+th wird das zweite heading angesprochen. Mit th+th+th das Dritte usw.

    Nun sieht die Tabelle in allen Browsern gleich aus und der tbody Bereich ist scrollbar. Ihr könnt mit dem Ergebnis ein wenig herumexperimentieren. Ich habe mir viele Lösungswege angesehen, aber dieser ist wirklich der einzige, der in fast allen Browsern das gleiche Ergebnis liefert.

    Ihr habt hier allerdings einen Nachteil: Der Drucker spielt hier nicht mit. Normalerweise sollte der Drucker auf jeder neuen Seite den thead und den tfoot Bereich ausdrucken. Um den Drucker ebenfalls zu unterstützen muß nochmals getrickst werden. Aber das zeige ich Euch im nächsten Tabellen Tutorial.

    Related posts:

    1. Tabellen in HTML – Teil 4 thead, tbody, tfoot ...Heute möchte ich Euch erklären, wie Ihr größere Tabellen in...
    2. HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 2 In unserem vorherigen Tutorial hatten wir zuletzt mehrere Probleme: Opera...
    3. HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 1 Im letzten Tutorial habe ich Euch gezeigt, wie man bei...

    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

    ]]>     http://www.tutorialwelt.de/312/tabellen-nur-tbody-scrollen.htm/feed 1     Tabellen in HTML – Teil 4 thead, tbody, tfoot http://www.tutorialwelt.de/259/html-tabellen-teil-4-tbody.htm http://www.tutorialwelt.de/259/html-tabellen-teil-4-tbody.htm#comments Fri, 11 Sep 2009 21:13:57 +0000 admin http://www.tutorialwelt.de/?p=259
  • Wie man in HTML Tabellen nur den tbody scrollt ...Ich habe es bereits in meinem letzten Tabellen Tutorial angesprochen:...
  • HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 2 In unserem vorherigen Tutorial hatten wir zuletzt mehrere Probleme: Opera...
  • HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 1 Im letzten Tutorial habe ich Euch gezeigt, wie man bei...
    • Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.]]>     Tabellen in HTML – Teil 4 thead, tbody, tfoot

    Heute möchte ich Euch erklären, wie Ihr größere Tabellen in einen Kopfbereich (thead), einen Rumpfbereich (tbody) und einen Fußbereich (tfoot) untergliedert.

    Diese Untergliederung hat folgende Gründe:

    1. Mann kann (theoretisch) hierbei nun die Kopfzeile und die Fußzeile bei einer großen Tabelle fixieren, während der Rumpfbereich scrollbar ist.

    2. Möchte jemand die Tabelle ausdrucken, kann der Drucker auf jeder Seite die Kopfzeile und die Fußzeile erneut drucken. Nur der Rumpfbereich wird weitergeführt.

    Der Kopfbereich wird zwischen zwei thead, der Fußbereich zwischen zwei tfoot und der Rumpfbereich zwischen zwei tbody-Tags gesetzt.

    In den Kopfbereich setzt man typischerweise die Headings… also die Überschriften der Spalten.

    Der Aufbau einer solchen Tabelle würde nun folgendermaßen aussehen:

    Beispielcode HTML:

    <html>
 <body>
  <table width="40%" border="1">
   <thead>
    <tr>
     <th>Überschrift 1</th>
     <th>Überschrift 2</th>
     <th>Überschrift 3</th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <td>Fußnote 1</td>
     <td>Fußnote 2</td>
     <td>Fußnote 3</td>
    </tr>
   </tfoot>
   <tbody>
    <tr>
     <td>Zelle 1</td>
     <td>Zelle 2</td>
     <td>Zelle 3</td>
    </tr>
    <tr>
      <td>Zelle 4</td>
      <td>Zelle 5</td>
      <td>Zelle 6</td>
     <tr>
    </tbody>
   </table>
  </body>
 </html>

    Ihr denkt Euch jetzt vielleicht, daß ich bei dem Quellcode einen Fehler gemacht haben muss. Der Fußbereich kommt bei mir vor dem Rumpfbereich. Das MUSS so sein. Der Browser will zuerst wissen, ob überhaupt ein Fußbereich vorhanden ist. Nachdem er sich diese Information eingeholt hat, interpretiert er den Rumpfbereich weiter.

    So weit die Theorie. In der Praxis sieht das ganz anders aus. Wer versucht, der Tabelle eine feste Größe zu geben (wie es vorgesehen ist), den Kopf- und den Fußbereich zu fixieren und nur den Rumpfbereich zu scrollen, wird dabei wunde Finger und lodernde Hirnzellen erleben. Das erste Erfolgserlebnis wird man bei Mozilla Firefox haben. Mozilla Firefox ist bislang der einzige Browser dessen Entwickler sich mit thead, tbody und tfoot richtig auseinandergesetzt haben. Bei Opera kann man das Ganze auch noch nach etwas längerem experimentieren bewerkstelligen. Beim Internet Explorer wird man schnell feststellen, daß Microsoft hier geschlampt oder schlichtweg geschlafen hat (oder vielleicht beides?). Beim Internet Explorer gibt es allerdings eine getrickste Lösung.

    Setzen wir uns nun erst einmal mit dem Drucker auseinander. Ursprünglich angedacht war es, daß der Drucker Kopf und Fußzeile bei jeder neuen Seite wiederholt. Praktisch gesehen funktioniert das Ganze mit dem Drucker ganz gut (bei modernen Browsern). Man sollte allerdings hierfür noch folgenden CSS Code anwenden:

    Beispielcode CSS:

    THEAD           { display: table-header-group }
TBODY           { display: table-row-group }
TFOOT           { display: table-footer-group }

    Laut CSS2 sollten die Druckprogramme mit diesen Einstellungen den Code so interpretieren, daß Kopf- und Fußzeile auf jeder Seite neu gesetzt werden. Laut HTML Vorgabe sollte dies auch ohne CSS möglich sein. Faktisch gesehen erzielt man das “beste” Ergebnis mit dem CSS Code.

    Wie kann man denn nun eine Tabelle so darstellen, daß man einen fixierten thead Kopfbereich, einen fixierten tfoot Fußbereich und einen scrollbaren tbody Rumpfbereich hat?

    Das möchte ich Euch im nächsten Tutorial erklären. Hier muss man schon ganz tief in die Trickkiste greifen.

    Related posts:

    1. Wie man in HTML Tabellen nur den tbody scrollt ...Ich habe es bereits in meinem letzten Tabellen Tutorial angesprochen:...
    2. HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 2 In unserem vorherigen Tutorial hatten wir zuletzt mehrere Probleme: Opera...
    3. HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 1 Im letzten Tutorial habe ich Euch gezeigt, wie man bei...

    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

    ]]>     http://www.tutorialwelt.de/259/html-tabellen-teil-4-tbody.htm/feed 0     Tabellen in HTML – Teil 3 Cellpadding und Cellspacing http://www.tutorialwelt.de/251/cellpadding-cellspacing.htm http://www.tutorialwelt.de/251/cellpadding-cellspacing.htm#comments Mon, 07 Sep 2009 14:46:24 +0000 admin http://www.tutorialwelt.de/?p=251
  • Tabellen in HTML – Tutorial 2 der Rahmen ...Im letzten Tutorial habe ich erklärt, wie man die Rahmendicke...
  • HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 2 In unserem vorherigen Tutorial hatten wir zuletzt mehrere Probleme: Opera...
  • HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 1 Im letzten Tutorial habe ich Euch gezeigt, wie man bei...
    • Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.]]>     Tabellen in HTML – Teil 3

    In diesem Tutorial möchte ich mich mit Abständen innerhalb der Tabelle beschäftigen.

    Hierzu gibt es zwei entscheidende Begriffe: cellpadding und cellspacing.

    Für dieses Tutorial legen wir eine Standardtabelle mit 3 Spalten und 3 Zeilen an.
    In jede Zelle schreiben wir einen kurzen Text. Beispielsweise: Zelle 1, Zelle 2, Zelle 3 usw. Wir setzen die Rahmendicke auf 1. Ich habe die Breite meiner Tabelle auf 40% festgelegt.

    Der Code sieht dann folgendermaßen aus:

    Beispielcode HTML:

    <html>
 <body>
 <table width="40%" border="1">
 <tr>
 <td>Zelle 1</td>
 <td>Zelle 2</td>
 <td>Zelle 3</td>
 </tr>
 <tr>
 <td>Zelle 4</td>
 <td>Zelle 5</td>
 <td>Zelle 6</td>
 </tr>
 <tr>
 <td>Zelle 7</td>
 <td>Zelle 8</td>
 <td>Zelle 9</td>
 <tr>
 </table>
 </body>
 </html>

    Das Ergebnis sieht nun folgendermaßen aus:

    Im Internet Explorer:

    HTML leere Tabelle im Internet Explorer

    HTML leere Tabelle im Internet Explorer

    Im Firefox:

    HTML leere Tabelle im Firefox

    HTML leere Tabelle im Firefox

    Im Opera:

    HTML leere Tabelle im Opera

    HTML leere Tabelle im Opera

    Die Schrift ist regelrecht an den Rand geklatscht. Das sieht nicht wirklich schön aus. Damit die Schrift einen Abstand zum Zellenrand bekommt fügen wir das Element cellpadding ein:

    Beispielcode HTML:

    <html>
 <body>
 <table width="40%" border="1" cellpadding="5">
 <tr>
 <td>Zelle 1</td>
 <td>Zelle 2</td>
 <td>Zelle 3</td>
 </tr>
 <tr>
 <td>Zelle 4</td>
 <td>Zelle 5</td>
 <td>Zelle 6</td>
 </tr>
 <tr>
 <td>Zelle 7</td>
 <td>Zelle 8</td>
 <td>Zelle 9</td>
 <tr>
 </table>
 </body>
 </html>

    Nun kann man deutlich den Abstand erkennen. Das sieht schon viel besser aus.

    Im Internet-Explorer:

    HTML Tabelle Cellpadding im Internet Explorer

    HTML Tabelle Cellpadding im Internet Explorer

    Im Firefox:

    HTML Tabelle Cellpadding im Firefox

    HTML Tabelle Cellpadding im Firefox

    Im Opera:

    HTML Tabelle Cellpadding im Opera

    HTML Tabelle Cellpadding im Opera

    Es ist auch möglich den Abstand zwischen den Zellen zu vergrößern. Dazu verwenden wir das cellspacing Element:

    Beispielcode HTML:

    <html>
 <body>
 <table width="40%" border="1" cellpadding="5" cellspacing="10">
 <tr>
 <td>Zelle 1</td>
 <td>Zelle 2</td>
 <td>Zelle 3</td>
 </tr>
 <tr>
 <td>Zelle 4</td>
 <td>Zelle 5</td>
 <td>Zelle 6</td>
 </tr>
 <tr>
 <td>Zelle 7</td>
 <td>Zelle 8</td>
 <td>Zelle 9</td>
 <tr>
 </table>
 </body>
 </html>

    Und so siehts aus:

    Im Internet-Explorer:

    HTML Tabelle cellspacing im Internet Explorer

    HTML Tabelle cellspacing im Internet Explorer

    Im Firefox:

    HTML Tabelle cellspacing im Firefox

    HTML Tabelle cellspacing im Firefox

    Im Opera:

    HTML Tabelle cellspacing im Opera

    HTML Tabelle cellspacing im Opera

    Related posts:

    1. Tabellen in HTML – Tutorial 2 der Rahmen ...Im letzten Tutorial habe ich erklärt, wie man die Rahmendicke...
    2. HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 2 In unserem vorherigen Tutorial hatten wir zuletzt mehrere Probleme: Opera...
    3. HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 1 Im letzten Tutorial habe ich Euch gezeigt, wie man bei...

    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

    ]]>     http://www.tutorialwelt.de/251/cellpadding-cellspacing.htm/feed 0     Tabellen in HTML – Tutorial 2 der Rahmen http://www.tutorialwelt.de/210/tabellen-in-html-tutorial-2-der-rahmen.htm http://www.tutorialwelt.de/210/tabellen-in-html-tutorial-2-der-rahmen.htm#comments Sat, 05 Sep 2009 13:48:59 +0000 admin http://www.tutorialwelt.de/?p=210
  • Tabellen in HTML – Teil 3 Cellpadding und Cellspacing In diesem Tutorial möchte ich mich mit Abständen innerhalb der...
  • HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 2 In unserem vorherigen Tutorial hatten wir zuletzt mehrere Probleme: Opera...
  • HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 1 Im letzten Tutorial habe ich Euch gezeigt, wie man bei...
    • Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.]]>     Rahmen der Tabellen in HTML – Tutorial

    Im letzten Tutorial habe ich erklärt, wie man die Rahmendicke einer Tabelle in HTML ändern kann. In diesem Tutorial gehe ich näher auf den Rahmen ein.

    Viele Webdesigner und auch HTML-Programme wie Frontpage und Co. nutzen gerne Tabellen, um Ihr Seitenlayout damit zu gestalten. Ich kann davon nur abraten. Dafür sind Tabellen nicht gedacht. Trotzdem sollte man die Möglichkeiten kennen, die einem HTML im Umgang mit Tabellen bieten.

    Wir starten mit einer Standardtabelle: Rahmendicke: 1, Tabellenbreite: 30%, alle Zellen mit &nbsp; gefüllt:

    Beispielcode HTML:

    <html>
 <body>
 <table width="30%" border="1">
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <tr>
 </table>
 </body>
 </html>

    Ergebnis Internet Explorer:

    leere Tabelle im internet Explorer

    leere Tabelle im internet Explorer

    Ergebnis Firefox:

    leere Tabelle im Firefox

    leere Tabelle im Firefox

    Ergebnis Opera:

    leere Tabelle im Opera

    leere Tabelle im Opera

    Manchmal möchte man bei seiner Tabelle überhaupt keinen Rahmen haben.

    Den Rahmen kann man mit border=”0″ ausblenden.

    Beispielcode HTML:

    <html>
 <body>
 <table width="30%" border="0">
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <tr>
 </table>
 </body>
 </html>

    Doch das möchten wir in diesem Tutorial nicht machen. Wir wollen uns weiter mit dem Rahmen beschäftigen. Wenn Sie sich die obigen Screens genauer ansehen, dann können Sie erkennen, daß um die einzelnen Zellen auch nochmal ein Rahmen gezogen wurde. Der Tabellenrahmen. Diesen Rahmen können wir mit dem Frame-Element ansprechen. Um den Rahmen der Tabelle (und nicht der Zellen) verschinden zu lassen setzen wir für das frame-Element den Wert void. Void ist bekannt aus verschiedenen Programmiersprachen und steht für ein leeres Ergebnis.

    Beispielcode HTML:

    <html>
 <body>
 <table width="30%" border="1" frame="void">
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <tr>
 </table>
 </body>
 </html>

    nun beginnen die Ergebnisse sich deutlich zu unterscheiden:

    unschön ist das Ergebnis im Internet Explorer. Es sieht irgendwie fehlerhaft aus. Das hängt damit zusammen, daß der Internet Explorer die Einstellungen für den Tabellenrahmen auch auf die Umrandung der Zellen anwendet:

    Tabelle im Internet Explorer Frame=void

    Tabelle im Internet Explorer Frame=void

    Das Ergebnis im Firefox:

    Tabelle im Firefox Frame=void

    Tabelle im Firefox Frame=void

    und das Ergebnis im Opera:

    Tabelle im Opera Frame=void

    Tabelle im Opera Frame=void

    Um den Tabellenrahmen nur für den oberen Rand anzuzeigen, muss man dem Frame Element den Wert above zuweisen:

    Beispielcode HTML:

    <html>
 <body>
 <table width="30%" border="1" frame="above">
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <tr>
 </table>
 </body>
 </html>

    Das Ergebnis im Internet Explorer:

    Tabelle im Internet Explorer Frame=above

    Tabelle im Internet Explorer Frame=above

    Ergebnis im Firefox:

    Tabelle im Firefox Frame=above

    Tabelle im Firefox Frame=above

    Ergebnis im Opera:

    Tabelle im Opera Frame=above

    Tabelle im Opera Frame=above

    Das gleiche kann man nun für den unteren Rahmen machen. Um nur den unteren Tabellenrahmen anzeigen zu lassen müssen wir dem Frame Element den Wert below zuweisen:

    Beispielcode HTML:

    <html>
 <body>
 <table width="30%" border="1" frame="below">
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <tr>
 </table>
 </body>
 </html>

    Das Ergebnis im Internet-Explorer:

    Tabelle im Internet Explorer Frame=below

    Tabelle im Internet Explorer Frame=below

    Das Ergbenis im Firefox:

    Tabelle im Firefox Frame=below

    Tabelle im Firefox Frame=below

    Das Ergebnis im Opera:

    Tabelle im Opera Frame=below

    Tabelle im Opera Frame=below

    Um nur den rechten Rahmen anzeigen zu lassen, weisen wir dem frame Element den Wert rhs zu (rhs ist die Abkürzung von right hand side:

    Beispielcode HTML:

    <html>
 <body>
 <table width="30%" border="1" frame="rhs">
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <tr>
 </table>
 </body>
 </html>

    Das Ergebnis im Internet-Explorer:

    Tabelle im Internet Explorer Frame=rhs

    Tabelle im Internet Explorer Frame=rhs

    Das Ergebnis im Firefox:

    Tabelle im Firefox Frame=rhs

    Tabelle im Firefox Frame=rhs

    Das Ergebnis im Opera:

    Tabelle im Opera Frame=rhs

    Tabelle im Opera Frame=rhs

    Um den linken Tabellenrahmen anzeigen zu lassen weisen wir dem frame-Element den Wert lhs zu:

    Beispielcode HTML:

    <html>
 <body>
 <table width="30%" border="1" frame="lhs">
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <tr>
 </table>
 </body>
 </html>

    Das Ergbnis im Internet-Explorer:

    Tabelle im Internet Explorer frame=lhs

    Tabelle im Internet Explorer frame=lhs

    Das Ergebnis im Firefox:

    Tabelle im Firefox frame=lhs

    Tabelle im Firefox frame=lhs

    Das Ergebnis im Opera:

    Tabelle im Opera frame=lhs

    Tabelle im Opera frame=lhs

    Man kann auch den rechten und den linken Rahmen gleichzeitig anzeigen lassen. Dazu müssen wir nur dem Frame Element den Wert hsides zuweisen.

    Beispielcode HTML:

    <html>
 <body>
 <table width="30%" border="1" frame="vsides">
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <tr>
 </table>
 </body>
 </html>

    Das Ergebnis im Internet Explorer:

    Tabelle im Internet Explorer frame=vsides

    Tabelle im Internet Explorer frame=vsides

    Das Ergebnis im Firefox:

    Tabelle im Firefox frame=vsides

    Tabelle im Firefox frame=vsides

    Das Ergebnis im Opera:

    Tabelle im Opera frame=vsides

    Tabelle im Opera frame=vsides

    Um den oberen und den unteren Rahmen gleichzeitig anzeigen zu lassen müssen wir nur dem Frame Element den Wert vsides zuweisen:

    Beispielcode HTML:

    <html>
 <body>
 <table width="30%" border="1" frame="hsides">
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <tr>
 </table>
 </body>
 </html>

    Das Ergebnis im Internet Explorer:

    Tabelle im Internet Explorer frame=hsides

    Tabelle im Internet Explorer frame=hsides

    Das Ergebnis im Firefox:

    Tabelle im Firefox frame=hsides

    Tabelle im Firefox frame=hsides

    Das Ergebnis im Opera:

    Tabelle im Opera frame=hsides

    Tabelle im Opera frame=hsides

    Related posts:

    1. Tabellen in HTML – Teil 3 Cellpadding und Cellspacing In diesem Tutorial möchte ich mich mit Abständen innerhalb der...
    2. HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 2 In unserem vorherigen Tutorial hatten wir zuletzt mehrere Probleme: Opera...
    3. HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 1 Im letzten Tutorial habe ich Euch gezeigt, wie man bei...

    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

    ]]>     http://www.tutorialwelt.de/210/tabellen-in-html-tutorial-2-der-rahmen.htm/feed 0     Tabellen in HTML – Teil 1 http://www.tutorialwelt.de/180/tabellen-in-html-teil-1.htm http://www.tutorialwelt.de/180/tabellen-in-html-teil-1.htm#comments Tue, 01 Sep 2009 02:22:13 +0000 admin http://www.tutorialwelt.de/?p=180
  • HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 2 In unserem vorherigen Tutorial hatten wir zuletzt mehrere Probleme: Opera...
  • Tabellen in HTML – Teil 3 Cellpadding und Cellspacing In diesem Tutorial möchte ich mich mit Abständen innerhalb der...
  • Tabellen in HTML – Tutorial 2 der Rahmen ...Im letzten Tutorial habe ich erklärt, wie man die Rahmendicke...
    • Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.]]>     Tabellen in HTML – Tutorial Teil 1

    Heute möchte ich damit beginnen Euch zu erklären, wie Ihr Tabellen in HTML erstellen könnt.

    Das ist ein sehr umfangreiches Thema. Deshalb werde ich dieses Tutorial splitten.

    Um in HTML eine Tabelle zu erstellen, verwendet man table-Tags:

    Beispielcode HTML:

    <html>
 <body>
  <table>
  </table>
 </body>
</html>

    Zwischen beide Table Tags müssen nun für jede Zeile td-Tags gesetzt werden.

    Wenn man eine Tabelle mit beispielsweise drei Zeilen erstellen möchte, muss man dreimal tr-Tags einsetzen. tr ist die Abkürzung von table row. Hierfür sollte der Aufbau folgendermaßen aussehen:

    Beispielcode HTML:

    <html>
 <body>
  <table>
  <tr></tr>
  <tr></tr>
  <tr></tr>
  </table>
 </body>
</html>

    Das ist allerdings noch nicht alles: Zuletzt müssen wir noch festlegen, wieviele Spalten nun in den einzelnen Zeilen vorhanden sein sollen. Das machen wir mit td-Tags. td ist die Abkürzung von table data… also Datenzellen.

    Beispielcode HTML:

    <html>
 <body>
  <table>
  <tr>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
  <tr>
  </table>
 </body>
</html>

    Doch was ist nun das? Ein paar schmale Kästchen? Das liegt daran, daß wir der Tabelle weder eine Breite vorgegeben, noch Inhalte in die Zellen eingefügt haben. Als leeren Inhalt kann man ein &nbsp; nehmen.:

    Beispielcode HTML:

    <html>
 <body>
  <table width="100%">
  <tr>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
  <tr>
  </table>
 </body>
</html>

    Wir können nun auch die Höhe einzelner Spalten festlegen:

    Beispielcode HTML:

    <html>
 <body>
  <table width="100%">
  <tr>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
  <tr height="70">
   <td>&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
  <tr height="170">
   <td>&nbsp;</td>
   <td>&nbsp;</td>
  <tr>
  </table>
 </body>
</html>

    Wir können die Farben jeder einzelnen Zelle in der Tabelle ändern:

    Beispielcode HTML:

    <html>
 <body>
  <table width="100%">
  <tr>
   <td bgcolor="#ff0000">&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
  <tr height="70">
   <td>&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
  <tr height="170">
   <td>&nbsp;</td>
   <td bgcolor="#00ff00">&nbsp;</td>
  <tr>
  </table>
 </body>
</html>

    Wir können auch die Rahmendicke ändern. Dazu verwenden wir das border Element:

    Beispielcode HTML:

    <html>
 <body>
  <table width="100%" border="5">
  <tr>
   <td bgcolor="#ff0000">&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
  <tr height="70">
   <td>&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
  <tr height="170">
   <td>&nbsp;</td>
   <td bgcolor="#00ff00">&nbsp;</td>
  <tr>
  </table>
 </body>
</html>

    Tabellen sollten in der Regel auch eine Überschriften-Zeile haben, also eine Zeile, die die Inhalte beschreibt. Dazu ersetzen wir die ersten tds mit th. Th ist die Abkürzung von table heading.

    Beispielcode HTML:

    <html>
 <body>
  <table width="100%" border="5">
  <tr>
   <th>Überschrift 1</th>
   <th>Überschrift 2</th>
  </tr>
  <tr height="70">
   <td>&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
  <tr height="170">
   <td>&nbsp;</td>
   <td bgcolor="#00ff00">&nbsp;</td>
  <tr>
  </table>
 </body>
</html>

    Im nächsten Tutorial erkläre ich Euch die verschiedenen Gestaltungsmöglichkeiten einer Tabelle.

    Related posts:

    1. HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 2 In unserem vorherigen Tutorial hatten wir zuletzt mehrere Probleme: Opera...
    2. Tabellen in HTML – Teil 3 Cellpadding und Cellspacing In diesem Tutorial möchte ich mich mit Abständen innerhalb der...
    3. Tabellen in HTML – Tutorial 2 der Rahmen ...Im letzten Tutorial habe ich erklärt, wie man die Rahmendicke...

    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

    ]]>     http://www.tutorialwelt.de/180/tabellen-in-html-teil-1.htm/feed 0     Kommentare im HTML-Quellcode http://www.tutorialwelt.de/171/kommentare-im-html-quellcode.htm http://www.tutorialwelt.de/171/kommentare-im-html-quellcode.htm#comments Fri, 28 Aug 2009 12:33:42 +0000 admin http://www.tutorialwelt.de/?p=171
  • Bilder suchmaschinenoptimiert in HTML einbinden Heute erkläre ich Ihnen, wie man in HTML Bilder einfügen...
  • Formulare in HTML Teil 1 Manchmal ist es zwingend notwendig mit seinen Besuchern Rücksprache zu...
  • Tabellen in HTML – Teil 1 Heute möchte ich damit beginnen Euch zu erklären, wie Ihr...
    • Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.]]>     Kommentare in HTML

    Wenn man an mehreren Projekten arbeitet, können Kommentare schon sinnvoll sein. Sie sind sehr hilfreich, wenn man auch nach längerer Zeit gezwungen ist, den Quellcode nochmals zu überarbeiten.
    Speziell wenn man im Team arbeitet, ist der Einsatz von Kommentaren unerlässlich.

    Kommentare sind nur im Quellcode zu sehen.

    Sie sind für den Besucher unsichtbar.

    So fügt man einen Kommentar in seinen HTML Quellcode ein:

    Beispielcode HTML:

    <html>
 <body>
  <-- Dies ist ein kommentar, der bei der Ansicht des Quellcodes weiterhelfen kann -->
  <-- Kommentare können auch
  über mehrere Zeilen gehen
  ohne, daß dies Schierigkeiten machen würde -->
 </body>
</html>

    Kommentare können, wie Ihr oben sehen könnt, über mehrere Zeilen ausgedehnt werden.

    Früher ging man mit Kommentaren spärlich um, da die Downloadgeschwindigkeit im Netz doch sehr niedrig war und Kommentare die HTML-Datei vergrößern. In DSL-Zeiten machen ein paar Kilobytes mehr oder weniger kaum noch etwas aus. Selbstverständlich sollte man keine Bibeln als Kommentare hinterlassen (das wäre zuvie des Guten), aber in normalereise wird der Besucher davon kaum etwas merken.

    Related posts:

    1. Bilder suchmaschinenoptimiert in HTML einbinden Heute erkläre ich Ihnen, wie man in HTML Bilder einfügen...
    2. Formulare in HTML Teil 1 Manchmal ist es zwingend notwendig mit seinen Besuchern Rücksprache zu...
    3. Tabellen in HTML – Teil 1 Heute möchte ich damit beginnen Euch zu erklären, wie Ihr...

    Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

    ]]>     http://www.tutorialwelt.de/171/kommentare-im-html-quellcode.htm/feed 0