DIV-Tabelle statt TABLE-Tabelle

McSteel · 01.07.2009

Hallo,

ich versuche eine Table-Tabelle in DIV-Tabelle umzuwandeln.
Bei meinen Recherchen im www komme ich nicht mehr weiter.

Ich versuche ein Zeilenumbruch in DIV-Tabelle zu ermöglichen, wie man es mit <tr> in eine normalen TABLE-Tabelle macht. Mein versuch war es mit einem und zwei <br/> ein Zeilenumbruch zu ermöglichen. Leider gelingt es mir nicht so schön. Mit einem <br/> bricht der Text nicht um sondern wird nur nach unten verschoben, mit Zweien wird die Zeile gebrochen, ab der Abstand ist zu groß.

1. Wie vermeide ich den großen Abstand? Woran liegt es?

DIV-Tabelle

HTML:

<style>
div#black, div#maroon, div#gray, div#red{
padding: 4px;
border: 1px solid #999999;
width: 100px;
float:left;
color:#FFFFFF;
}
div#rgb{
margin:auto;
float:clear;
}
div#black{
background-color: #000000;
}
div#gray{
background-color: #808080;
}
div#maroon{
background-color: #800000;
}
div#red{
background-color: #FF0000;
}

</style>

<div style="float:clear;" id="rgb">
  <div style="float:left;" id="black">
  black
  </div>
  <div style="float:left;" id="black">
  #000000
  </div>
  <div style="float:left;" id="gray">
  gray
  </div>
  <div style="float:left;" id="gray">
  #808080
  </div>
</div>
<br/><br/>
<div>
  <div style="float:left;" id="maroon">
  maroon
  </div>
  <div style="float:left;" id="maroon">
  #800000
  </div>
  <div style="float:left;" id="red">
  red
  </div>
  <div style="float:left;" id="red">
  #FF0000
  </div>
</div>

TABLE-Tabelle:

HTML:

<table align="center" bgcolor="#999999" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td>
<table border="0" cellpadding="7" cellspacing="1">

<tbody><tr>
<td bgcolor="black" width="100"><font color="white">black</font></td>
<td bgcolor="#000000" width="100"><font color="white">#000000</font></td>
<td bgcolor="gray" width="100"><font color="white">gray</font></td>
<td bgcolor="#808080" width="100"><font color="white">#808080</font></td>
</tr><tr>
<td bgcolor="maroon"><font color="white">maroon</font></td>
<td bgcolor="#800000"><font color="white">#800000</font></td>
<td bgcolor="red"><font color="white">red</font></td>
<td bgcolor="#ff0000"><font color="white">#FF0000</font></td>

</tr><tr>
<td bgcolor="green"><font color="white">green</font></td>
<td bgcolor="#008000"><font color="white">#008000</font></td>
<td bgcolor="lime">lime</td>
<td bgcolor="#00ff00">#00FF00</td>
</tr><tr>
<td bgcolor="olive"><font color="white">olive</font></td>
<td bgcolor="#808000"><font color="white">#808000</font></td>
<td bgcolor="yellow">yellow</td>
<td bgcolor="#ffff00">#FFFF00</td>

</tr><tr>
<td bgcolor="navy"><font color="white">navy</font></td>
<td bgcolor="#000080"><font color="white">#000080</font></td>
<td bgcolor="blue"><font color="white">blue</font></td>
<td bgcolor="#0000ff"><font color="white">#0000FF</font></td>
</tr><tr>
<td bgcolor="purple"><font color="white">purple</font></td>
<td bgcolor="#800080"><font color="white">#800080</font></td>
<td bgcolor="fuchsia">fuchsia</td>
<td bgcolor="#ff00ff">#FF00FF</td>

</tr><tr>
<td bgcolor="teal"><font color="white">teal</font></td>
<td bgcolor="#008080"><font color="white">#008080</font></td>
<td bgcolor="aqua">aqua</td>
<td bgcolor="#00ffff">#00FFFF</td>
</tr><tr>
<td bgcolor="silver"><font color="white">silver</font></td>
<td bgcolor="#c0c0c0"><font color="white">#C0C0C0</font></td>
<td bgcolor="white">white</td>
<td bgcolor="#ffffff">#FFFFFF</td>

</tr>
</tbody></table>
</td></tr></tbody></table>

2. Gibt es ein Tool welches Table-Tabellen in Div-Tabellen umwandelt?

LG McSteel

Lösung für mein Problem gefunden:
display:table-row;

Hier habe ich die Idee her:

HTML:

<style>
div#black, div#maroon, div#gray, div#red, div#green, div#lime{
padding: 4px;
border: 1px solid #999999;
width: 100px;
float:left;
color:#FFFFFF;
}
div#rgb{
display:table-row;
margin:auto;
float:clear;
}
div#black{
background-color: #000000;
}
div#gray{
background-color: #808080;
}
div#maroon{
background-color: #800000;
}
div#red{
background-color: #FF0000;
}
div#green{
background-color: #008000;
}
div#lime{
background-color: #00FF00;
}
</style>


<div id="rgb">
  <div id="black">
  black
  </div>
  <div id="black">
  #000000
  </div>
  <div id="gray">
  gray
  </div>
  <div id="gray">
  #808080
  </div>
</div>

<div id="rgb">
  <div id="maroon">
  maroon
  </div>
  <div id="maroon">
  #800000
  </div>
  <div id="red">
  red
  </div>
  <div id="red" >
  #FF0000
  </div>
</div>
<div id="rgb">
  <div id="green">
  green
  </div>
  <div id="green">
  #008000
  </div>
  <div id="lime">
  lime
  </div>
  <div id="lime" >
  #00FF00
  </div>
</div>

speedcu · 02.07.2009

AW: DIV-Tabelle statt TABLE-Tabelle

erstens eine frage: wieso willst du eine table-tabelle in eine div-tabelle umwandeln???
das arbeiten mit DIVs ist zwar zweifelsohne vorzuziehen, wenn aber eine tabelle mehr sinn macht (und das is bei tabellarischen darstellungen nun einmal der fall) dann ist eine table-tabelle vorzuziehen!

wenn du auf die div-tabelle bestehst, und dir der abstand mit doppel<br> zu groß is, dann würd mir no einfallen ein div statt den zwei <br> hinzumachen und dem die höhe zu verpassen die du gern hättest, aber das is irgendwie pfuscherhaft

lg