nicht angemeldet
Tabelle mit CSS möglichst elegant formatieren
Grüßt euch,
bisher hab ich noch nie eine Tabelle mit CSS formatiert. Ich benötige eine Tabelle mit drei Zeilen und drei Spalten. Die erste Spalte soll 200 Pixel breit sein. Die zweite Spalte soll den Rest des verfügbaren Platzes in Anspruch nehmen.
Habs mal folgendermaßen probiert. So wirklich elegant finde ich die Lösung nicht. Weiß allerdings nicht wie ich es besser machen könnte. Außerdem bekomme ich die folgenden Dinge nicht hin:
1.)
"Textfeld" soll nicht vertikal zentriert angezeigt werden. Es soll am oberen linken Rand der Zelle positioniert werden. Wie kann ich das hinbekommen?
2.)
Die Buttons "Formular löschen" und "Formular absenden" sollen nebeneinander dargestellt werden. Sie werden allerdings untereinander angezeigt. ich verstehe nicht warum das so ist, da ich ja jedem button die Hälfte des verfübaren Platzes zugewiesen habe (50%). Wo liegt hier mein Fehler.
3.)
Wie könnte ich die Formatierng denn eleganter lösen? Ich finde meine Lösung nicht wirklich gut... weiß aber nicht wie ich es besser machen könnte.
Hier noch der Code aus meinen Tests:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
table {
background: blue;
width: 100%;
border-spacing: 10px;
table-layout: fixed;
}
#columnOne {
width: 200px;
}
#textbox {
width: 100%;
}
#buttonDelete {
width: 50%;
}
#buttonSend {
width: 50%;
}
</style>
</head>
<body>
<table>
<tr>
<td id="columnOne">Nachname:</td>
<td>
<input type="text" name="nachname" value=""/>
</td>
</tr>
<tr>
<td>Vorname:</td>
<td>
<input type="text" name="vorname" value=""/>
</td>
</tr>
<tr>
<td>Textfeld:</td>
<td>
<textarea rows="12" name="text" id="textbox"></textarea>
</td>
</tr>
<tr>
<td>Formular:</td>
<td>
<input type="reset" value="Formular löschen" id="buttonDelete"/
<input type="submit" name="abschicken" value="Formular absenden" id="buttonSend"/>
</td>
</tr>
</table>
</body>
</html>
-
Frohes Neues!
1. Im Sinne der Semantik macht es Sinn, in der ersten Spalte statt td lieber th-Tags zu verwenden: erstens sind es Zeilenüberschriften und zweitens benötigt man dann keine zusätzliche Klasse.
Den th-Elementen kannst Du per CSS eine width von 200px geben, die Tabelle bekommt 100%. Die Textausrichtung kannst Du mit http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#text_align@title=text-align regeln. Falls Dir der Fettdruck bei den th-Tags mißfällt, nutze http://de.selfhtml.org/css/eigenschaften/schrift.htm#font_weight@title=font-weight.
2. Wenn jeder Button genau die Hälfte bekommt, reicht der Abstand zwischen ihnen, um den Umbruch zu erzwingen. Gebe jedem ein wenig weniger (bspw. 45%, um auf der sicheren Seite zu sein), dann sollte es klappen.
3. Abgesehen davon ist die Lösung nicht unelegant, rein technisch gesehen. Was Du mit der Formatierung anstellst, ist Deine Sache. Ränder, Hintergründe, Schriftarten - Du kannst alles nutzen.
Gruß, LX
--
X-Self-Code: sh:( fo:) ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: Unusual
X-Please-Search-Archive-First: Absolutely Yes