====== Tabellen gestalten ======
===== Zeilen, Spalten und Zellen verbinden =====
Über das Verbinden von Zellen, Spalten oder Zeilen kann man unterschiedliche Zeilenhöhen und -breiten erhalten.
==== Spalten verbinden ====
<code html>
<td colspan="Anzahl">...</td>
</code>

Das Attribut ''colspan'' (column span = Spalten überbrücken) gibt die Anzahl der Zellen an, über die sich die Spalte erstrecken soll.\\
Dieses Attribut kann in den Tags <th> und <td> angegeben werden.

=== Beispiel ===

Im folgenden Beispiel werden in der 2. Zeile je zwei Spalten verbunden.

<code html>
 <table border="1">
    <tr>
        <td align="right">Spalte 1</td>
        <td align="right">Spalte 2</td>
        <td align="right">Spalte 3</td>
        <td align="right">Spalte 4</td>
    </tr>
    <tr>
        <td colspan="2" align="right">td colspan=2</td>
        <td colspan="2" align="right">td colspan=2</td>
    </tr>
 </table>
</code>

==== Zeilen verbinden ====
<code html>
<td rowspan>...</td>
</code>

Das Attribut ''rowspan'' (row span = Zeilen überbrücken) gibt die Anzahl der zu verbindenden Zeilen an. Die Höhe bezieht sich hierbei auf die Anzahl der Zellen, über die sich die Zeile erstrecken soll.\\
Das Attribut kann mit den Tags ''<th>'' und ''<td>'' verwendet werden.

=== Beispiel ===
<code html>
 <table border="1" width="200">
  <tr>
   <td width="100">Zelle 1</td>
   <td width="100" rowspan="2">Zelle 2 und 4</td>
  </tr>
  <tr>
   <td>Zelle 3</td>
   <!-- nicht mehr vorhandene Zelle -->
  </tr>
 </table>
</code>


===== Rahmen und Abstände bearbeiten =====
==== Den Zellabstand verändern ====
<code html>
<table cellspacing="Pixel">...</table>
</code>

Mithilfe des Attributs ''cellspacing'' (Zellzwischenraum) vergrößert man den Abstand der einzelnen Zellen einer Tabelle. Die Angabe des Attributs erfolgt im Tag ''<table>''.

==== Abstand der Zellinhalte ====
<code html>
<table cellpadding="Pixel">...</table>
</code>

Das Attribut ''cellpadding'' (Zellinhaltsabstand) setzt einen Zwischenraum zwischen dem Inhalt und der Begrenzung der Zelle. Die Angabe des Attributs muss im Tag ''<table>'' erfolgen.

Die foldende Grafik veranschaulicht die beiden Attribute:

{{:inf:grundlagen_in_html:tabellen:abstand.png|}}



==== Zellrahmen gestalten ====
Neben dem Attribut ''border'' mit dessen die Stärke des Tabellenrahmens festgelegt wird hat man mittels des Attributs ''frame'' noch weitere Möglichkeiten zur individuellen Tabellengestaltung.

<code html>
<table frame="hsides">...</table>
</code>
Die Angabe des Attributs erfolgt wiederum im Tag ''<table>'' und kann folgende Wert annehmen:
|''void'':|Es wird kein Rahmen gezeichnet (entspricht ''border=0'')|
|''box'':|Es wird ein Rahmen um die gesamte Zelle gezeichnet (entspricht ''border=1'')|
|''above'':|Rahmen oberhalb jeder Zelle|
|''below'':|Rahmen unterhalb jeder Zelle|
|''hsides'':|Rahmen an den horizontalen Seiten (oben und unten)|
|''vsides'':|Rahmen an den vertikalen Seiten (links und rechts)|
|''lhs'':|Rahmen an der linken Seite der Zellen|
|''rhs'':|Rahmen an der rechten Seite der Zellen|

===== Farbige Tabellen =====
=== Rahmenfarbe ===
Wird eine Tabelle mit dem Attribut ''border'' erzeugt, so erhält sie automatisch einen grau gefärbten Rahmen. Mit Hilfe der Attribute
<code html>
bordercolor="Farbe" <!--zweidimensionaler Rahmen-->
bordercolorlight="Farbe" <!--dreidimensionale Rahmen-->
bordercolordark="Farbe"
</code>
kann die Rahmenfarbe verändert werden. Jedoch ist diese Formatierung nicht HTML-4 Standard und wird deshalb nicht von allen Browsern akzeptiert und somit einfach ignoriert.

Innerhalb des Tags ''<table>'' erzwingt dieses Attribut die Färbung der gesamten Tabelle.\\
In den Tags ''<tr>'', ''<th>'' und ''<td>'' werden die entsprechenden Zeilen oder Zellen mit der entsprechenden Farbe umrandet.


=== Hintergrundfarbe ===
<code html>
bgcolor="Farbe"
</code>
Die Farbe einer gesamten Tabelle ''<table>'', einer Zelile ''<tr>'' oder einer einer einzelnen Zelle ''<th>, <td>'' setzt man mit dem Attribut ''bgcolor'', gefolgt von einem Farbwert oder dem Farbnamen.

=== Aufgabe ===

Ändere die Hintergrundfarben der ersten Zeile im Dokument "Steckbrief.html"" auf eine beliebige Farbe.