Donnerstag, 10. März 2016

html Tutorial 2 von 4 - Tabellen

Und wie versprochen geht es schon weiter mit dem html Tutorial.

In den folgenden Codes müsst ihr euch den * wegdenken, den trage ich in den Beispielen ein, damit ihr die Codes lesen könnt. In den Klammern [ ] sind kurze Erklärungen zum Code.
Fangen wir mit einer einfachen Tabelle an.
 Beispiel:
 <*table border="Zahl von 0 bis ..."> [mit der Zahl könnt ihr die Umrandung eurer Tabelle ändern]
  <*tbody>
    <*tr> [Tabellenzeile]
      <*td> [Tabellenspalte, 
                       hiervon könnt ihr so viele nebeneinander setzen, wie in euer Fenster passt.]
              dein Text
      </*td> 
    </*tr>
  </*tbody> 
</*table>
und so sieht das Ganze dann aus hier mit zwei Zeilen à zwei Spalten

mit border="0"      
Text1Text2
Text3Text4 

mit border="1"      
Text1Text2
Text3Text4

mit border="2"       
Text1Text2
Text3Text4

mit border="3"
Text1Text2
Text3Text4
Wie ihr seht wird die Umrandung stärker, je höher ihr mit dem border geht.
Soweit zur einfachen Tabelle. Wir wollen aber nun keine einfache Tabelle, sondern eine Tabelle mit Hintergrundbild.
<*table border="0" cellspacing="30" style="background-image: url(Link); height: Höhepx; margin-left: auto; margin-right: auto; width: Breitepx;>
anschließend geht es wie oben weiter.
Das ganze geht natürlich auch noch weiter, so dass wir in die vorhandene Tabelle mit Hintergrundbild eine weitere Tabelle setzen können. Das sieht dann wie folgt aus:
<*table border="0" cellspacing="30" style="background-image: url(Link); height: Höhepx; margin-left: auto; margin-right: auto; width: Breitepx;>
  <*tbody>
    <*tr>
      <*table>
        <*tbody>
          <*tr>
            <*td>
              Text
            </*td>
          </*tr>
        </ *tbody>
      </*table>
    </*tr>
  </*tbody>
</*table>
So könnte das Ganze dann aussehen
So .... das war es vorerst mit den Tabellen. Im nächsten Part dieses vierteiligen Tutorials zeige ich euch drei verschiedene Möglichkeiten Bilder im htmlmodus zu platzieren.

Keine Kommentare:

Kommentar veröffentlichen