HTML - Tabellen

Das Beispiel definiert 5 Spalten mit einer Gesamtbreite von 650px.

<colgroup>
  <col width="5"/>
  <col width="85"/>
  <col width="5"/>
  <col width="550"/>
  <col width="5"/>
</colgroup>

Zellen können mit colspan verbunden werden.

<tr><td colspan="2"> </td></tr>

• In einer Tabellenzeile (3 Spalten) soll die mittlere eine dynamische Länge bekommen
• Die beiden äußeren Zellen sind anders Farbig als die mittlere

Die folgene Lösung funktioniert in Firefox (3.5), jedoch nicht im IE (7) und auch nicht in MS Outlook:

<table width="100%">
<tr>
  <td style="background-color: red; width: 20px"></td>
  <td style="background-color: blue; width: 1px; white-space: nowrap; padding: 0 20px; ">Hier steht der Text</td>
  <td style="background-color: red; "></td>
</tr>
</table>

Ziel: In einer Tabelle sind Produkte gelistet. Beim Klick auf eines der Produkte wird eine zusätzliche Tabellenzeile unterhalb eingeblendet.

<script type="text/javascript">
	function einaus (id){
		var mytr = document.getElementById(id);
		mytr.style.display = (mytr.style.display=='block'?'none':'block');
	}
</script>
<style>
#tr01 {
	display: none;
	background-color:#eef6fc;
	border-left:solid 2px #a0b8d9;
	border-left-width:2px;
	border-left-color:#a0b8d9;
	margin-left:0px;
	margin-top:2px;
	padding:5px;
	font-size:85%
}
</style>
<TABLE>
  <COLGROUP>
    <COL width="50%">
    <COL width="50%">
  </COLGROUP>
<TR>
  <TH>Produkt</TH>
  <TH>Beschreibung</TH>
</TR>
<TR>
 <TD>
  <A href="javascript:einaus('tr01');" title="Unsere Lösung für Sie!">Mein Produkt</A></TD>
 <TD>Wow. Was für ein tolles Produkt!</TD>
</TR>
<TR id=tr01>
  <TD colspan="2">! Hier steht der zusätzliche Text</TD>
</TR>
</TABLE>