✔ Tabelle

Status
Nicht offen für weitere Antworten.
R

Roman Locher

Mitglied
Hi,

mich würde interessieren, ob bei CSS Layouts Tabellen mit <table> ganz tabu sind. Gibt es mit CSS eine gute Alternative eine Tabelle zu gestalten? Also ich meine nicht den Missbrauch des <table> Tags für das Layout, sondern "echte" Tabellen mit vielen Spalten und Zeile, z.B. um eine Mitglieder- oder Veranstaltungsliste darzustellen.
 
Wenn die Mitglieder- und Veranstaltungsliste tabellarisch (spalten- u. zeilenweise) aufgebaut / gegliedert ist, spricht nichts gegen den Einsatz des table-Elements.
 
In diesem Fall kann auf eine Tabelle verzichtet werden.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
div.wrapper {
width: 400px;
border-left: 1px solid #cfcfcf;
}

span {
display: block;
float: left;
padding: 20px 40px 10px 40px;
text-align: center;
}

a {
font-size: 11px;
display: block;
margin-top: 10px;
}

div.clear {
clear: left;
}
-->
</style>

</head>
<body>

<div class="wrapper">
     <h2>Unser Team</h2>
               <span><img src="img/latt.jpg"><a href="#">Wolfgang Latt</a></span>
               <span><img src="img/berardic.jpg"><a href="#">Marijan J. Bernardic</a></span>
               <span><img src="img/hallmann.jpg"><a href="#">Bernd Hallmann</a></span>
               <span><img src="img/voggel.jpg"><a href="#">Ulrike Voggel</a></span>
               <span><img src="img/lenz.jpg"><a href="#">Alexander Lenz</a></span>
               <span><img src="img/schwarzenbart.jpg"><a href="#">Donald Schwarzenbart</a></span>
               <span><img src="img/brandl_engesser.jpg"><a href="#">Olga Brandl-Engesser</a></span>

               <div class="clear">&nbsp;</div>
</div>

</body>
</html>

Dieses Beispiel war einfacher, schneller gestrickt und "speckt" den HTML-Quelltext gegenüber der Tabellenvariante deutlich ab:


HTML: 
<table width="560" border="0" cellspacing="0" cellpadding="10">
        <tr>
          <td width="400" valign="top"> 
            <h1>Unser Team</h1>
		    <table width="100%" border="0" cellspacing="0" cellpadding="5">
              <tr align="center"> 
                <td><a href="latt.html"><img src="img/latt.jpg" width="110" height="150" border="0"></a></td>
                <td><a href="bernardic.html"><img src="img/berardic.jpg" width="110" height="150" border="0"></a></td>
              </tr>
              <tr align="center"> 
                <td><a href="latt.html">Wolfgang Latt</a></td>
                <td><a href="bernardic.html">Marijan J. Bernardic</a></td>
              </tr>
              <tr align="center"> 
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
              <tr align="center"> 
                <td><a href="hallmann.html"><img src="img/hallmann.jpg" width="110" height="150" border="0"></a></td>
                <td><a href="voggel.html" target="_self"><img src="img/voggel.jpg" width="110" height="150" border="0"></a></td>
              </tr>
              <tr align="center"> 
                <td><a href="hallmann.html">Bernd Hallmann</a></td>
                <td><a href="voggel.html" target="_self">Ulrike 
                  Voggel</a></td>
              </tr>
              <tr align="center"> 
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
              <tr align="center"> 
                <td><a href="lenz.html"><img src="img/lenz.jpg" width="110" height="150" border="0"></a></td>
                <td><a href="schwarzenbart.html"><img src="img/schwarzenbart.jpg" width="110" height="150" border="0"></a></td>
              </tr>
              <tr align="center"> 
                <td><a href="lenz.html">Alexander Lenz</a></td>
                <td><a href="schwarzenbart.html">Donald Schwarzenbart</a></td>
              </tr>
              <tr align="center"> 
                <td>&nbsp;</td>
                <td rowspan="3">&nbsp;</td>
              </tr>
              <tr align="center"> 
                <td><a href="brandl_engesser.html"><img src="img/brandl_engesser.jpg" width="110" height="150" border="0"></a></td>
              </tr>
              <tr align="center"> 
                <td><a href="brandl_engesser.html">Olga Brandl-Engesser</a></td>
              </tr>
            </table>
		  	</td>
          <td width="160">&nbsp;</td>
  </tr>
</table>
 
Dass du CSS zu Formatierung einsetzen möchtest, heißt nicht automatisch, dass Tabellen damit vollkommen obsolet sind. Es kommt immer auf den Einsatz an.
In deinem Beispiel sind Tabellen gar nicht nötig. Du könntest die einzelnen Profile auch in div-Elementen auszeichnen und anschließend etwa mit der float-Eigenschaft formatieren.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück