Tabelle: in der 1 Spalte 4 Zeilen, in der 2. 3 Zeilen ?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
antwort
breite farben
code
container
dank
feld
formatierung
inhalt
konzept
problem
recht ansehnlich macht
rechts ausrichten
spalte
spalten
tabelle
url
versuchen
verwenden
vier
zeile
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
hallo
neben colspan gibt es ja auch rowspan :)
1234567891011121314151617<tablewidth="500"border="0"cellspacing="2"cellpadding="2"><tralign="left"valign="middle"><tdwidth="50%">Spalte1 in Zeile 1</td><tdrowspan="2"width="50%">Spalte2 in Zeile 1 plus Zeile 2</td></tr><tralign="left"valign="middle"><tdwidth="50%">Spalte1 in Zeile 2</td></tr><tralign="left"valign="middle"><tdwidth="50%">Spalte1 in Zeile 3</td><tdwidth="50%">Spalte2 in Zeile 3</td></tr><tralign="left"valign="middle"><tdwidth="50%">Spalte1 in Zeile 4</td><tdwidth="50%">Spalte2 in Zeile 4</td></tr></table>
hier ist in Spalte 2 die Zeile 1 und Zeile 2 ein Feld
Beitrag zuletzt geändert: 30.9.2012 17:15:53 von tags -
Dazu hast du zwei Möglichkeiten:
1.
2.123456<table><tr><td>1.1</td><td>1.2</td></tr><tr><td>2.1</td><td>2.2</td></tr><tr><td>3.1</td><tdrowspan="2">3.2</td></tr><tr><td>4.1</td></tr></table>
123456<table><tr><td>1.1</td><td>1.2</td></tr><tr><td>2.1</td><td>2.2</td></tr><tr><td>3.1</td><td>3.2</td></tr><tr><td>4.1</td><td> </td></tr></table>
1. ist nur dann einigermaßen schön, wenn du keine Ränder hast und die Tabellenzellen jeweils
verwenden.vertical-align:top
2. ist auch ohne valign recht ansehnlich, macht aber ebenfalls bei eingeschalteten Rändern probleme. Dazu müsstest du dir halt ein konzept zur Formatierung per CSS überlegen.
mfg -
Und wie bekomme ich die Zeilen auf gleichmäßige Höhen ? :-)
-
biwidesign schrieb:
Kann man die drei Zeilen auch gleichmäßig aufteilen ?
mit rowspan geht das nicht, aber du kannst Tabelle in Tabelle machen
... zuerst die Tabelle mit 2 Spalten (und 1e Zeile)
und in die 1. Spalte eine Tabelle mit 4 Zeilen ... und Zeilen-Höhe z.B: 30px;
und in die 2. Spalte eine Tabelle mit 3 Zeilen ... und Zeilen-Höhe z.B: 40px;
4 x 30 = 120 .... und 3*40 = 120 .... damit ist es "gleichmäßig" verteilt.
a) Tabellen in Tabelle
123456789101112131415161718192021222324252627282930313233343536373839<tablewidth="500"border="0"cellspacing="0"cellpadding="0"><tr><tdwidth="50%"align="left"valign="top"><tablewidth="100%"border="0"cellspacing="2"cellpadding="2"><tr><tdwidth="100%"height="30"align="left"valign="top"bgcolor="#CCCCFF">Zeile 1</td></tr><tr><tdwidth="100%"height="30"align="left"valign="top"bgcolor="#CCCCFF">Zeile 2</td></tr><tr><tdwidth="100%"height="30"align="left"valign="top"bgcolor="#CCCCFF"> Zeile 3</td></tr><tr><tdwidth="100%"height="30"align="left"valign="top"bgcolor="#CCCCFF"> Zeile 4</td></tr></table></td><tdwidth="50%"align="left"valign="top"><tablewidth="100%"border="0"cellspacing="2"cellpadding="2"><tr><tdwidth="100%"height="40"align="left"valign="top"bgcolor="#FFFFCC">Zeile 1</td></tr><tr><tdwidth="100%"height="40"align="left"valign="top"bgcolor="#FFFFCC">Zeile 2</td></tr><tr><tdwidth="100%"height="40"align="left"valign="top"bgcolor="#FFFFCC">Zeile 3</td></tr></table></td></tr></table>
EDIT: ... aber besser ist es wohl, die 2 Spalten (außen) als DIV-Container zu machen
und mit CSS ... float die eine DIV links und die andere DIV rechts ausrichten
a) Tabellen in DIVs
1234567891011121314151617181920212223242526272829303132333435363738394041<divstyle="text-align:center;"><divstyle="margin:0 auto; width:500px;"><divstyle="float:left; width:250px; margin:0px; padding:0px; text-align:left;"><tablewidth="100%"border="0"cellspacing="2"cellpadding="2"><tr><tdwidth="100%"height="30"align="left"valign="top"bgcolor="#CCCCFF">Zeile 1</td></tr><tr><tdwidth="100%"height="30"align="left"valign="top"bgcolor="#CCCCFF">Zeile 2</td></tr><tr><tdwidth="100%"height="30"align="left"valign="top"bgcolor="#CCCCFF"> Zeile 3</td></tr><tr><tdwidth="100%"height="30"align="left"valign="top"bgcolor="#CCCCFF"> Zeile 4</td></tr></table></div><divstyle="float:right; width:250px; margin:0px; padding:0px; text-align:left;"><tablewidth="100%"border="0"cellspacing="2"cellpadding="2"><tr><tdwidth="100%"height="40"align="left"valign="top"bgcolor="#FFFFCC">Zeile 1</td></tr><tr><tdwidth="100%"height="40"align="left"valign="top"bgcolor="#FFFFCC">Zeile 2</td></tr><tr><tdwidth="100%"height="40"align="left"valign="top"bgcolor="#FFFFCC">Zeile 3</td></tr></table></div></div></div>
hier auch gleich mit einem umschließenden DIV, damit Du alles zentrieren kannst
Edit: .. habe dir nochmal beide Codes neu rein :)
... die Tabellen-Höhe (und Breite, Farben, etc) kannst Du natürlich (besser) auch mit CSS machen
Beitrag zuletzt geändert: 30.9.2012 18:00:18 von tags -
Alles klar, Vielen Dank
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
