Saint-Omar Forum

Der Treffpunkt für alle RPG-Süchtigen und die, die es werden wollen ;)
Aktuelle Zeit: 20. Okt 2017, 23:27

Alle Zeiten sind UTC + 1 Stunde [ Sommerzeit ]

 


Ein neues Thema erstellen Auf das Thema antworten  [ 1 Beitrag ] 
AutorNachricht
 Betreff des Beitrags: Andras' kleine Tutorialecke. Heute: Tabellen.
BeitragVerfasst: 10. Jan 2012, 02:26 
Offline
Edelmann
Edelmann
Benutzeravatar

Registriert: 11.2011
Beiträge: 45
Geschlecht: männlich
Highscores: 1
Auf Anraten von Setheo und weil ich schon einige Bios gesehen haben, die der HTML Supergau waren, habe ich mich entschlossen, hier mal einen Thread dafür zu machen. Dabei soll das Ziel sein, dass der User nicht nur einen Code benutzt, sondern diesen auch kapiert.

HTML hat NICHTS mit programmieren zu tun! HTML ist schlicht und einfach eine textbasierende Auszeichnungssprache zum Strukturieren von Inhalten. So drückt es zumindest Wikipedia aus. Auf Deutsch heißt das: Das ist was, was ihr hinschreibt, damit euer Text schön angeordnet wird ;)


Fangen wir nun einmal an. Die meisten Fehler und auch die gröbsten Fehler sind IMMER die Tabellen. Jeder kennt es: Man will einen Text neben einem Bild haben. Also nimmt man eine Tabelle, denn das ist schön einfach. Natürlich kann man das auch tun, wenngleich eine Tabelle eigentlich nur dazu da ist, um Inhalte tabellarisch darzustellen, nicht um ein Bild neben einen Text zu befördern. Aber ich will hier ja keine professionellen Webmaster ausbilden, also egal.

Machen wir weiter bei den Tabellen. Es gibt für die Tabelle an sich DREI wichtige HTML-Tags. Der erste, der geöffnet werden muss ist der Tag <table>. Das klingt logisch (table = (engl.) Tabelle). Viele HTML-Tags müssen wieder geschlossen werden. Bei Table ist das wie bei vielen anderen so der Fall: </table>. Das kennt ihr vielleicht von <b>Blabla</b>, wo der Text "Blabla" dann fett dargestellt wird.

Code:
<table>
</table>


erzeugt nun also eine Tabelle. So weit so gut, leider hat diese nun keinen Inhalt.
Als nächstes müssen die Zeilen erstellt werden. Zeilen sind in einer Tabelle die Dinger, die von links nach rechts gehen, also horizontal. Wenn wir also nun eine Tabelle darstellen wollen, die ein Bild neben einem Text darstellen soll, wie viele Zeilen benötigen wir dann? Richtig, eine einzige!
Um eine Zeile zu öffnen benutzt man den Tag <tr> (von [T]able [R]ow = (engl.) Tabellenzeile). Dieser wird natürlich am Ende wieder mit </tr> geschlossen.
Jetzt haben wir also

Code:
<table>
   <tr>
   </tr>
</table>


Wenn wir das allerdings nun in die Bio einfügen, haben wir immer noch nichts, was angezeigt wird. Natürlich nicht, denn ich habe von drei HTML-Tags gesprochen, bisher haben wir lediglich <table> (öffnen der Tabelle) und <tr> (öffnen einer Zeile IN einer Tabelle) benutzt. Was jetzt noch fehlt ist das Öffnen (und natürlich spätere Schließen) einer Tabellenspalte. Das geschieht mit <td>(von [T]able [D]ata = (engl.) Tabellendaten).
Jetzt haben wir alles in allem also schon dieses Konstrukt:

Code:
<table>
   <tr>
      <td>
      </td>
   </tr>
</table>


Toll, damit steht das Grundgerüst für eine Tabelle mit einer Zeile und einer Spalte. Wir brauchen aber wie viele Spalten? Gut, zählen wir mal. Eine Spalte soll ein Bild beherbergen, eine Spalte soll einen Text beinhalten. Das macht nach Adams Riese genau zwei Spalten in EINER Zeile.
Also erweitern wir den Code

