kostenloser Webspace werbefrei: lima-city


Tabelle: in der 1 Spalte 4 Zeilen, in der 2. 3 Zeilen ?

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    biwidesign

    biwidesign hat kostenlosen Webspace.

    Ich versuche eine Tabelle die in der erste Spalte 4 Zeilen und in der zweiten 3 Zeilen hat umzusetzen.
    Mit row und colspan funktioniert es nicht denn man kann ja drei Zeilen nicht auf vier aufteilen wie bei 2 und 1 ?

    Danke im Voraus :-)
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. 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
  4. Autor dieses Themas

    biwidesign

    biwidesign hat kostenlosen Webspace.

    Danke für die Antwort
    Kann man die drei Zeilen auch gleichmäßig aufteilen ?
  5. 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>&nbsp;</td></tr>
    </table>


    1. ist nur dann einigermaßen schön, wenn du keine Ränder hast und die Tabellenzellen jeweils
    vertical-align:top
    verwenden.

    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
  6. Autor dieses Themas

    biwidesign

    biwidesign hat kostenlosen Webspace.

    Und wie bekomme ich die Zeilen auf gleichmäßige Höhen ? :-)
  7. biwidesign schrieb:
    Und wie bekomme ich die Zeilen auf gleichmäßige Höhen?
    Indem du entweder in jede Zeile gleich viel Inhalt packst, oder du die Zeilen per CSS formatierst.

    mfg
  8. 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
  9. Autor dieses Themas

    biwidesign

    biwidesign hat kostenlosen Webspace.

    Alles klar, Vielen Dank ;-)
  10. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!