Übungen zur Verwendung von Tabellen

Die Ihnen zuvor gegebenen Informationen zu Tabellen haben Sie gelesen und verstanden? Dann bearbeiten Sie bitte die nachfolgenden Aufgaben zur weiteren Vertiefung!

Aufgabe 1: Tabellen-Formatierung mit CSS verstehen

Erläutern Sie, welche Auswirkungen die folgenden CSS-Formatierungen auf das Aussehen der Tabelle haben!

CSS-Formatierung - 1:

  <style type="text/css">
 
    table
    {
      border: 1px solid black;
    }
 
    th, td
    {
      border: 1px solid blue;
    }
 
  </style>
 

CSS-Formatierung - 2:

table
{
    width: 100%;
}
 
th
{
    height: 50px;
}

CSS-Formatierung - 3:

...

Wer gerne schöne Formatierungen seiner eigenen Tabellen mit CSS vornehmen möchte, der darf gerne mal einen CSS-Table-Generator ausprobieren!

Aufgabe 2: Tabellen verstehen

Skizzieren Sie auf einem Blatt Papier das Aussehen der folgenden Tabellen!
Gehen Sie davon aus, dass die Tabellen mit CSS1 aus Aufgabe 1 formatiert wurde.

Tabelle 1:

<table>
  <tr>
    <th>Monat</th>
    <th>Einnahmen</th>
  </tr>
  <tr>
    <td>April</td>
    <td>150 Euro</td>
  </tr>
  <tr>
    <td>Mai</td>
    <td>160 Euro</td>
  </tr>
  <tr>
    <td colspan="2">Summe: 310 Euro</td>
  </tr>
</table>

Tabelle 2:

 <table>
  <tr>
    <th>Monat</th>
    <th>Einnahmen</th>
    <th>Gespartes</th>
  </tr>
  <tr>
    <td>April</td>
    <td>30</td>
    <td rowspan="2">10</td>
  </tr>
  <tr>
    <td>Mai</td>
    <td>50</td>
  </tr>
</table>

Tabelle 3:

Eine etwas aufwendigere Tabelle könnte wie folgt aussehen. Recherchieren Sie die Bedeutung der verwendeten Tags!
Formatieren Sie die Tags entsprechend der Programmier-Richtlinien!
<fieldset>
        <legend>PIN und PUK (SuperPIN)</legend>
        <br>
        Hier finden Sie die Geheimnummern für Ihre SIM-Karte.
        <br><br>
 
        <h3>Haupt-SIM-Karte</h3>
        <table>
          <tbody>
             <tr>
               <td width="135">SIM-Kartennummer: </td><td>
               </td><td><b>11125305971996</b></td><td>
        </td></tr>
        <tr>
            <td>PIN:</td><td>
            </td><td><b>2367</b></td><td>
        </td></tr>
        <tr>
            <td>PUK (SuperPIN):</td><td>
            </td><td><b>12341234</b></td><td>
        </td></tr>
       </tbody>
     </table>
 
            <br>
 
    </fieldset>

Aufgabe 3: Rowspan/Colspan

Realisieren Sie die folgende Tabelle durch Verwendung von rowspan und colspan!

ColspanRowspanUebung.JPG

Aufgabe 4: "Stundenplan"

Erstellen Sie eine HTML-Seite mit Ihrem Stundenplan!
(Selbstverständlich soll Ihre Seite schöner sein, als die folgende WebUntis-Vorlage)
StundenplanMEA31.PNG
  1. Der Stundenplan wird als Tabelle realisiert.
  2. Das Fach, der Lehrer sowie der Raum sollen eingetragen sein.
  3. Doppelte Blöcke werden zusammengezogen (siehe colspan, rowspan).
  4. Die komplette Tabelle wird mittels CSS formatiert
    (Textart, Textgröße, Textfarbe, Hintergrundfarbe, Hintergrundbild, Rahmenlinien, zentrieren,Siehe auch CSS Box Model weiter unten auf dieser Seite!)
  5. Fügen Sie Bilder ein, damit der Stundenplan nicht so langweilig aussieht!
  6. Fügen Sie Verweise auf passende Internetseiten ein (Klick auf Text, Klick auf Bild)!
  7. Im Titel der Seite steht "Stundenplan für <Ihr Name>"!

Abgabe:
  • Drucken Sie Ihren Stundenplan im Querformat zentriert aus!
  • Drucken Sie den Quelltext aus!
  • Notieren Sie Ihre Klasse, Ihren Namen und das aktuelle Datum unten auf den Blättern
    (bitte NICHT auf der Rückseite, denn die Blätter werden u.U. vom Lehrer einseitig gescannt).
  • Geben Sie Sie die ausgedruckten Blätter Ihrem Lehrer!

Tipps:
Wenn Sie für Ihre Fäche unterschiedliche Schrifttypen, -größen und -farben nutzen möchten,
so können Sie das wie folgt tun:
.pgp
{
      color:       yellow;
      font-style:  Arial;
      font-size:   30px;
}
 