Code:
<table>
   <tr>
      <td>
      </td>
      <td>
      </td>
   </tr>
</table>


Jetzt noch etwas Klugscheißerei von mir, nachdem die Tabelle so fein steht. </td> muss nicht sein, es ist ein optionaler HTML-Tag. ABER ich empfehle ihn auf jeden Fall zu benutzen, allein weil es die Übersichtlichkeit STARK zum Positiven beeinträchtigt.

So genug Blabla, jetzt weiter im Text. Wir haben nun also eine Tabelle mit zwei Spalten. Nun müssen wir überlegen, Bild rechts oder Bild links? Sagen wir einmal, wir wollen zuerst ein Bild und auf der rechten Seite den Text. also muss das Bild zwischen die ersten <td></td>und der Text zwischen die zweiten <td></td>. Als Textbild nehme ich einmal dieses hier: *** Der Link ist nur für Mitglieder sichtbar, zum Login. ***. Das Wappen von Omar ;)
Für die Darstellung von Bildern benutzen wir den <img> Tag. Dieser Tag hat im Gegensatz zu <table>, <tr> und <td> kein schließendes Element. Dafür besitzt er zwei Pflichtattribute, nämlich src und alt. Ich denke viele wissen, wie man ein Bild einfügt und werden jetzt sagen "Häää, alt? Hab ich noch nie benutzt und funktionierte trotzdem immer!!!" Ja, schön, gibt ja auch keinen Fehler, aber für die (eigentlich) korrekte Anwendung, gehört das alt Attribut in JEDEN <img> Tag. Nun ja, also erst einmal der fertige Tag.
<img src="http://666kb.com/i/bwlz3yl82djiusclk.jpg" alt="Wappen">
Das Bild von Oben wird nun angezeigt. Wie man sich denken kann, bekommt src (von Source = (engl.) Quelle) den Wert der URL (, wo das Bild hinterlegt ist (also hochgeladen ist, Linkadressen vom eigenen Computer aus gehen natürlich nicht. Versucht also nicht solche Sachen wie <img src="c:\Eigene Dateien\Bilder....." alt="Mein Bild">. Das tut nicht.)) Alt bekommt als Wert einen kurzen, knappen Text. Was tut alt? Wird das Bild nicht angezeigt, vielleicht weil euer Bilderhoster gerade einen Fehler auf dem Server hat, oder sonstige Probleme vorliegen, dann wird statt des Bildes ein [Alt]ernativtext ausgegeben. Außerdem erscheint der Text, wenn man mit dem Mauszeiger über dem Bild bleibt; zumindest in manchen Browser.
Wie schon gesagt, dieses Attribut ist ein Pflichtattribut und eigentlich nicht zum Spaß eingebaut worden.

Gut, jetzt haben wir das Grund gerüst einer Tabelle und die Darstellung eines Bildes mit HTML. Fein, fehlt nur noch der Text. Das ist einfach, denn Text ist nun einmal Text, der muss keine besonderen HTML Tags benutzen. Ich nehme nun einmal den Text
"Omar `n
ist eine`n
tolle, große`n
Stadt."

Gut, jetzt haben wir Grundgerüst einer Tabelle, Bild und Text. Basteln wir also alles zusammen. Das sieht dann so aus:

