Kleines Nachschlagewerk Informatik
Tabellen
Worum geht es?
Tabellen sind zuerst dazu da, Daten geordnet darzustellen. Weiterhin nimmt man gern, obwohl dies kein guter Stil mehr ist, Tabellen ohne Rahmen gern zur Strukturierung von Webseiten. Damit alles schön übersichtlich aussieht, packt man die Teile einer Webseite, also Texte und Bilder, in eine Tabelle, deren Rahmen man nicht sieht.
Aufbau von Tabellen
Tabellen haben Zeilen und Spalten, eine Zeile besteht dabei aus mehreren Zellen. Eine Tabelle wird mit <table> eingeleitet und endet zum Schluss wie man sich schon denken kann mit </table>. Eine Zeile beginnt mit <tr> und endet </tr>. Dazwischen kommen die Zellen, die mit <td> beginnen und mit </td> enden.

ZeitWeg
0s0m
0,5s1,2m
1s2,4m
Möchte man diese Tabelle darstellen, so schreibt man:

      <table border=1>
          <tr>
              <td>Zeit</td><td>Weg</td>
          </tr>
          <tr>
              <td>0s</td><td>0m</td>
          </tr>
          <tr>
              <td>0,5s</td><td>1,2m</td>
          </tr>
          <tr>
              <td>1s</td><td>2,4m</td>
          </tr>
      </table>
            
Und so sieht es dann aus: Drücken
Verfeinerungen
Tabellen haben meist eine Titelzeile, die man besonders hervorheben möchte. Dann schreibt man <th> statt <td>.

      <table border=1>
          <tr>
              <th>Zeit</th><th>Weg</th>
          </tr>
          <tr>
              <td>0s</td><td>0m</td>
          </tr>
          <tr>
              <td>0,5s</td><td>1,2m</td>
          </tr>
          <tr>
              <td>1s</td><td>2,4m</td>
          </tr>
      </table>
            
Und so sieht es aus: Drücken

Natürlich kann man auch bei Tabellen die Farben ändern. Das geht wieder mit den CSS-Eigenschaften.

      <table border=1 style="background-color:lightgrey;color:blue;">
          <tr>
              <th>Zeit</th><th>Weg</th>
          </tr>
          <tr>
              <td>0s</td><td>0m</td>
          </tr>
          <tr>
              <td>0,5s</td><td>1,2m</td>
          </tr>
          <tr>
              <td>1s</td><td>2,4m</td>
          </tr>
      </table>
            
Und so sieht es aus: Drücken