Die Größe der td-Elemente kann so festlegen:
td
{
      width:           100px;
      height:          100px;
}
Ein Hintergrundbild können Sie wie folgt einbringen:
.bgbild
{
    background-image: url(bild.jpg);
    background-size: cover;
}

Aufgabe 5: "Koffer Klaus"

Klaus verkauft in Klausis Koffershop große, mittlere und kleine Koffer.
  1. Entwerfen Sie eine Tabelle mit Größenangaben und Preisen - etwas Fantasie bitte!
  2. Ergänzen Sie einen passenden Titel für die Seite, welcher im Tab angezeigt wird!
  3. Ergänzen Sie eine Überschrift der Seite knapp über der Tabelle!
  4. Verwenden Sie Spaltenüberschriften in der Tabelle!
  5. Nehmen Sie das folgende Foto z.B. als Hintergrund mit in die Seite. Achten Sie auf die Lesbarkeit der Tabelle!
    Arbeiten Sie mit der Eigenschaft 'opacity', um die Transparenz der Tabelle entsprechend anzupassen.
KofferKlaus.jpg

Aufgabe 6: "Online-Shops"

Auf der Seite http://www.preisvergleich-total.de/online_shops_computer_edv.html
finden Sie eine Übersicht von Online-Shops im Bereich Hardware, Software, Computer und EDV.

Erstellen Sie selbst eine neue einfache HTML-Seite mit einer Tabelle, welche 3 Berliner Online-Shops beschreibt, die auch Ladengeschäfte betreiben (z.B. Atelco, K&M Elektronik, ...).
  • Wählen Sie Unternehmen, die für Sie interessant sein könnten!
  • Die 3 Spalten der Tabelle sollen folgende Informationen enthalten zu den Unternehmen:
    • Zeile 1: Name des Unternehmens (Text)
    • Zeile 2: Kontaktadresse (Email)
    • Zeile 3: Stärken bzw. Schwerpunkte des Geschäfts (Text)
    • Zeile 4: Ein aktuelles Angebot (Link)
  • Die Tabellenfelder sollen verschiedenfarbige Hintergründe erhalten (siehe http://www.somacon.com/p142.php),
    • z.B. eine Farbe pro Spalte
    • oder kariert
    • oder einfach jedes Feld in einer anderen Farbe.
  • Alle Formatierungen sind mittels CSS vorzunehmen.
  • Die Seite muß selbstverständlich verifiziert werden (validator.w3.org) und soll nach Möglichkeit keine Fehler enthalten.
Für Fortgeschrittene:
  • Die CSS-Formatierungen sind in eine eigene Datei auszulagern.
    Wie geht das? Das finden Sie hier: http://de.selfhtml.org/css/formate/einbinden.htm
  • Der Hintergrund der HTML-Seite soll ein Bild aus dem Bereich Computer enthalten, z. B. PC oder Motherboard, ...
  • Die Tabelle ist um ein weiteres Unternehmen zu ergänzen.
  • Die Tabelle ist um eine weitere Zeile zu ergänzen ( Logo des Unternehmens (Image) ).

Bewertung:

  • Wurde die Tabelle entsprechend der obigen Kriterien korrekt erstellt?
  • Inhaltlich wird die Tabelle nur nach gestalterischen und programmiertechnischen Gesichtspunkten bewertet.
  • Ansonsten gilt zur Bewertung generell alles, was Sie unter dem Link Bewertung in diesem Wiki lesen können.

Aufgabe 7: Hundehaftplicht-Tabelle

Erstellen Sie eine kleine Tabelle der Anbieter von Hundehaftplichtversicherungen!
Weitere Spalten sind Versicherungssumme, Jahresbeitrag und die Angabe, ob der Schutz auch für Listenhunde gewährt wird.
(Ein entsprechendes Muster kann Ihnen ggf. der Lehrer geben.)

Aufgabe 8: Depoteintrag

Eine Aktie im Depot wird z.B. wie folgt dargestellt:
DepotNetflixAktie.png
Versuchen Sie, diese Tabelle originalgetreu nachzubilden (Text, Positionierung, Schriftart, Farben, Positionen)!

Aufgabe 9: "Fußballturnier am OSZ KIM"

Erstellen Sie entsprechend der in der Schule ausgehängten Tabellen zum Fußballturnier entsprechende Webseiten.
siehe auch: http://www.oszkim.de/home/de/Was-tun-wir/Galerie/Fuballturnier-2015
Beispiel für Turniertabellen:
  1. https://www.wallpaper-gratis.eu/sport/fussball/fussball-em-2012-spielplan006_1024x768.jpg
  2. http://media1.faz.net/ppmedia/aktuell/sport/fussball-em/3742329448/1.3963091/article_multimedia_overview/hq/infografik-spielplan-der.jpg
  3. http://www.dfb.de/fileadmin/_processed_/csm_100946-Unbenannt-1_eceafe6433.jpg