Tabellenspalten automatisch eine Farbe geben

Status
Nicht offen für weitere Antworten.

splatter0815

Grünschnabel
Hi, ich habe hier ein bischen gestöbert, aber nicht das gefunden was ich suche.
Ich suche keinen mousover Effekt oder so.

Ich möchte einfach ein Script das die <td> tags von alleine abwechselnd eine Farbe bekommen.
z.b #444444 und #888888

Weiß jemand wie das geht ?

Danke
 
Ganz automatisch wirst du das mit reinem HTML nicht hinbekommen. Wenn du keine serverseitigen Sprachen verwenden möchtest kannst du dir die Sache mit CSS etwas vereinfachen, musst die CSS-Klasse aber trotzdem noch manuell zuweisen.
 
Ja, aber ich hab ja bei meinem Beitrag "Script" geschrieben.
Was ich nicht dazu geschrieben hab ist, welche Art von Script.
JavaScript geht, aber lieber wäre mir ein php Script.

Ich hab vor Daten aus einer DB auszulesen, was kein Problem ist, nur möchte ich eben das er abwechselnd die zwei Farben automatisch einsetzt.

Gruß
 
Wie mein Vorredner schon bemerkt hat kannst du das mit php nicht machen da php serverseitig ist das heißt es erzeugt html code der dann fertig zum browser geschickt wird!

Die beste möglichkeit ist mit CSS

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
td {
	background-color: #0000FF;
}
td:hover{
	background-color:#CC0099;
}
-->
</style>
</head>

<body>
<table width="80%"  border="2">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

</body>
</html>

Im IE funktioniert der hovereffekt aber nicht.
 
Probier mal das.
Erklärung kann nachgeliefert werden

MfG

Code:
<?
$hintergrundfarbe_count=0;
echo "<table ><tr>";
//
// Schleifenstart die den Tabellenihnalt ausgibt
//
for ($i=1;$i<10;$i++)   { // Nur zu testzwecken
    if($hintergrundfarbe_count == 1)
      {
      $hintergrundfarbe = "#888888";
      $hintergrundfarbe_count = 0;
      }
    else
      {
      $hintergrundfarbe = "#444444";
      $hintergrundfarbe_count = 1;
      }
//Ausgabe der Zeile
echo "<td style='background-color:".$hintergrundfarbe."'>WERT</td>";
    }                     // Nur zu Testzwecken
echo "</tr></table>";
?>
 
Eine noch bessere Lösung mit Hilfe von colgroup- und col-Elementen:
HTML:
<table border="1">
	<colgroup><col style="background-color:#f00"><col style="background-color:#0f0"><col style="background-color:#00f"></colgroup>
	<tr><td>Tabellenzelle</td><td>Tabellenzelle</td><td>Tabellenzelle</td></tr>
	<tr><td>Tabellenzelle</td><td>Tabellenzelle</td><td>Tabellenzelle</td></tr>
	<tr><td>Tabellenzelle</td><td>Tabellenzelle</td><td>Tabellenzelle</td></tr>
	<tr><td>Tabellenzelle</td><td>Tabellenzelle</td><td>Tabellenzelle</td></tr>
</table>
 
Hallo nochmal.

Also ich hab es jetzt so hinbekommen wie ich wollte.

HTML:
<?php
include("xxxxxxxxxx");
require("xxxxxxxxxx");

// Hier die Funktion 

function rowcolor($zeile) {
  if (($zeile/2)==floor($zeile/2)) {
	$retval="bgcolor=\"#888888\"";
    } else {
 	$retval="bgcolor=\"#555555\"";
    };
	return $retval;
};
?>

<?php

$db = mysql_connect($host, $user, $pwd);
   $res = mysql_db_query("xxxxxxx", "select * from xxxxxxxxx");
   $num = mysql_num_rows($res);


   echo "<table align=center border=0 cellpadding=0 cellspacing=0>";


   echo "<tr> <td>xxx</td> <td>xxx</td>";
   echo "<td>xxx</td> <td>xxx</td>";

   for ($i=0; $i<$num; $i++)
   {
      $nn = mysql_result($res, $i, "xxx");
      $vn = mysql_result($res, $i, "xxx");
      $pn = mysql_result($res, $i, "xxx");
      $ge = mysql_result($res, $i, "xxx");
      $lf = $i + 1;

// Hier bei jeder Schleife die Farbänderung

  $data=mysql_fetch_array($res); 
  echo "<tr ".rowcolor($i).">";



      echo "<td>$nn</td> <td>$vn</td>";
      echo "<td>$pn</td> <td>$ge</td></tr>";
   }


   echo "</table>";

   mysql_close($db);
?>
</body>
</html>

Somit wechselt er jede table row die farbe.
Sieht gut aus.

Bis dann.
 
Status
Nicht offen für weitere Antworten.
Zurück