Tabelle gestalten

Kazu · 3. Januar 2011

Hiho!

Ich möchte eine tabelle gerne nachbilden und zwar sollte die folgender maßenaussehen <a class="postlink" href="http://www.sauerland-fewo.de/de/wohnungen/astrid/astrid.php">http://www.sauerland-fewo.de/de/wohnung ... astrid.php</a> und unten könnt ihr dann auf << Preise für die Wohnung >> klicken. Ich habs schon geschafft ne Fancy box zu bauen und alles bloss hab ich es nicht so mit der tabellengestaltung.

Code

<table width="350" border="1" cellpadding="0" cellspacing="0" bordercolor="#B3B3B3" style="border-style:solid;">
  <tr>
    <th colspan="4" scope="col"><span style="color:#4F090B">Wohnung Astrid</span></th>
  </tr>
  <tr>
    <td style="border-style:none;"><span style="color:#4F090B"><strong>Personen:</strong></span></td>
    <td style="border-style:none;"><span style="color:#4F090B">Saison:</span></td>
    <td style="border-style:none;"><span style="color:#4F090B">Nebensaison:</span></td>




    <td style="border-style:none;"><span style="color:#4F090B">Endreinigung:</span></td>
  </tr>
  <tr>
    <td style="border-style:none;">bis 5</td>
    <td style="border-style:none;">61,- €</td>
    <td style="border-style:none;">55,- €</td>
    <td style="border-style:none;">32,- €</td>




  </tr>
  <tr>
    <td colspan="4"><p>Saison:</span><br/>
    19.12.09 - 06.01.10<br/>
    27.03.2010 - 10.04.2010<br/>
    20.06.2010 - 28.08.2010<br/>
    09.10.10 - 23.10.10<br/>




      <p>Mietpreise in Euro pro Tag und Wohnung</p></td>
  </tr>
  <tr>
    <td colspan="4">Nebensaison:<br/>
    Bei Kurzaufenthalten unter 4 Tage wird immer der Saison-Tagespreis berechnet.
    <p>Mietpreise in Euro pro Tag und Wohnung</p></td>
  </tr>
  <tr>




    <td colspan="4">Endreinigung:<br/>
    Die Endreinigung der Wohnung erfolgt durch den Vermieter.</td>
  </tr>
</table>

Alles anzeigen

wobei ich probleme habe ist das das feld "personen saison etc." außen rum einen rand besitzen soll eben wie in der vorlage.
hoffe ihr könnt mir helfen!

lg

Kazu

lauras · 3. Januar 2011

Hi,
ich habe dir mal etwas zusammengebastelt, was von deiner Tabelle ein bisschen abweicht. Eine richtige Tabelle hast du ja eigentlich nur da wo die Preise stehen - für alles andere habe ich Überschriften (die Grade bei Bedarf anpassen) und Absätze verwendet.
Das Reset-Stylesheet fehlt, das solltest du hinzufügen und den Teil mit dem Asterix entfernen

Gruß,
Laura
PS: Normalerweise alle Angaben ins CSS auslagern, das ist jetzt nicht getestet!

HTML

<!DOCTYPE html>
<html>




<head>
<style>
* {
    margin: 0;
    padding: 0;
}




div#astrid {
    margin: 10px;
    width: 350px;
    border-left: 2px solid silver;
    border-right: 2px solid silver;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}
table {
    border-collapse: collapse;
    table-layout: fixed;




}
td {
    border: none;
    width: 150px;
}
h3, table, h2 {
    border-top: 1px solid black;
    margin-top: -1px;
}




</style>
</head>




<body>
<div id="astrid">
<h2>Wohnung Astrid</h2>
<table>
    <tr><td>Personen:</td><td>bis 5</td><td>Endreinigung:</td><td>32,- €</td></tr>
    <tr><td>Saison:</td><td>61,- €</td><td>Nebensaison:</td><td>55,- €</td></tr>




</table>
<h3>Saison:</h3>
<p>19.12.09 - 06.01.10<br />
27.03.10 - 10.04.10...</p>
<p>Mietpreise in Euro pro Tag und Wohnung</p>
<h3>Nebensaison:</h3>
<p>Bei Kurzaufenthalten..</p>
<h3>Endreinigung</h3>
<p>Die Endreinigung der...</p>
</div>
</body>
</html>

Alles anzeigen

Kazu · 4. Januar 2011

Super! Genau das meinte ich
Ganz ehrlich...find ich ne supergeile Lösung wäre ich so garnicht drauf gekommen :oops:

Tabelle gestalten

Jetzt mitmachen!

Teilen