Hallo Gast!

In diesem Tutorial zeige ich dir, wie man Boxen und Tabellen macht.

Es gibt einen einfachen Grundbau, den man sich leicht merken kann, wenn man weiß, für Größe,farbe und so weiter steht.

Da wir wissen, welche größe der Kasten haben soll,schreiben wir:

Code:

 <div style="width:150px;height:70px;border:2px

um die Farbe zu definieren, fügen wir folgendes ein:

Code:

  solid white;">

Dann haben wir die erste zeile fertig. das Aussehen ist angegeben, deshalb muss am ende auch ein > hin.

Dann müsste der Code so aussehen:

Code:

<div style="width:150px;height:70px;border:2px  solid white;">

Um den Text im Kasten anzugeben, schreibt ihr ihn einfach und beendet den Code
Das sieht dann so aus:

Code:

 <div style="width:150px;height:70px;border:2px  solid white;">
    Das ist ein Beispiel!
    </div>

der Kasten sieht dann so aus:



Ihr könnt ihn natürlich auch rot machen:

Code:

    <div style="width:150px;height:70px;border:2px  solid red;">
    Das ist ein Beispiel!
    </div>

wollt ihr noch ein bild als Hintergrund?

Code:

 background-image: url("LINK")

oder eine Farbe?

Code:

    <div style="width:150px;height:70px;border:2px  solid red; background-color: white ">
    [color=black]Das ist ein Beispiel![/color]
    </div>

Um die schriftfarbe zu ändern:

Code:

 [color=white/black/green/...] TEXT IM KASTEN [/color]

Liebe, Aimi, mit Tabellen hat das hier aber gar nichts zu tun und viel Erklärung ist das auch nicht. Darf ich ergänzen? Ich hab mal ein Tutorial geschrieben, sieht folgendermaßen aus und ist eigentlich die Vorerklärung für deine Angaben:

Woraus besteht ein Div?
Aus HTML und CSS. Der HTML-Teil gibt an, was wo umgesetzt werden soll, während der CSS-Teil lediglich die Definition dessen ist. Alternativ kann der CSS-Teil gleich in den HTML-Teil mit eingebunden werden.

Woraus besteht eine Tabelle?
Aus HTML (und optional auch aus CSS). Im HTML-Teil wird die komplette Tabelle definiert, der CSS-Teil kann direkt dort mit eingebunden werden oder alternativ extra in einem CSS-Code definiert werden.

Grundstruktur eines Divs

Code:

<div>
Inhalt
</div>

Wie definiere ich Divs nun?
Es gibt zwei Möglichkeiten. Du leitest das zu definierende Element im CSS-Teil mit .name oder mit #name ein, während es im HTML entsprechend mit class=“name“ und id=“name“ angegeben wird. Alternativ kann das CSS auch gleich im HTML-Teil eingebunden und dort definiert werden:
style=“CSS-Definition;“

Wie sieht das nun aus?

Code:

<div class="name">
Inhalt
</div>

<div id="name">
Inhalt
</div>

(Es macht keinen Unterschied, welche Variante du verwendest, ob nun id oder class, das ist vollkommen egal. Lediglich die Bezeichnung ist eine andere)

Code:

<div style="bereich: befehl;">
Inhalt
</div>

(Hier besteht der Nachteil, dass Fremde deine CSS-Definitionen einsehen können)

Wie sieht das CSS aus?
Es ist wie folgt aufgebaut:

Code:

.name {
      bereich: befehl;
}

oder

Code:

#name {
      bereich: befehl;
}

Grundstruktur einer Tabelle

Code:

<table>
<tr>
<td>
Inhalt
</td>
</tr>
</table>

<*table> und <*/table> umfassen die komplette Tabelle, sie sind sozusagen der äußere Rahmen.
<*tr> leitet eine Zeile ein und <*/tr> schließt sie.
<*td> leitet eine Spalte innerhalb einer Zeile ein und <*/td> schließt sie.

Wie definiere ich Tabellen?
Mit einfachen HTML Befehlen, die in den Code eingebunden werden:

Code:

<table bereich="befehl">

Durch eine id oder class:

Code:

<table id="name">
<table class="name">

Durch CSS, eingebunden im HTML-Teil:

Code:

<table style="bereich: befehl;">