nichtwissend: Tabellenbreite und -höhe bei CSS

Beitrag lesen

Hallo Gernot,

dann will ich es mal anders formulieren. Wie baue ich mit CSS „ETWAS“, das sich auf dem Bildschirm, dem Aussehen nach, wie eine Tabelle verhält?

Der Code

  
  
  
    <table border="0" width="100%" height="100px">  
  
      <colgroup>  
      <col width="20%">  
      <col width="80%">  
      </colgroup>  
  
      <tr bgcolor="silver">  
      <td><a href="http://yyyyyyyyyy/mw"> <img src="logo3.jpg"></a> </td>  
      <td><font face="verdana" size="6"><center> heute Nacht </font></td>  
      </tr>  
    </table>  
  
  

erzeugt eine einzeilige Tabelle mit zwei Spalten. Die Höhe beträgt 100 Pixel und geht über die gesamte Breite. Im Browser sehe ich zwei Rechtecke in der Farbe „silver“, wenn kein Text und Logo angegeben ist. Wenn der Text nur einen Buchstaben hat, wird er zentriert dargestellt.

Eine einzeilige Tabelle mit sechs Spalten erzeuge ich so:

  
  
<table border="0" width="100%" height="30px">  
  
    <colgroup span="6" width="16.66%">/-->  
  
    <tr bgcolor="yellow">  
      <td><font face="verdana" color="black"><center> ABC </font></td>  
      <td><font face="verdana" color="black"><center> 123 </td>  
      <td><font face="verdana" color="black"><center> DEF </td>  
      <td><font face="verdana" color="black"><center> 456 </td>  
      <td><font face="verdana" color="black"><center> GHI </td>  
      <td><font face="verdana" color="green"><a href="http://yy/mw/imp.html"> <img src="impressum1.jpg"></a></td>  
    </tr>  
    </table>  
  

Wenn ich nun die zweispaltige Tabelle mit CSS darzustellen versuche, bekomme ich keine sichtbaren Rechtecke in „silver“ zusehen von 100 Pixel Höhe und in der Breite von 20% und 80%.

Der Code für CSS

  
  
<style type="text/css">  
  
     <table style=table-layout:fixed; height:100px;>  
  
      <tr>  
  
        <td style="width:20%"><td>  
        <td style="width:100%"><td>  
  
       </tr>  
     </table>  
    </style>  
  

Der Code für die Tabelle

  
  
  
<table>  
  
      <tr bgcolor="silver">  
           <td><a href="http://yyyyyyyyyy/mw"> <img src="logo3.jpg"></a> </td>  
           <td><font face="verdana" size="6"><center> heute Nacht</font></td>  
       </tr>  
</table>  
  
  

Wenn ich mir das im Browser ansehe, umschließen die „silver“ farbigen Rechtecke das Logo und den Text. Aber ich sehe keine 100 Pixel hohen Rechtecke in der Breite  von 20% und 80%. Wenn ich gar keinen Text habe, sehe ich auch nur eine weiße Fläche. Habe ich einen längeren Text, wird das Rechteck entsprechend größer. Ich möchte aber die zwei Rechtecke farbig in der festgelegten Größe (Höhe 100px, Breite 20% und 80%) sehen, egal ob Text, Bilder oder gar nichts enthalten ist.

Ich bin Anfänger in HTML und mit CSS befasse ich mich erst seit 2 Tagen.

Ich hoffe ich habe mein Problem verständlich herüber gebracht.

Danke im Voraus

nichtwissend