Code:
<table>
   <tr>
      <td>
      <img src="http://666kb.com/i/bwlz3yl82djiusclk.jpg" alt="Wappen">
      </td>
      <td>
      Omar `n
      ist eine`n
      tolle, große`n
      Stadt.
      </td>
   </tr>
</table>

Bild

Sooo, fertig. Tabelle steht, Text ist neben dem Bild, alles gut.
...
Was? Das sieht voll Kacke aus? ...
...
Gut, stimmt. Der Text klebt natürlich nun an der Grafik, als wollte er auf Tuchfühlung gehen. Außerdem hängt der Text in der Mitte und ist linksbündig. Natürlich kann man das alles einstellen. Und wie das geht, kommt jetzt.


Erstmal der Abstand zwischen zwei Bild und Text. Dafür gibt es mehrere Möglichkeiten. Erst einmal die einfachere.
[MÖGLICHKEIT 1]
Wir werden hierfür einfach eine weitere Spalte (mit was öffnet man noch einmal eine Spalte? Achja, <td>!), die sich ZWISCHEN Bild und Text befindet. In diese werden wir nichts schreiben, sie also leer lassen und ihr eine Breite verpassen, die genau dem entspricht, was wir als Abstand zwischen Bild und Text haben wollen. Und wie defniert man die Breite einer Spalte? Mit einem Attribut, das eben auch noch genau so heißt, nur halt auf Englisch: width. Width kann verschiedene Werte gegeben werden, sowohl relative, als auch absolute Werte. Ist das für hier wichtig? Nein, lest es selbst nach ;)
Uns interessiert nur, dass wir ihm einen Wert in Pixel geben, der natürlich in Form von Zahlen übergeben wird. Gut, also tun wir's einfach mal. Das Attribut "width" wird in den Tag <td> eingefügt, dessen Breite wir festlegen wollen. Fertig sieht das dann so aus:
Code:
<table>
   <tr>
      <td>
      <img src="http://666kb.com/i/bwlz3yl82djiusclk.jpg" alt="Wappen">
      </td>

      <td width="25">
      </td>

      <td>
      Omar `n
      ist eine`n
      tolle, große`n
      Stadt.
      </td>
   </tr>
</table>

Bild

Wie ihr nun sehen könnt, ist der Text 25 Pixel vom Bild fortgerückt.

[MÖGLICHKEIT 2]
Die zweite Möglichkeit ist ein wenig Komplizierter, aber nur unwesentlich.
Hierfür betrachten wir erst einmal wie breit unser Bild ist. Das Bild mit dem Wappen hierfür ist sehr freundlich, denn es ist genau 200 Pixel breit. Bisher hat sich die Tabellenspalte, in der sich das Bild befindet, immer der Breite des Bildes angepasst. Das soll nun aber ein Ende haben. Wir wollen (in diesem Fall) einen Abstand von 25 Pixel haben, ergo erweitern wir die Breite der Tabelle um 25. Okay, Kopfrechnen an, das geht auch ohne Taschenrechner. 200 +25 ist 225. Die Tabelle soll also 225 Pixel Breite haben. Wie das geht? Genau wie bei Möglichkeit 1. Nur, dass wir keine leere Spalte erzeugen, sondern die erste Spalte mit dem width Attribut versehen.
Das sieht dann so aus:

