✔ Tabellenumwandlung in css

[lajilla]

Hallo,
wer kann mir bitte mal bei der Umwandlung einer Tabelle in css helfen.
Der äüßere Rahmen ist kein Problem, mit dem inneren Rahmen und der dazugehörenden Farbe komme ich aber nicht klar.
Da die Tabelle flexibel sein soll, manchmal muss ich die Zeilenhöhe verändern, wäre es besser, wenn ich die css Anweisungen nicht auslagere, sondern jeweils in der Html-Seite einfüge, denke ich jedenfalls.
Eine Mustertabelle, mit Frontpage und dem nichtvaliden bordercolor habe ich hier hinterlegt.

http://www.meinzuhause24.com/tabelle-voll.html

Oder wäre php vielleicht besser? Hab nicht so viel Ahnung von allem.

Vielen Dank im Voraus.

 

[Maik]

Hi,

mit dem folgenden Stylesheet lässt sich die Rahmenfarbe für die komplette Tabelle einrichten:

table, td {
border: 1px solid #c0c0c0;
border-collapse: collapse;
}

 

[lajilla]

Bitte noch mal für Doofe, am besten gleich hier hinein. Danke!

<!--
<div align="center">
<table width="750" border="1" bordercolor="#C0C0C0" style="border-collapse: collapse" cellpadding="0" cellspacing="0">
    <tr>
      <td width="149" height="35" class="h1" align="left">
      <p style="margin-top: 0; margin-bottom: 0">ID: b376<p style="margin-top: 0; margin-bottom: 0">&nbsp;</td>
      <td width="598" height="35" class="h1" align="left">
      <p align="left" style="margin-top: 0; margin-bottom: 0">Ein- Zweifamilienhaus 
      <p align="left" style="margin-top: 0; margin-bottom: 0">&nbsp;</td>
    </tr>
    <tr>
      <td width="149" height="35" class="h1" align="left">
      <p style="margin-top: 0; margin-bottom: 0">Lage:<p style="margin-top: 0; margin-bottom: 0">&nbsp;</td>
      <td width="598" height="35" class="h1" align="left">
      <p style="margin-top: 0; margin-bottom: 0">13591 
      Berlin-Spandau, OT Staaken nahe Heerstrasse und Magistratsweg<p style="margin-top: 0; margin-bottom: 0">&nbsp;</td>
    </tr>
    <tr>
      <td width="149" height="35" class="h1" align="left">
      <p style="margin-top: 0; margin-bottom: 0">Wohnfläche:<p style="margin-top: 0; margin-bottom: 0">&nbsp;</td>
      <td width="598" height="35" class="h1" align="left">
      <p style="margin-top: 0; margin-bottom: 0">ca. 180 m2&nbsp; plus ca. 180 m2 Nutzfläche<p style="margin-top: 0; margin-bottom: 0">&nbsp;</td>
    </tr>
    <tr>
      <td width="149" height="35" class="h1" align="left">
      <p style="margin-top: 0; margin-bottom: 0">Grundstück:<p style="margin-top: 0; margin-bottom: 0">&nbsp;</td>
      <td width="598" height="35" class="h1" align="left">
      <p style="margin-top: 0; margin-bottom: 0">ca. 750 m2  
      <p style="margin-top: 0; margin-bottom: 0">&nbsp;</td>
    </tr>
    <tr>
      <td width="149" height="35" class="h1" align="left">
      <p style="margin-top: 0; margin-bottom: 0">Heizung:<p style="margin-top: 0; margin-bottom: 0">&nbsp;</td>
      <td width="598" height="35" class="h1" align="left">
      <p style="margin-top: 0; margin-bottom: 0">Ölzentralheizung mit 5000 Liter Tanks<p style="margin-top: 0; margin-bottom: 0">&nbsp;</td>
    </tr>
    <tr>
      <td width="149" height="35" class="h1" align="left">
      <p style="margin-top: 0; margin-bottom: 0">Baujahr:<p style="margin-top: 0; margin-bottom: 0">&nbsp;</td>
      <td width="598" height="35" class="h1" align="left">
      <p style="margin-top: 0; margin-bottom: 0">1960 aufgestockt ca, 1982<p style="margin-top: 0; margin-bottom: 0">&nbsp;</td>
    </tr>
    <tr>
      <td width="149" height="35" class="h1" align="left">
      <p style="margin-top: 0; margin-bottom: 0">Aufteilung:<p style="margin-top: 0; margin-bottom: 0">&nbsp;<p style="margin-top: 0; margin-bottom: 0">&nbsp;<p style="margin-top: 0; margin-bottom: 0">&nbsp;</td>
      <td width="598" height="35" class="h1" align="left">
      <p style="margin-top: 0; margin-bottom: 0">KG: beheizter ´(Wohn-) Raum, Bad mit Badewanne und 
      Whirlpool, Wirtschaftsräume.<p style="margin-top: 0; margin-bottom: 0">EG: 
      3-Zimmer, Küche, Bad, Abstellraum. 
      <p style="margin-top: 0; margin-bottom: 0">OG: 3-Zimmer, Küche, 
      Bad.<p style="margin-top: 0; margin-bottom: 0">Dachboden: großer Stauraum<p style="margin-top: 0; margin-bottom: 0">&nbsp;</td>
    </tr>
    <tr>
      <td width="149" height="35" class="h1" align="left">
      <p style="margin-top: 0; margin-bottom: 0">Kaufpreis:<p style="margin-top: 0; margin-bottom: 0">&nbsp;</td>
      <td width="598" height="35" class="h1" align="left">
      <p style="margin-top: 0; margin-bottom: 0">249.000 Euro<p style="margin-top: 0; margin-bottom: 0">&nbsp;</td>
    </tr>
    <tr>
      <td width="149" height="35" class="h1" align="left">
      <p style="margin-top: 0; margin-bottom: 0">Besichtigung:<p style="margin-top: 0; margin-bottom: 0">&nbsp;</td>
      <td width="598" height="35" class="h1" align="left">
      <p style="margin-top: 0; margin-bottom: 0">Jederzeit nach 
      vorheriger Vereinbarung.<p style="margin-top: 0; margin-bottom: 0">&nbsp;</td>
    </tr>
    <tr>
      <td width="149" height="35" class="h1" align="left">
      <p style="margin-top: 0; margin-bottom: 0">Käufercourtage:<p style="margin-top: 0; margin-bottom: 0">&nbsp;<p style="margin-top: 0; margin-bottom: 0">&nbsp;</td>
      <td width="598" height="35" class="h1" align="left">
      <p style="margin-top: 0; margin-bottom: 0">7,14% inkl. MWSt. 
      vom Kaufpreis für unseren Nachweis und/oder unsere Vermittlung, zahlbar vom 
      Käufer bei Abschluss eines Kaufvertrages an uns.<p style="margin-top: 0; margin-bottom: 0">&nbsp;</td>
    </tr>
    <tr>
      <td width="149" height="35" class="h1" align="left">
      <p style="margin-top: 0; margin-bottom: 0">Sonstiges:</p>
      <p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
      <p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
      <p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
      <p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
      <p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
      <p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
      <p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
      <p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
      <p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
      <p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
      <p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
      <p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
      <p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
      <p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
      <p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
      <p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
      <p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
      <p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
      <p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
      <p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
      </td>
      <td width="598" height="35" class="h1" align="left">
      <p style="margin-top: 0; margin-bottom: 0" class="h1">Bei der angebotenen 
      Immobilie handelt es sich um ein voll unterkellertes, Ein-/&nbsp; 
      Zweifamilienhaus auf einem schönen und gepflegten Grundstück mit 
      Südterrasse,&nbsp; Pool und Koiteich. Zwei voneinander getrennte 
      Wohnungen, die jedoch zusammenlegbar sind ergeben eine Wohnfläche von ca. 
      180 m2. Zusätzliche Nutzflächen befinden sich im Keller und im Dachboden.</p>
      <p style="margin-top: 0; margin-bottom: 0" class="h1">&nbsp;</p>
      <p style="margin-top: 0; margin-bottom: 0" class="h1">Überwiegend 
      Partkettfußböden, 1 Raum mit Marmorfußboden, Vollwärmeschutzfassaden 80 
      mm, Alu 
      Fensterbänke, sämtliche Fenster mit Jalousien.</p>
      <ul>
        <li>
        <p style="margin-top: 0; margin-bottom: 0" class="h1">Dacheindeckung und 
        Zinkeinfassungen wurden 1998 erneuert. </li>
        <li>
        <p style="margin-top: 0; margin-bottom: 0" class="h1">
        Niedertemperaturheizung von Viessmann mit Warmwasser und Edelstahlrohr 
        im Schornstein wurden 2003 erneuert.</li>
        <li>
        <p style="margin-top: 0; margin-bottom: 0" class="h1">Sämtliche 
        Elektrik, alle Jalousien und Bad mit Dusche wurde 2005 erneuert.</li>
      </ul>
      <p style="margin-top: 0; margin-bottom: 0" class="h1">Im Innenbereich sind 
      ggf. einige Schönheitsreparaturen auszuführen (Parkett abschleifen, 
      Marmorbad aufpolieren, Einbauküche im EG ersetzen oder Umbau in 
      Wohnbereich). </p>
      <p style="margin-top: 0; margin-bottom: 0" class="h1">&nbsp;</p>
      <p style="margin-top: 0; margin-bottom: 0" class="h1">Über die B 5 
      erreicht man schnell die A 10 und über die Heerstrasse mit PKW oder X-Bus 
      die Innenstadt. Bis zum Fernbahnhof&nbsp; und Rathaus Spandau sind es ca. 
      4 Km.</p>
      <p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
           </td>
    </tr>
    <tr>
      <td width="149" height="35" class="h1" align="left">
      <p style="margin-top: 0; margin-bottom: 0">Hinweis:<p style="margin-top: 0; margin-bottom: 0">&nbsp;<p style="margin-top: 0; margin-bottom: 0">&nbsp;</td>
      <td width="598" height="35" class="h2" align="left">
      <p style="margin-top: 0; margin-bottom: 0" class="texttranslate">
      Alle Angaben erfolgen nach Auskunft des Eigentümers. Irrtum und 
      Zwischenkauf vorbehalten.&nbsp; Dieses&nbsp;&nbsp;&nbsp;Exposé ist eine Vorinformation, 
      als Rechtsgrundlage gilt allein der notarielle Kaufvertrag. Im übrigen 
      gelten unsere&nbsp; <a target="_blank" class="agb" href="../agb/agb.php">
      Geschäftsbedingungen.</a></p>
      <p style="margin-top: 0; margin-bottom: 0" class="texttranslate">
      &nbsp;</p>
      <p style="margin-top: 0; margin-bottom: 0"></td>
    </tr>
  </table>
