NineInchNails: Tabellen

Hi ich weiss echt nicht weiter.
Unser Informatiklehrer verlangt wiedereinmal etwas was er schlecht erklaert hat.
http://img3.imagebanana.com/img/v4d7nltc/TAFEL.JPG
Das sollen wir als HTML Tabelle machen.

<html>  
<head>  
<title>Tabellen</title>  
</head>  
<body>  
<table border="3" cellpadding="3">  
  <tr>  
    <td height="20" width="20">  
      a  
    </td>  
    <td width="40">  
      b  
    </td>  
    <td width="20">  
      c  
    </td>  
  </tr>  
  <tr>  
    <td rowspan="2">  
      d  
    </td>  
    <td>  
      e  
    </td>  
    <td rowspan="2" colspan="2" width="40" height="40">  
    g  
    </td>  
  </tr>  
  <tr>  
    <td>  
      f  
    </td>  
  </tr>  
</table>  
</body>  
</html>

Link zur Tabelle
Soweit bin ich, aber ich schaff es nicht, dass die Buchstaben "E" und "F" nur halbsolange sind wie "b" (also die Tabellen)
Findet ihr den Fehler?
Danke im Voraus fuer die Hilfe
NIN

  1. Kennst du colspan?

    1. hi,

      Kennst du colspan?

      Kannst du lesen?

      holla holla

  2. Findet ihr den Fehler?

    Da man das ganze ja nur als eine Art Rätsel ernst nehmen kann:

    Ich gebe dir nur einen Tipp fürs weiterkommen.
    in Zelle "b" fehlt etwas das auf "-span" endet.

    mfg Beat

    --
    Woran ich arbeite:
    X-Torah
       <°)))o><                      ><o(((°>o
  3. Hi NineInchNails!

    Um so ein Problem generell anzugehen:
    1. Zerlege die Tabelle in Vierecke, so dass alle Ecken mit anderen Ecken zusammenfallen, d. h. es müssen genau gleich große Rechtecke entstehen.
    Für deinen Fall also:
    _________________
    | a | b | b | c |
    |---------------|
    | d | e | g | g |
    |---------------|
    | d | f | g | g |
    -----------------

    2. Nun siehst du welche Zellen welchen row- bzw. colspan benötigen.
    _________________
    | a  | cs=2 | c |
    |---------------|
    | rs | e | cs=2 |
    | =  |---|      |
    | 2  | f | rs=2 |
    -----------------

    MfG H☼psel

    --
    "It's amazing I won. I was running against peace, prosperity, and incumbency."
    George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
    Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)
    1. Hallo Hopsel,

      Um so ein Problem generell anzugehen:

      1. Zerlege die Tabelle in Vierecke, so dass alle Ecken mit anderen Ecken zusammenfallen, d. h. es müssen genau gleich große Rechtecke entstehen.
        Für deinen Fall also:
        _________________
        | a | b | b | c |
        |---------------|
        | d | e | g | g |
        |---------------|
        | d | f | g | g |

      1. Nun siehst du welche Zellen welchen row- bzw. colspan benötigen.
        _________________
        | a  | cs=2 | c |
        |---------------|
        | rs | e | cs=2 |
        | =  |---|      |
        | 2  | f | rs=2 |

      das hast Du schön erklärt. Wenn die Browser clever genug wären, das so umzusetzen, wie der Lehrer es an die Tafel gemalt hat, wäre es noch schöner.

      Nach meinen Untersuchungen im Laufe der vergangenen Woche sind Browser jedoch nur in einem Modus sehr zuverlässig beim Rendern einer Tabelle, wenn die gewünschte Breite nicht durch den Inhalt ausgefüllt wird:

      <http://de.selfhtml.org/css/eigenschaften/tabellen.htm#table_layout@title=table-layout: fixed;>

      mit vorgegebener Tabellenbreite (die kleiner oder gleich der Summe der Spaltenbreiten sein sollte).

      Schauen wir uns an, was bei mir (ohne CSS-Einsatz) herausgekommen ist:

      Screenshot IE7 (21 kB)
      Screenshot Firefox 3.0.1 (24 kB)
      Screenshot Opera 9.52 (21 kB)
      Screenshot Safari 3.1.2 (23 kB)

      Außer Safari kommt keine Darstellung der Aufgabenstellung nahe - im Gegensatz zu der in allen Browsern weitgehend gleichen Darstellung, hier exemplarisch beim IE 7, die laut Tafelbild gewünscht war:

      Screenshot Zielvorstellung, hier im IE (34 kB)

      Diese Darstellung benötigt den Einsatz von weiterführenden Elementen, um <http://de.selfhtml.org/html/tabellen/aufbau.htm#vordefinieren@title=Spalten vorzudefinieren>. Dieses Mittel führt jedoch nur im Firefox dazu, dass die Darstellung der Zielvorgabe (einigermaßen) entspricht. Operas Darstellung bleibt auch im Standards Compliance Modus vergleichbar zu der im IE.

      Für die Darstellung verwendete ich folgende CSS-Angaben:

          table {  
              /* zuverlässige Spaltenbreiten (falls der Inhalt nicht breit  
                 genug ist, gibt es nur im [link:http://www.w3.org/TR/2007/CR-CSS21-20070719/tables.html#fixed-table-layout@title=Fixed table layout]  
                 in Verbindung mit einer Breitenangabe für die Tabelle */  
              table-layout: fixed;  
              width: 16em;  
        
              /* Weiße Schrift auf grünem Hintergrund, wie auf Schultafeln üblich */  
              color: white;  
              background-color: green;  
        
              /* Die da wollte ich immer mal verwenden ;-) */  
              font-family: "Comic Sans MS", fantasy;  
        
              /* etwas mehr in Tafelgröße ... */  
              font-size: 2em;  
          }  
        
          /* Breitenangaben für die Spalten */  
          col {  
              width: 4em;  
          }  
        
        
          td {  
              /* Höhe einer Zeile = Breite einer Spalte */  
              height: 4em;  
              /* Setze den Text mittig */  
              text-align: center;  
          }  
      
      

      Alles in allem finde ich das für eine Schulaufgabe nicht gerade einfach, vor allem da die CSS-freie Lösung in verbreiteten Browsern nicht die gewünschte Darstellung liefert. Ja, ich weiß, dass für die Darstellung CSS zuständig ist. Aber weiß dies der Lehrer? Hat er es seinen Schülern vermittelt? Anhand der Indizienlage (CSS-freier HTML-Code ohne http://de.selfhtml.org/html/xhtml/unterschiede.htm#dokumenttyp@title=Dokumenttyp-Deklaration) bezweifle ich das.

      Freundliche Grüße

      Vinzenz

  4. http://img3.imagebanana.com/img/v4d7nltc/TAFEL.JPG

    wenn die reihenfolge der beschriftung die reihenfolge im quellcode wiedergeben  soll, wird das "etwas schwierig" als tabelle umsetzbar - oder täusche ich mich da jetzt?

  5. Hi ich weiss echt nicht weiter.
    Unser Informatiklehrer verlangt wiedereinmal etwas was er schlecht erklaert hat.
    http://img3.imagebanana.com/img/v4d7nltc/TAFEL.JPG
    Das sollen wir als HTML Tabelle machen.

    <html>

    <head>
    <title>Tabellen</title>
    </head>
    <body>
    <table border="3" cellpadding="3">
      <tr>
        <td height="20" width="20">
          a
        </td>
        <td width="40">
          b
        </td>
        <td width="20">
          c
        </td>
      </tr>
      <tr>
        <td rowspan="2">
          d
        </td>
        <td>
          e
        </td>
        <td rowspan="2" colspan="2" width="40" height="40">
        g
        </td>
      </tr>
      <tr>
        <td>
          f
        </td>
      </tr>
    </table>
    </body>
    </html>

    
    > [Link zur Tabelle](http://upload.zichy.de/files/Tabelle_Aufgabe218.html)  
    > Soweit bin ich, aber ich schaff es nicht, dass die Buchstaben "E" und "F" nur halbsolange sind wie "b" (also die Tabellen)  
    > Findet ihr den Fehler?  
    > Danke im Voraus fuer die Hilfe  
    > NIN  
      
    Hi  
    Hab das hier gemacht:  
      
    <html>  
    <head>  
    <title>Tabellen</title>  
    </head>  
    <body>  
    <table border="3" cellpadding="3">  
      <tr>  
        <td height="20" width="20">  
          a  
        </td>  
        <td width="40" colspan="2">  
          b  
        </td>  
        <td width="20" colspan="2">  
          c  
        </td>  
      </tr>  
      <tr>  
        <td rowspan="2">  
          d  
        </td>  
        <td width="10">  
          e  
        </td>  
        <td rowspan="2" colspan="2" width="40" height="40">  
        g  
        </td>  
      </tr>  
      <tr>  
        <td width="10">  
          f  
        </td>  
      </tr>  
    </table>  
    </body>  
    </html>  
      
    Schaus dir mal an und sag ob es das ist was du dir vorstellst.  
      
    MFG  
    Simon