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 :)
<table width="500" border="0" cellspacing="2" cellpadding="2"> <tr align="left" valign="middle"> <td width="50%">Spalte1 in Zeile 1</td> <td rowspan="2" width="50%">Spalte2 in Zeile 1 plus Zeile 2</td> </tr> <tr align="left" valign="middle"> <td width="50%">Spalte1 in Zeile 2</td> </tr> <tr align="left" valign="middle"> <td width="50%">Spalte1 in Zeile 3</td> <td width="50%">Spalte2 in Zeile 3</td> </tr> <tr align="left" valign="middle"> <td width="50%">Spalte1 in Zeile 4</td> <td width="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.
<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 rowspan="2">3.2</td></tr> <tr><td>4.1</td></tr> </table>
2.
<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
<table width="500" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="50%" align="left" valign="top"> <table width="100%" border="0" cellspacing="2" cellpadding="2"> <tr> <td width="100%" height="30" align="left" valign="top" bgcolor="#CCCCFF">Zeile 1</td> </tr> <tr> <td width="100%" height="30" align="left" valign="top" bgcolor="#CCCCFF">Zeile 2</td> </tr> <tr> <td width="100%" height="30" align="left" valign="top" bgcolor="#CCCCFF"> Zeile 3</td> </tr> <tr> <td width="100%" height="30" align="left" valign="top" bgcolor="#CCCCFF"> Zeile 4</td> </tr> </table> </td> <td width="50%" align="left" valign="top"> <table width="100%" border="0" cellspacing="2" cellpadding="2"> <tr> <td width="100%" height="40" align="left" valign="top" bgcolor="#FFFFCC">Zeile 1</td> </tr> <tr> <td width="100%" height="40" align="left" valign="top" bgcolor="#FFFFCC">Zeile 2</td> </tr> <tr> <td width="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
<div style="text-align:center;"> <div style="margin:0 auto; width:500px;"> <div style="float:left; width:250px; margin:0px; padding:0px; text-align:left;"> <table width="100%" border="0" cellspacing="2" cellpadding="2"> <tr> <td width="100%" height="30" align="left" valign="top" bgcolor="#CCCCFF">Zeile 1</td> </tr> <tr> <td width="100%" height="30" align="left" valign="top" bgcolor="#CCCCFF">Zeile 2</td> </tr> <tr> <td width="100%" height="30" align="left" valign="top" bgcolor="#CCCCFF"> Zeile 3</td> </tr> <tr> <td width="100%" height="30" align="left" valign="top" bgcolor="#CCCCFF"> Zeile 4</td> </tr> </table> </div> <div style="float:right; width:250px; margin:0px; padding:0px; text-align:left;"> <table width="100%" border="0" cellspacing="2" cellpadding="2"> <tr> <td width="100%" height="40" align="left" valign="top" bgcolor="#FFFFCC">Zeile 1</td> </tr> <tr> <td width="100%" height="40" align="left" valign="top" bgcolor="#FFFFCC">Zeile 2</td> </tr> <tr> <td width="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
