• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Tabellenzeilen unterschiedliche Hintergründe geben

marjac99

marjac99

New member
Hallo zusammen,

Ich bin für dabei, für unser Forum eine Tabelle zu erstellen. Die Vorarbeiten wurden von jemand anderem gemacht, der die Tabelle in Excel geschrieben und dann in HTML konvertiert hat.
Ich möchte nun den Zeilen immer abwechselnd zwei verschiedene Hintergründe zuweisen, ohne diese jedesmal in der TR zu definieren (Die Tabelle hat bisher gut 200 Einträge, Tendenz steigend)
Ich weiss nicht, ob das mit css oder Javascript zu realisieren ist.
Wer kann mir helfen?

So sieht es bisher aus:

Code: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="de">
<head>
<title>Dokumenttitel</title>
<style type="text/css">
/*<![CDATA[*/
/*Hier die Style-Anweisungen*/   
/*]]>*/
</style>
</head>
<body>
<!--Hier der Quelltext-->
<TABLE CELLSPACING=0 cellpadding="3" COLS=3 Bordercolor="red" frame=box  background="http://www.auriana-rpg.de/templates/Auriana/images/gen_background2.jpg" >
	<COLGROUP><COL WIDTH=300><COL WIDTH=600><COL WIDTH=60></COLGROUP>
	<TBODY>
                <TR background="/images/cellpic3.gif" >
                        <TH WIDTH=200  VALIGN=MIDDLE><font color=#ffffff>Name</font></TH>
                        <TH WIDTH=250  VALIGN=MIDDLE><font color=#ffffff>Beruf / Stellung</font></TH>
                        <TH WIDTH=80  VALIGN=MIDDLE><font color=#ffffff> NPC-Farbe</font></TH>
                </TR>
		<TR>
			<TD ALIGN=JUSTIFY VALIGN=TOP>Abi-Amir al-Mansur</TD>
			<TD ALIGN=JUSTIFY VALIGN=TOP>Maure, 1. Maat auf der Nutshell von Jack Sparrow</p></TD>
			<TD ALIGN=JUSTIFY VALIGN=TOP>darkred</TD>
		</TR>
		<TR background="/images/gen_background.jpg">
			<TD  ALIGN=JUSTIFY VALIGN=TOP><FONT COLOR="#FFE081">Abt</FONT></TD>
			<TD ALIGN=JUSTIFY VALIGN=TOP><FONT COLOR="#FFE081">der Abt des Klosters</FONT></TD>
			<TD ALIGN=JUSTIFY VALIGN=TOP><FONT COLOR="#FFE081"><BR></FONT></TD>
		</TR>
		<TR>
			<TD  ALIGN=JUSTIFY VALIGN=TOP><FONT COLOR="#FFE081">Akaz</FONT></TD>
			<TD ALIGN=JUSTIFY VALIGN=TOP><FONT COLOR="#FFE081">Hexer</FONT></TD>
			<TD ALIGN=JUSTIFY VALIGN=TOP><FONT COLOR="#FFE081"><BR></FONT></TD>
		</TR>
		<TR background="/images/gen_background.jpg">
			<TD  ALIGN=JUSTIFY VALIGN=TOP>Alois</TD>
			<TD ALIGN=JUSTIFY VALIGN=TOP>der alte, Bewohner von Dunkelheim</TD>
			<TD ALIGN=JUSTIFY VALIGN=TOP><BR></TD>
		</TR>
</TBODY>
</TABLE>
</body>
</html>
 
per CSS müsstest Du die <tr mit einer Klasse zu versehen, über welche dann die Farbe definiert wird.
Code: 
<style>
table	{ border: 1px solid #000;}
tr.row1	{background: #f3f3f3; }
tr.row2    {background: #AFAFAF; }
td	{  padding: 5px; }
</style>

<table width="400" cellpadding="0" cellspacing="0" border="0">
<tr class="row1">
<td>Inhalt row1</td>
</tr>
<tr>
<tr class="row2">
<td>Inhalt row2</td>
</tr>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben