User:Ccsmith/sandbox/tabs

<< vorheriges Kapitel nächstes Kapitel >>

 Anordnung von Tabellen float: right

Bisher wir haben die Schaffung von Tabellen gelernt und wie sie gut auszusehen macht. Wir müssen jedoch anschauen, um wie sie auf einer Seite platziert werden und wie sie andere Elemente auf der Seite beeinflussen.
 * Wenn der Tabelle eingesetzt wird, erscheint er normalerweise auf der linken Seite der Seite unter dem letzten hinzugefügten Eintrag.
 * Wenn andere Elemente nach der Tabelle hinzugefügt werden, werden sie darunter angezeigt.

Hier ist ein Beispiel mit dem Lorem ipsum Text und einer Breite von 50%:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

Hier ist ein Beispiel mit dem Lorem ipsum Text und einer Breite von 50vw: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.


 * Beachten Sie  daß die Normalstellung der Tabelle befindet sich auf der linken Seite der Seite und jeder Text wird unten angezeigt.
 * Beachten Sie  daß obwohl Raum auf der rechten Seite der Tabelle gibt, der Textumfluß geht nicht um die Tabelle.
 * Beachten Sie  daß der Text auf der rechten der Seite ist bei der Verwendung von Prozent verloren. Der Textumfluß wenn vw  verwendet ist, wird in dem verfügbarten Kasten passen.

 Tabellen auf der linken Seite der Seite Wie können wir die Tabelle auf der rechten Seite der Seite stellen?
 * Hier ist einer neuen Eigenschaft: float: right .  Dadurch wird die Tabelle zur rechten Seite der Seite verschoben. Nun achten Sie darauf, was passiert mit dem Text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.


 * Bemerken Sie  daß die Tabelle befindet sich auf der rechten Seite der Seite.
 * Bemerken Sie  daß der Text befindet sich auf der linken Seite der Seite.

Hier ist die Codierung:  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

 Textumfluß auf der rechten Seite der Tabelle Wie könnte der Text auf der rechten Seite der Tabelle eingesestzt werden?
 * Verwenden float: left .  Normalerweise die Tabelle wird nach links eingesetzt, aber durch den computer befehle float:left das Textfluß wird auf der rechten Seite der Tabelle sein.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.


 * Bemerken Sie daß jetzt kein Leerzeichen zwischen dem Text und der rechten Seite der Tabelle gibt. Sie könnten auch diese Auswirkung erschaffen, daß mit dem margin-right: 10px am Anfang der Tabellenkennzeichen.

Hier ist die Tabelle mit einem 10-Pixel-Rand auf der rechten Seite: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

Hier ist die Codierung: 

 Kien Textumfluß clear: both Hier is was Sie kodieren werden, wenn Sie nicht möchten, daß der Text um die Tabelle geht, egal wo Sie es platzierenn wird.
 * Schließen Sie den Text entweder in einem Absatz oder div Kennzeichen.
 * Dann installieren Sie dieses Attribut im öffnenden Absatz oder div-Kennzeichen:
 * 

 Tabelle in der Mitte der Seite margin: auto

Wenn Sie möchten, daß die Tabelle in der Mitte der Seite ist oder die Abstände auf beiden Seiten der Tabellen gleiche sein sollen, benutzten Sie dieser Coderung. So sieht sie aus: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.
 * Benutzen die margin: auto Eigenschaft:

Die Codierung in der öffnenden Tabelle ist: 
 * 


 * Bemerken Sie daß der Text nicht um die Tabelle geht und es gibt keinen Leerzeichen zwischen dem Text und dem unteren Rand der Tabelle.

Versuchen Sie diese aus. . . . .  Übungen
 * Platzieren Sie den lorem ipsum Absatz auf der rechten Seite der Seite.
 * Platzieren Sie dem lorem ipsum Absatz unter dem Tabelle.
 * Platzieren Sie einen 10 Pixel Platz zwischen der Tabelle und dem Text.

Überprüfen Sie Ihre Antworten --->

 Kurzes Quiz
 * Text wird immer auf die rechte Seite einer Tabelle, wenn Sie eine Tabelle auf der Seite setzten.
 * A. Wahr
 * B. False


 * Text wird schweben, wenn Sie eine Tabelle auf der rechten Seite einer Seite platzieren.
 * A. Wahr
 * B. False


 * Sie können keinen Tabelle in der Mitte der Seite platzieren.
 * A. Wahr
 * B. False

Check your answers

<< vorheriges Kapitel nächstes Kapitel >>