Code:
<table>
   <tr>
      <td width="225">
      <img src="http://666kb.com/i/bwlz3yl82djiusclk.jpg" alt="Wappen">
      </td>

      <td>
      Omar `n
      ist eine`n
      tolle, große`n
      Stadt.
      </td>
   </tr>
</table>

Im Ungefähren erzeugt das das gleiche Ergebnis wie oben.

Jetzt wieder etwas Klugscheißerei, bevor hier doch noch irgendwer auf die Idee kommt "Hey, der erzählt hier Sachen, da weiß ich doch auch noch was und sogar mehr!".
1. Ich finde die Möglichkeit 1 ziemlich unschön, auch wenn ich sie selbst in einigen Bios verwendet habe. Ich denke, dass ich dafür sicherlich von einigen professionellen Webmastern gelyncht werden würde. Aber ich bin kein professioneller Webmaster, also halten sich meine Schuldgefühle in Grenzen. Zudem stellen wir hier nur eine Biographie in einem LoGD dar, nicht die Homepage des Pentagon, die es in der Welt präsentiert.
2. Das Attribut "width" wird innerhalb von <td> Tags als deprecated (= missbilligt) eingestuft. Heißt: Es ist unschön und veraltet. Warum verwende ich es trotzdem hier? Ganz einfach, weil es einfach ist! Der korrekte Code heißt sonst:
Code:
<td style="width: 25px"> ... </td>

Dies ist die korrekte Anwendung auf die "moderne" Art, HTML zu benutzen, nämlich mit CSS. Was das genau ist, das dürft ihr ebenfalls selbst nachschauen ;)

Gut, eigentlich sind wir so weit von der schweren Seite des Unterfangens fertig. Jetzt noch ein paar Schmankerls, die den Text in der Tabelle beeinflussen.
Erst einmal die Ausrichtung des Textes in der Spalte. Davon gibt es genau 4 verschiedene. Das dafür nötige Attribut muss wie "width" in den betreffenden <td> Tag. In diesem Fall ist es allerdings der zweite, nicht der erste oder ein neuer. Das Attribut heißt "align". Align können vier verschiedene Werte zugeordnet werden: left (das ist Standard), right, center und justify. Die ersten drei erklären sich von selbst. Justify ist der Blocksatz oder auch Fließtext genannt. Letzterer hat nur wirklich dann einen Sinn, wenn die Tabellenspalte auch eine feste Breite hat, sonst geht der Text über den gesamten Bildschirm und nutzt die gesamte Breite, die die Tabellenspalte bereitstellt (was ohne festgelegte Breite sich immer automatisch nach rechts erweitert, bis der Bildschirm aufhört). Das sieht dann sehr doof aus und muss nicht sein. Später mehr dazu. Jetzt erst einmal ein Beispiel, wie es aussehen muss mit der Tabelle von oben.

Code:
<table>
   <tr>
      <td>
      <img src="http://666kb.com/i/bwlz3yl82djiusclk.jpg" alt="Wappen">
      </td>

      <td width="25">
      </td>

      <td align="center">
      Omar `n
      ist eine`n
      tolle, große`n
      Stadt.
      </td>
   </tr>
</table>


Sieht dann so aus:
Bild

mit right als Wert für align:
Bild

Jetzt noch kurz zur justify Problematik.
Hierfür verwende ich mehr Text, weil das Problem sonst nicht sauber dargestellt wird.
Code:
<table>
   <tr>
      <td>
      <img src="http://666kb.com/i/bwlz3yl82djiusclk.jpg" alt="Wappen">
      </td>

      <td width="25">
      </td>

      <td align="justify">
      Omar ist eine tolle, große Stadt. Omar ist eine tolle, große Stadt. Omar ist eine          tolle, große Stadt. Omar ist eine tolle, große Stadt. Omar ist eine tolle, große          Stadt. Omar ist eine tolle, große Stadt. Omar ist eine tolle, große Stadt. Omar ist       eine tolle, große Stadt. Omar ist eine tolle, große Stadt. Omar ist eine tolle,          große Stadt. Omar ist eine tolle, große Stadt. Omar ist eine tolle, große Stadt.          Omar ist eine tolle, große Stadt. Omar ist eine tolle, große Stadt. Omar ist eine          tolle, große Stadt. Omar ist eine tolle, große Stadt.
      </td>
   </tr>
</table>


Angewandt sieht das dann so aus:
Bild

Eigentlich ist das auch in Ordnung, doch bei Leuten, die einen sehr viel breiteren Bildschirm haben, wird der Text enooorm in die Breite gezogen und besteht eventuell nur noch aus 2-3 Zeilen.
Wenn man nun das Attribut width auf den betreffenden <td> Tag anwendet, verändert sich das Aussehen natürlich.

Also basteln wir ein width Attribut hinein, das sieht dann so aus:
Code:
<table>
   <tr>
      <td>
      <img src="http://666kb.com/i/bwlz3yl82djiusclk.jpg" alt="Wappen">
      </td>

      <td width="25">
      </td>

      <td align="justify" width="300">
      Omar ist eine tolle, große Stadt. Omar ist eine tolle, große Stadt. Omar ist eine          tolle, große Stadt. Omar ist eine tolle, große Stadt. Omar ist eine tolle, große          Stadt. Omar ist eine tolle, große Stadt. Omar ist eine tolle, große Stadt. Omar ist       eine tolle, große Stadt. Omar ist eine tolle, große Stadt. Omar ist eine tolle,          große Stadt. Omar ist eine tolle, große Stadt. Omar ist eine tolle, große Stadt.          Omar ist eine tolle, große Stadt. Omar ist eine tolle, große Stadt. Omar ist eine          tolle, große Stadt. Omar ist eine tolle, große Stadt.
      </td>
   </tr>
