Akela: Tabellenzelle mit Fusszeile

Hallo,

ich will innerhalb einer Tabellenzelle per div eine Fusszeile einführen. Wenn ich einen div benutze, kann ich diesen aber nicht am unteren Zellenrand ausrichten. Kann mir jemand einen Hinweis geben wie ich das hinbekomme ?

Zusatz: Die Tabellenzelle ist Vorgabe und kann somit nicht herausgenommen werden.

ciao Andreas

  1. Hallo!

    ich will innerhalb einer Tabellenzelle per div eine Fusszeile einführen. Wenn ich einen div benutze, kann ich diesen aber nicht am unteren Zellenrand ausrichten. Kann mir jemand einen Hinweis geben wie ich das hinbekomme ?

    Nur der Neugierde wegen: Weshalb verwendest Du dafür nicht das vorgesehene <tfoot>?

    Schönen Gruß

    Afra

    1. Hallo Afra,

      Nur der Neugierde wegen: Weshalb verwendest Du dafür nicht das vorgesehene <tfoot>?

      tfoot wirkt sich auf die Tabelle aus, ich benötige aber nur eine
      Fusszeile in einer Zelle. Somit ist dieser Tag für mein Problem nicht anwendbar. Danke für Deinen Hinweis.

      ciao Andreas

  2. Hallo Akela,

    ohne genauere Angaben nicht so einfach zu beantworten:
    Wenn Du in der Zelle Text hast und benötigtst so etwas wie eine Fussnote, würde ich dafür <span> verwenden. Mit CSS kannst Du so ziemlich alles manipulieren.

    Du solltest aber auf jeden Fall darüber nachdenken, ob es sich bei Deinem Konstrukt auch wirklich um tabellarische Daten handelt, ansonsten wäre die Verwendung von <table> fehl am Platz.

    Gruss city

    1. Hallo city

      Du solltest aber auf jeden Fall darüber nachdenken, ob es sich bei Deinem Konstrukt auch wirklich um tabellarische Daten handelt, ansonsten wäre die Verwendung von <table> fehl am Platz.

      table muß ich nehmen, das ist vom Kunden so vorgegeben.
      Innerhalb der Table darf ich dann wieder machen, was ich will.

      Die erste Tabellenzeile ist ein <th> und geht über die ganze Breite der Tabelle.
      Die zweite Zeile ist wieder eine Tabelle mit zwei Zellen.

      In der linken Zelle ist ein Bild, sonst nichts.
      In der rechten Zelle soll oben ein normaler Text stehen und unten will ich dann meine Fusszeile einbringen.
      Da der Kunde bereits jede Menge Tabellen verwendet hat, möchte ich dort jetzt keine weiteren einfügen. Meine Intension war dann eben, zwei divs in dieser rechten Tabellenzelle einzuführen.
      Leider passen sich die divs aber nicht an die Tabellenzelle an.

      ciao Andreas

      1. Hallo Akela

        table muß ich nehmen, das ist vom Kunden so vorgegeben.
        Innerhalb der Table darf ich dann wieder machen, was ich will.

        »»
        Dann ist es Deine Aufgabe, den Kunden von der Sinnfreiheit seines Vorhabens zu überzeugen ( jetzt schreibe ich schon wie Cheatah ;-) )

        Die erste Tabellenzeile ist ein <th> und geht über die ganze Breite der Tabelle.
        Die zweite Zeile ist wieder eine Tabelle mit zwei Zellen.

        In der linken Zelle ist ein Bild, sonst nichts.
        In der rechten Zelle soll oben ein normaler Text stehen und unten will ich dann meine Fusszeile einbringen.

        CSS:  Die Werte musst natürlich anpassen

        td span {  margin:    0px;
                   padding:   0px;
                   font-family:     verdana, arial, helvetica, sans-serif;
                   font-size:       0.8em;
                   font-weight:     normal;
                   color:           #f06;
                   text-align:      center;
               }

        (X)HTML:

        ... <td>Text Text Text <span> Fussnote </span></td> ...

        Gruss city

        1. Hallo City,

          Danke für Deine sourcen aber ich denke das bringt mich nicht weiter.
          Ich benötige die Fusszeile nicht direkt unter dem Text sondern am unteren Rand der Tabellenzelle. Dabei soll es keine Rolle spielen, ob der vorgelagerte Text nur eine oder mehrere Zeilen hat. Das Bild gibt die Größe vor und hat ca 300px Höhe.
          vertical-align: bottom zieht hier leider nicht aber das wäre im Prinzip das, was ich brauche.

          ciao Andreas

          1. Hallo,

            Du strapazierst unsere Nerven aber ganz schön, Du redest die ganze Zeit von "Fusszeile". Ich erwähnte schon eingangs, dass Deine Angaben dürftig sind.

            Wenn diese sog. Fusszeile unter einer Zelle, aber innerhalb der Tabelle sein soll, dann gibt es nur eine Möglichkeit:füge eine weitere Reihe hinzu, deren entsprechende Zelle in puncto Höhe, Abstand, Font entprechend mit CSS formatiert wird.

            Gruss city

          2. hi,

            Würde dir auch empfehlen neue Tabellenreihe und dann mit http://de.selfhtml.org/html/tabellen/zellen_verbinden.htmcolespan[/link] zu arbeiten.

            Gruß Bobby

            1. ich mein natürlich
              colspan

              Alles weitere kann mit CSS formatiert werden!

              Gruß

  3. Hallo,

    ich habe das Ganze jetzt mit einem rowspan realisiert. Das ist zwar nicht das, was ich mir vorstelle aber das bringt mir zumindest ein Ergebnis.

    @City
    Ich beziehe mich immer auf das Innere der rechten Zelle. Mit Fusszeile meine ich den Bereich über dem "border-bottom".
    Hier die Skizze.

    +-------------------+
    |       | text 1    |
    | <img> | blablabla |
    |       |           |
    |       |           |
    |       |           |
    |       |           |
    |       |           |
    |       | fusszeile |
    +-------------------+

    ciao Andreas

  4. Moin!

    So?

    <html>  
    <head>  
     <style type="text/css">  
      .SermonZelle {  
       position:relative;  
       height:100%;  
      }  
      .Fusszeile {  
       position:absolute;  
       bottom:0px;  
       right:0px;  
      }  
     </style>  
    </head>  
    <body>  
      
    <table border="1px">  
     <tr>  
      <th colspan="2">  
       Kopfzeile  
      </th>  
     </tr>  
     <tr>  
      <td>  
       <img alt="Logo" src="logo.gif" height="300px"/>  
      </td>  
      <td>  
       <div class="SermonZelle">  
       Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit  
       <div class="Fusszeile">Meine Fusszeile</div>  
       </div>  
      </td>  
     </tr>  
    </table>  
      
    </body>  
    </html>
    

    -- Skeeve

    1. Hallo Skeeve,

      der Aufbau stimmt, leider funktioniert das CSS nicht wie gewünscht.
      Der Text des ersten divs wird vom zweiten div überschrieben.

      Irgenwie habe ich das Gefühl, daß Tabellen ganz schlechte Bezugs-Objekte sind :-(

      Trotzdem Danke.

      ciao Andreas

      1. Moin!

        der Aufbau stimmt, leider funktioniert das CSS nicht wie gewünscht.

        Im FF auf Mac schon. Wo hast Du es getestet?

        -- Skeeve