-->

 

[Maik]

Das empfohlene Stylesheet bindest du in der CSS-Datei http://www.meinzuhause24.com/scripte/standard.css ein, und macht die rotmarkierten Attribute im <table>-Tag überflüssig:

<table width="750" border="1" bordercolor="#C0C0C0" style="border-collapse: collapse" cellpadding="0" cellspacing="0">

 

[lajilla]

Danke, das funktioniert ja schon mal prima!
Was mach ich aber wenn die Rahmenfarbe an einer Stelle nicht haben möchte und die Tabelle unsichtbar sein soll?

 

[Maik]

Um die Tabelle unsichtbar zu machen, gibt es zum einen die display:none-, oder zum anderen die visibility:hidden-Eigenschaft.

Wenn die Tabelle an einer Stelle eine andere Rahmenfarbe erhalten soll, müsste für die entsprechende Tabellenzelle die gewünschte Rahmenfarbe bestimmt werden.

 

[lajilla]

Wie würde man denn in der Zeile die Rahmenfarbe ändern bzw. auf transparent setzen?
<!--
<td width="149" height="35" class="h1" align="left">
<p style="margin-top: 0; margin-bottom: 0">Wohnfläche:<p style="margin-top: 0; margin-bottom: 0">&nbsp;</td>
<td width="598" height="35" class="h1" align="left">
<p style="margin-top: 0; margin-bottom: 0">ca. 180 m2&nbsp; plus ca. 180 m2 Nutzfläche<p style="margin-top: 0; margin-bottom: 0">&nbsp;</td>
-->

 

[Maik]

Du legst dir zunächst im Stylesheet eine Klasse für die Zellen an:

td.newBorderColor {
border: 1px solid #ff0000; 
}

Und rufst diese im td-Element auf:

<td class="newBorderColor">...</td>

Der Wert transparent für den Rahmen, wird nicht von allen Browsern innerhalb einer Tabelle unterstützt, sondern dann schwarz dargestellt.

 

[lajilla]

Jetzt hab ich´s. Danke.