</table>


Dargestellt wird es so:
Bild

Der Text befindet sich im Blocksatz/Fließtext, neben dem Bild. Das Bild ist relativ klein, weshalb es nun natürlich recht bescheiden aussieht ;)


Neben der horizontalen Ausrichtung von Tabelleninhalten, kann man sie auch vertikal ausrichten. Hat man z.B. ein recht großes Bild, aber nur wenig Text, so kann man diesen oben, unten oder in der Mitte der Tabellenspalte ausrichten. Genau so könnten wir dort oben das Bild hoch oder runtersetzen. Das nötige Attribut für den <td> Tag heißt valign. Es kann die Werte "top", "bottom" und "middle" (Standard) annehmen.
Aussehen tut dies dann so:
Code:
<table>
   <tr>
      <td valign="top">
      <img src="http://666kb.com/i/bwlz3yl82djiusclk.jpg" alt="Wappen">
      </td>

      <td width="25">
      </td>

      <td align="justify" width="300">
      Omar ist eine tolle, große Stadt. Omar ist eine tolle, große Stadt. Omar ist eine          tolle, große Stadt. Omar ist eine tolle, große Stadt. Omar ist eine tolle, große          Stadt. Omar ist eine tolle, große Stadt. Omar ist eine tolle, große Stadt. Omar ist       eine tolle, große Stadt. Omar ist eine tolle, große Stadt. Omar ist eine tolle,          große Stadt. Omar ist eine tolle, große Stadt. Omar ist eine tolle, große Stadt.          Omar ist eine tolle, große Stadt. Omar ist eine tolle, große Stadt. Omar ist eine          tolle, große Stadt. Omar ist eine tolle, große Stadt.
      </td>
   </tr>
</table>


Bild dazu:
Bild

valign mit dem Wert bottom:
Bild

Sooo das dürfte eigentlich alles gewesen sein.

Ein Tip noch: Wenn man dem <table> Tag das Attribut border mit dem Wert 1 gibt, dann wird ein Rahmen um die Tabellenelemente darggestellt. Das kann praktisch sein, wenn man noch nicht genau weiß, wie die Tabelle aussehen soll und sie sichtbar planen will.

Jetzt sollte ich aber alles bedacht haben. Mehr könnt ihr noch hier lesen:
*** Der Link ist nur für Mitglieder sichtbar, zum Login. ***


Jetzt viel Spaß beim Anwenden.

Fragen? Einfach hier rein posten. Wünsche für weitere Erklärbärtexte? Dann sagt mir über was und ich versuche es umzusetzen :D

_________________
Der Mensch hat dreierlei Wege klug zu handeln:
Erstens durch nachdenken, das ist der edelste,
zweitens durch nachahmen, das ist der leichteste,
und drittens durch Erfahrung, das ist der bitterste.


Nach oben
 Profil  
 
Beiträge der letzten Zeit anzeigen:  Sortiere nach  
Ein neues Thema erstellen Auf das Thema antworten  [ 1 Beitrag ] 

Alle Zeiten sind UTC + 1 Stunde [ Sommerzeit ]


Du darfst keine neuen Themen in diesem Forum erstellen.
Du darfst keine Antworten zu Themen in diesem Forum erstellen.
Du darfst deine Beiträge in diesem Forum nicht ändern.
Du darfst deine Beiträge in diesem Forum nicht löschen.
Du darfst keine Dateianhänge in diesem Forum erstellen.

Suche nach:
Gehe zu:  
cron
© phpBB® Forum Software | phpBB3 Forum von phpBB8.de
» Kontakt & Rechtliches Support / Hilfe Forum Gooof Webdesign Kostenloses Forum Dein Forumo Forum web tracker