HTML cellpadding bei Tabellen funktioniert durch CSS nicht.

[Empire]

Hallo,

ich möchte die Zeilenhöhe von dieser Tabelle etwas vergrößern.
Habe deshalb bei <table cellpadding="5px"> eingefügt. Leider funtktioniert das nicht, weil ich in meiner stylesheet.css padding: 0; verwende. Wenn ich das in der CSS lösche, funktioniert zwar das cellpadding in der einen Tabelle, dafür wirft es mir das Menü völlig durcheinander. Weil ja dieses dort ebenfalls darauf zugreift.

Hier habe ich das ganze mal ohne dem stylesheet.css probiert. So sollte die Tabelle auch in etwa aussehen. Da es übersichtlicher ist.

Gibt es eine Möglichkeit das Problem zu lösen?

 

[Lavaground]

mach aus der tabelle ein div und definiers über css oder machs dreckig mit inlinestyle und "!important" (falls nur inline nicht ausreicht):

<table style="padding: 5px !important;">

oder gib der tabelle ne id/class und definiers dann in der css xD
für die zeilenhöhe kannst du auch einfach line-height definieren

 

[Gajel]

Die sauberste lösung ist der Tabelle eine #ID oder .klasse zu zuweisen und dann per css arbeiten!

 

[Empire]

Irgendwie schaffe ich es nicht der Tabelle eine ID zu geben.
Hab jetzt folgendes geschrieben:

<table width="890" border="0" cellspacing="3" class="no-border">
<div id="wetter">
....dann die Tabelle...
</div>

Und in die CSS Datei:
div#wetter {
cellpadding: 5px;
}

 

[Gajel]

Ich glaube du solltest dich mal mit den Grundlagen von HTML und CSS beschäftigen!
Du sollst der Tabelle eine #ID geben und kein DIV Element in die Tabelle einfügen und dem eine #ID geben

<table id="wetter" width="890" border="0" cellspacing="3" class="no-border">
<tr> usw......
</table>

noch besser so:

<table id="wetter" class="no-border">
<tr> usw......
</table>

und alles (width, border, cellspacing usw...) per css regeln.

 

[Empire]

Ja, wie du schon bemerkt hast bin ich kein Profi. Deshalb muss ich mir alles immer wieder mühsam zusammen suchen wenn ich an meiner Seite bastle
Was muss ich nun in die CSS schreiben?

 

[Lavaground]

in die css kommt dann:

#wetter {padding: 5px; width: 890px; border: 0; margin: 3px;}

oder in lesbar:

#wetter {
padding: 5px;
width: 890px;
border: 0;
margin: 3px;
}

und halt jeder weiter wert den du gern hättest. das mit dem margin sollte das cellspacing ersetzen, da cellspacing und cellpadding keine css konformen parameter und desweiteren veraltet sind

edit:

margin und padding (oder alle parameter mit den mehrern richtungen) kannst du auch einzeln definieren.

margin: 10px 20px 5px 15px;

das würde die abstände in der reihenfolge: top -> right -> bottom -> left definieren und erspart dir margin-top, margin-right,.....

"margin: 5px;" definiert alle vier richtungen aufeinmal und "margin: 10px 20px;" definiert top + bottom 10px und left + right 20px

firefox mit firebug ist eine super combo um mit css rumzufummeln bevor man es einträgt

 

[Gajel]

Die CSS-Eigenschaften inkl. der Werte für deine Klassen oder ID's, die du brauchst um an dein Ziel zu kommen.

 

[Empire]

Ich hab das jetzt mal so geschrieben, leider ohne Erfolg.
Keine Ahnung an was das liegen könnte.

 

[Lavaground]

die "<td>'s" sollten jetzt auch per css .klasse definiert werden bisher gelten die werte ja nur für <table>

in dem fall kannst du sowas draus machen

<table id="wetter" class="no-border">
<tr>
<td class="wetter">
.....
</td>
</tr>
</table>

#wetter {
width: 890px;
border: 0;
}

.wetter {
padding: 5px;
margin: 3px;
}

 

[Standar(D!)]

Um die Zeilenhöhe zu ändern, musst du den Innenabstand aller td-Elemente vergrößern. Insofern sollte deine css-Anweisung

#wetter td {padding: 5px}

lauten. Andernfalls wird ja nur der Innenabstand der gesamten Tabelle verändert.

 

[Empire]

Super, jetzt funktioniert es

Hab jetzt letzentlich folgendes gemacht.
In die HTML Datei:
<table id="wetter" class="no-border">

Und in die CSS Datei:
#wetter td {padding: 5px}

Danke nochmal für eure Hilfe!