Tabelle gestalten in CSS

D

DaHmM

Grünschnabel
Hallo,

Ich habe eine Tabelle in CSS gestaltet blos leider weiß ich nicht ob ich fusch betrieben habe oder ob ich fachmänische Arbeit geleistet habe, mit dem aussehen der Tabelle bin ich zufrieden. Ich wollte euch fragen ob Ihr vielleicht noch Verbesserungsvorschläge habt oder ob ich was falsch gemacht habe.

Tabelle:
Code: 
<table class="produkttabelle">
  <tr>
    <td class="tabellenkopf">Auf einen Blick:</td>
    <td class="tabellenkopf">&nbsp;</td>
  </tr>
  <tr>
    <th scope="row" class="bold"> Bl&uuml;tengr&ouml;sse:</th>
    <td> 4-6 cm, in B&uuml;scheln </td>
  </tr>
  <tr>
    <th scope="row" class="bold"> Bl&uuml;tenfarbe:</th>
    <td> rosa </td>
  </tr>
  <tr>
    <th scope="row" class="bold"> Bl&uuml;tenform:</th>
    <td> halbgef&uuml;llt </td>
  </tr>
  <tr>
    <th scope="row" class="bold"> Bl&uuml;tezeit:</th>
    <td> Maibis Oktober </td>
  </tr>
  <tr>
    <th scope="row" class="bold"> Knospe:</th>
    <td> kegelf&ouml;rmig </td>
  </tr>
  <tr>
    <th scope="row" class="bold"> Duft:</th>
    <td> mittel </td>
  </tr>
  <tr>
    <th scope="row" class="bold"> Bl&uuml;hdauer:</th>
    <td>&ouml;fterbl&uuml;hend </td>
  </tr>
  <tr>
    <th scope="row" class="bold"> Bl&uuml;hfreude:</th>
    <td> reichbl&uuml;hend </td>
  </tr>
  <tr>
    <th scope="row" class="bold"> Gesundheit:</th>
    <td> robust </td>
  </tr>
  <tr>
    <th scope="row" class="bold"> Winterh&auml;rte:</th>
    <td> winterhart </td>
  </tr>
  <tr>
    <th scope="row" class="bold"> Verwendung:</th>
    <td> Fl&auml;chenbepflanzung, Beete, Gruppen, Pflanzgef&auml;&szlig;e </td>
  </tr>
  <tr>
    <th scope="row" class="bold"> Wuchs:</th>
    <td> kompakt, breitbuschig, dicht </td>
  </tr>
  <tr>
    <th scope="row" class="bold"> Wuchsbreite:</th>
    <td> 40-60 cm </td>
  </tr>
  <tr>
    <th scope="row" class="bold"> Wuchsh&ouml;he:</th>
    <td> 50-60 cm </td>
  </tr>
  <tr>
    <th scope="row" class="bold"> Laub:</th>
    <td> mittelgro&szlig;, dunkelgr&uuml;n, gl&auml;nzend </td>
  </tr>
  <tr>
    <th scope="row" class="bold"> Kategorie:</th>
    <td> Moderne Rose </td>
  </tr>
  <tr>
    <th scope="row" class="bold">Gattung:</th>
    <td> Towne &amp; Country &reg; </td>
  </tr>
  <tr>
    <th scope="row" class="bold">Z&uuml;chter:</th>
    <td> Poulsen </td>
  </tr>
  <tr>
    <th scope="row" class="bold">Jahrgang:</th>
    <td> 1999 </td>
  </tr>
  <tr>
    <th scope="row" class="bold">Wuchsgeschwindigkeit:</th>
    <td>10-20 cm/Jahr</td>
  </tr>
  <tr>
    <th scope="row" class="bold">test</th>
    <td>test</td>
  </tr>
</table>

CSS Style
Code: 
@charset "utf-8";


.produkttabelle {
	border:none;
	border-collapse:collapse;
	color:#000;
	width:100%;
	table-layout:fixed;
	font-size:14px;
	
}

.tabellenkopf {
	background:#9fc340;
	font-weight:bold;
	color:#FFF;
	width:150px;
	font-size:16px;
	
}
.bold {
	text-align:left;
}

Im Anhang findet ihr auch noch eine Zip datei mit beiden Dateien.

Ich freue mich wenn Ihr da einmal rüber schauen könnt :)

Danke schonmal im Vorraus.
 

Anhänge

Moin,

Fusch am Bau kann ich nicht erkennen:-)

Da du das scope-Attribut verwendest, welches ja vornehmlich eine Information für Sprachausgabegeräte liefert, solltest du der Tabelle auch noch eine Zusammenfassung spendieren(summary)

Ich für meinen Geschmack würde auf die Klassen verzichten, eine einzige für <table> sollte ausreichen...den Rest bekommt man auch über eine Tabellendefinition mit <thead> und <tbody> hin.

Hier mal nen Beispiel, wie ich es meine:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--

.produkttabelle {
	border:none;
	border-collapse:collapse;
	color:#000;
	width:100%;
	table-layout:fixed;
	font-size:14px;
}
.produkttabelle th{
  text-align:left;
  font-weight:bold;
}
.produkttabelle thead{
  background:#9fc340;
	color:#FFF;
	font-size:16px;
}


-->
</style>
</head>
<body>
<table class="produkttabelle" summary="Details zur Blume">
  <thead>
    <tr>
      <th colspan="2">Auf einen Blick:</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row"> Bl&uuml;tengr&ouml;sse:</th>
      <td> 4-6 cm, in B&uuml;scheln </td>
    </tr>
    <tr>
      <th scope="row"> Bl&uuml;tenfarbe:</th>
      <td> rosa </td>
    </tr>
    <tr>
      <th scope="row"> Bl&uuml;tenform:</th>
      <td> halbgef&uuml;llt </td>
    </tr>
  </tbody>
</table>
</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück