Spalte in Tabelle spalten

[Tobi]

Hallo,

wie teile ich bei der folgenden Tabellenkonstruktion die rote Spalte in 2 gleichgroße Spalten? Ich habs selbst versucht, aber geklappt hat es leider wieder nicht.

<table border="0" width="100%" align="center">  
  
<tr>  
 <td style="width:20%; height:99px; border:0; background-color:#CCCCCC; border:0"></td>  
 <td style="widht:60%; height:99px; background-color:#000000; border:0"></td>  
 <td style="width:20%; height:99px; border:0; background-color:#CCCCCC; border:0"></td>  
</tr>  
  
<tr>  
 <td style="width:20%; height:26px; background-color:#CCCCCC; border:0"></td>  
 <td style="width:60%; height:26px; background-color:red; border:0"></td>  
 <td style="width:20%; height:26px; background-color:#CCCCCC; border:0"></td>  
</tr>  
  
<tr>  
 <td style="width:20%; height:600px; background-color:#CCCCCC; border:0"></td>  
 <td style="width:60%; height:600px">  
  <iframe src="iframe.htm" name="iframe" scrolling="no" frameborder="0" height="600" width="100%"></iframe></td>  
 <td style="width:20%; height:600px; border:0; background-color:#CCCCCC"></td>  
</tr>  
  
<tr>  
 <td style="width:20%; height:26px; background-color:#CCCCCC"></td>  
 <td style="width:60%; height:26px; background-color:#000000"></td>  
 <td style="width:20%; height:26px; background-color:#CCCCCC"></td>  
</tr>  
  
</table>

Danke euch!

[Silvio]

Hallo Tobi!

Das Zauberwort heißt hier 'colspan'. Mit diesem verbindest du zwei Zellen miteinander. Wenn du also deine Zelle teilen möchtest, geht das über den Umweg die Zellen doppelt anzulegen und sie da, wo du nur eine Zelle benötigst, mit colspan zu verbinden.

Dein Code könnte dann z.B. so aussehen:

  
<table border="0" width="100%" align="center">  
  
<tr>  
 <td style="width:20%; height:99px; border:0; background-color:#CCCCCC; border:0"></td>  
 <td colspan="2" style="width:60%; height:99px; background-color:#000000; border:0"></td>  
 <td style="width:20%; height:99px; border:0; background-color:#CCCCCC; border:0"></td>  
</tr>  
  
<tr>  
 <td style="width:20%; height:26px; background-color:#CCCCCC; border:0"></td>  
 <td style="width:30%; height:26px; background-color:red; border:0"></td>  
 <td style="width:30%; height:26px; background-color:red; border:0"></td>  
 <td style="width:20%; height:26px; background-color:#CCCCCC; border:0"></td>  
</tr>  
  
<tr>  
 <td style="width:20%; height:600px; background-color:#CCCCCC; border:0"></td>  
 <td colspan="2" style="width:60%; height:600px">  
  <iframe src="iframe.htm" name="iframe" scrolling="no" frameborder="0" height="600" width="100%"></iframe></td>  
 <td style="width:20%; height:600px; border:0; background-color:#CCCCCC"></td>  
</tr>  
  
<tr>  
 <td style="width:20%; height:26px; background-color:#CCCCCC"></td>  
 <td colspan="2" style="width:60%; height:26px; background-color:#000000"></td>  
 <td style="width:20%; height:26px; background-color:#CCCCCC"></td>  
</tr>  
  
</table>  

Außerdem hattest du bei einem 'width' einen Buchstabendreher drin und hast 'witdh' geschrieben. Aber das passiert glaub jedem mal. *g* ;)

Viel Erfolg und viel Spaß noch! :)

[bleicher]

Grüße,
1)CSS auslagern
2)tr darf nciht innerhlab von td definiert werden also
3.1)schieb 2 divs rein
3.2)verwende <http://de.selfhtml.org/html/tabellen/zellen_verbinden.htm@title=rowspan oder colspan> auf 2 zeilen/spalten
MFG
bleicher

[Gunnar Bittersmann]

@@Tobi:

nuqneH

wie teile ich bei der folgenden Tabellenkonstruktion

Vermutlich eine Fehlkonstruktion. Einreißen, neubauen.

Tabellen sind für tabellarische Daten gut, nicht aber fürs Seitenlayout. Dafür gibt es http://de.selfhtml.org/css/index.htm@title=CSS.

Im HTML verwendest du semantisches Markup, d.h. die Elemente, die den Inhalt http://de.selfhtml.org/html/text/index.htm@title=sinnvoll auszeichnen.

Was soll oben in dem schwarzen Breich stehen? Eine Überschrift? 'h1'

Was soll in dem roten Bereich stehen? Eine Liste mit zwei Listitems? 'ul'/'li'

Dann der Iframe. (Dessen Probleme* sind dir bekannt?)

Und was soll unten in dem schwarzen Breich stehen? Etwas Text? 'p'

Das HTML sieht also in etwa so aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
	<head>  
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
		<title>TEST</title>  
		<link rel="stylesheet" type="text/css" href="myStyle.css"/>  
	</head>  
	<body>  
		<h1>oben</h1>  
		<ul>  
			<li>links</li>  
			<li>rechts</li>  
		</ul>  
		<iframe src="http://example.net"></iframe>  
		<p>unten</p>  
	</body>  
</html>

myStyle.css:

html  
{  
	background: #CCC;  
	height: 100%;  
	margin: 0;  
	padding: 0;  
}  
  
body  
{  
	background: #000;  
	color: white;  
	margin: auto;  
	min-height: 100%;  
	width: 60%;  
}  
  
h1  
{  
	height: 99px;  
	margin: 0;  
}  
  
ul  
{  
	background: red;  
	height: 26px;  
	list-style: none;  
	margin: 0;  
	padding: 0;  
}	  
  
li  
{  
	float: left;  
	width: 50%;  
}	  
  
iframe  
{  
	background: white;  
	border: 0 none;  
	height: 600px;  
	width: 100%;  
}

Die Höhenangaben in Pixel nicht nicht wirklich sinnvoll, da die beim Nutzer verwendete Schriftgröße unbekannt ist.

Qapla'

* Salvatorische Klausel: Einige Aspekte des Artikel sind mittlerweile etwas veraltet. Das mindert nicht die Gültigkeit der anderen, immer noch aktuellen Punkte.