• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tabelle in HTML

Hallo Confu!
Sieht für Einsteiger auf den ersten Blick etwas kompliziert aus, allerdings ist es relativ einfach, wenn man das Prinzip verstanden hat.
Ich gehe mal davon aus, dass du weißt, wie eine Standardtabelle aufgebaut wird (tr, td und so weiter). So, jetzt schaust du dir einfach an, wie viele Zeilen und Spalten eine Zelle hat und vergibst dann einfach nur entsprechend die Attribute colspan (Spaltenanzahl) und rowspan (Zeilenanzahl).

MfG Icy
 
HTML: 
<table>
  <thead>
    <tr>
      <th></th>
      <th>1.&nbsp;Schwerpunkttag</th>
      <th>2.&nbsp;Schwerpunkttag</th>
      <th>3.&nbsp;Schwerpunkttag</th>
      <th>4.&nbsp;Schwerpunkttag</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td rowspan="2">Mündliche Mitarbeit</td>
      <td rowspan="3">Effektiv lernen und behalten „Unser Gedächnis“</td>
      <td rowspan="4">Mind&nbsp;- Mapping</td>
      <td rowspan="4">Effektiv lernen und behalten „Lernen mit allen Sinnen“</td>
    </tr>
    <tr>
      <th>2</th>
    </tr>
    <tr>
      <th>3</th>
      <td rowspan="2">Erledigung der Hausaufgaben</td>
    </tr>
    <tr>
      <th>4</th>
      <td rowspan="2">Klassenarbeiten</td>
    </tr>
    <tr>
      <th>5</th>
      <td rowspan="2">Lions Quest</td>
      <td rowspan="2">Medienkompetenz</td>
      <td>Karrikaturen-Rallye</td>
    </tr>
    <tr>
      <th>6</th>
      <td>Lions Quest</td>
      <td>&mdash;</td>
    </tr>
  </tbody>
</table>
Code: 
<style type="text/css">
<!--
table {
  border:1px solid black;
  border-collapse:collapse;
}
table th {
  background:gray;
  color:white;
  padding:0.1em 0.3em;
}
table tbody td {
  width:10em;
  border:1px solid black;
  text-align:center;
}
-->
</style>
Und mach das mit einem Text-Editor und nicht mit Office! Das macht das nicht vernünftig.
 
Hallo stachelbeer,

ich möchte aber den HTML Code nicht in CSS haben, wenn ich den CSS code auslaste, sind keine Kästchen drum in mein Tabelle, also keine Linie, :x

Da ich mit CSS nicht auskenne will ich gern nen HTML Code ohne CSS voraussetzung, ist sowas für dich möglich *g :)

Vieleicht lerne ich was daraus :D ^^


Ich lerne ja ja vllt CSS aber will die Tabelle ohne CSS möglich?
 
Zuletzt bearbeitet:
CSS ist für das Layout zuständig, HTML nur für die Semantik. Um CSS wirst du nicht herumkommen, wenn du dich weiter mit Webseiten beschäftigen willst.
 
Das ist ganz richtig, Layout und Inhalt sollten strikt getrennt werden.
Dennoch lässt sich das Grundmodell der Tabelle in HTML gut aufbauen, wenn man einige "rowspan" einbaut.

<table width="500">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>1</td>
<td rowspan="2"></td>
<td rowspan="3"></td>
<td rowspan="4"></td>
<td rowspan="4"></td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td rowspan="2"></td>
</tr>
<tr>
<td>4</td>
<td rowspan="2"></td>
</tr>
<tr>
<td>5</td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td>6</td>
<td></td>
<td></td>
</tr>
</table>

Viele Grüße
Die Code // Agenten
Die Code // Agenten - Sie gestalten. Wir programmieren. | slicing | xhtml | css | php | cms | webseiten | coding | design zu html | programmieren
 
codeagenten schrieb:
Das ist ganz richtig, Layout und Inhalt sollten strikt getrennt werden.
Dennoch lässt sich das Grundmodell der Tabelle in HTML gut aufbauen, wenn man einige "rowspan" einbaut.

<table width="500">
<tr>
<td></td>
<td></td>
<td></td>

[...]
Zum Vergrößern anklicken....
@codeagenten http://www.html.de/off-topic-plaude...e-ich-die-code-tags-im-forum.html#post_228796

Außerdem ist es, wenn man strikt nach Aussehen und Inhalt trennt, sinnvoll auch alte HTML Attribute die fürs Aussehen sind durch CSS zu ersetzen.

MfG
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben