Tabelle statt Tabstops - wie richtig formatieren?

[Jochen]

Hallo,

also eigentlich wollte ich

Adresse: Name, Straße, Ort
Telefon: 0221 ...
Mobil: 0163 ...
Mail: [e-mail]</a>

so formatiert haben, dass die Angaben nach den Doppelpunkten vertikal alle an derselben Stelle beginnen. Deshalb eine Tabelle.

  
<table>  
 <tr>  
  <td>Adresse:</td>  
  <td>Name, Straße, Ort</td>  
 </tr>  
 <tr>  
  <td>Telefon:</td>  
  <td>0221 ...</td>  
 </tr>  
 <tr>  
  <td>Mobil:</td>  
  <td>0163 ...</td>  
 </tr>  
 <tr>  
  <td>E-Mail</td>  
  <td>[e-mail]</td>  
 </tr>  
</table>  

Problem ist nun aber, dass 1. die Tabelle höher rutscht, als wie wenn um den Text keine Tabelle wäre, also echt an der Überschrift klebt, 2. sich die Zeilenabstände vergrößert haben und sich 3. unten nach der Tabelle der Abstand zum nächsten Text auch erheblich vergrößert hat, selbst, wenn ich keinen Zeilenumbruch nach der Tabelle habe.

Gut, habe ich mir gedacht CSS soll es richten, so dass ich in mein Stylesheet

  
table, tr, td {  
	border: none;  
	margin: 0px;  
	padding: 0px;  
	vertical-align: top;  
	overflow: hidden;  
	}  

geschrieben habe. Vergeblich. Es ändert sich rein garnichts, als ob da nix in CSS zum table stehen würde.

Was mache ich falsch?

[suit]

Was mache ich falsch?

Dein Eigentliches Problem kann ich nicht nachvollziehen, bzw. ich verstehe deine Beschreibung nicht - aber du könntest für die Bezeichner eine Kopfzelle (<th />) verwenden.

[Beat]

Adresse: Name, Straße, Ort
Telefon: 0221 ...
Mobil: 0163 ...
Mail: [e-mail]</a>

so formatiert haben, dass die Angaben nach den Doppelpunkten vertikal alle an derselben Stelle beginnen. Deshalb eine Tabelle.

Kannst du mit einer <dl> erreichen indem du
dt{ float:left; clear:both; width:30%; text-align:right;}
dt:after{content:': ';}
dd{ float:right; width:69%; }

plus ein paar ergänzende Angaben verwendest.

Problem ist nun aber, dass 1. die Tabelle höher rutscht, als wie wenn um den Text keine Tabelle wäre, also echt an der Überschrift klebt,

Stichwort margin, oder eventuell (siehe 3.) position:relative falsch oder überflüssig angewendet (irgendwo fürher im CSS bei einer anderen tabelle gesetzt).

2. sich die Zeilenabstände vergrößert haben und sich

Stichwort border-spacing, border-collapse, padding

3. unten nach der Tabelle der Abstand zum nächsten Text auch erheblich vergrößert hat, selbst, wenn ich keinen Zeilenumbruch nach der Tabelle habe.

klingt nach relativer Verschiebung. Siehe 1)

mfg Beat

[Jochen]

Kannst du mit einer <dl> erreichen indem du
dt{ float:left; clear:both; width:30%; text-align:right;}
dt:after{content:': ';}
dd{ float:right; width:69%; }

plus ein paar ergänzende Angaben verwendest.

Ich habe die letze Stunde damit verbracht mir das bislang völlig unbekannte <dt> und Konsorten reinzuziehen, das ist mir wieder 'mal zu hoch.

Stichwort margin, oder eventuell (siehe 3.) position:relative falsch oder überflüssig angewendet (irgendwo fürher im CSS bei einer anderen tabelle gesetzt).
klingt nach relativer Verschiebung. Siehe 1)

Das mag sein, auch wenn das die einzige Tabelle ist. Gefunden habe ich den Fehler nicht.

Ich schmeiße 'mal wieder das Handtuch und dann steht's dort eben so da wie eingangs ganz normal getippt. Was soll's.

Danke für die Zeit.

[Klawischnigg]

Hi there,

»» so formatiert haben, dass die Angaben nach den Doppelpunkten vertikal alle an derselben Stelle beginnen. Deshalb eine Tabelle.

Kannst du mit einer <dl> erreichen indem du
dt{ float:left; clear:both; width:30%; text-align:right;}
dt:after{content:': ';}
dd{ float:right; width:69%; }

Interessante Aufgabenstellung aber imho so wie Du vorschlägst nicht zu lösen; dt:after.... versteht der IE nicht und damit ist das Konzept gestorben; ich seh' nicht wirklich, wie man bei Formulareingaben so wie es der OP wollte ohne Tabelle gerade rücken kann; elegant ist es nicht, aber es funktioniert in allen Browsern...