locomputing
Farbige Divs
Farbige Tabellen 1
TD 1 TD 2 TD 3
TD 4 TD 5 TD 6
TD 7 TD 8 TD 9
TD 10 TD 11 TD 12
html:

<table>
<tr>
<td>TD 1</td>
<td>TD 2</td>
<td>TD 3</td>
</tr>
<tr>
<td>TD 4</td>
<td>TD 5</td>
<td>TD 6</td>
</tr>
<tr>
<td>TD 7</td>
<td>TD 8</td>
<td>TD 9</td>
</tr>
<tr>
<td>TD 10</td>
<td>TD 11</td>
<td>TD 12</td>
</tr>
</table>
css:

table {
width: 100%;
}

tr:nth-of-type(odd) {
background: Gainsboro;
}

tr:nth-of-type(even) {
background: silver;
}
Farbige Tabellen 2
TD 1TD 2TD 3
TD 4TD 5TD 6
TD 7TD 8TD 9
TD 10TD 11TD 12
html:

<table>
<tr>
<td class="one">TD 1</td>
<td class="two">TD 2</td>
<td class="one">TD 3</td>
</tr>
<tr>
<td class="two">TD 4</td>
<td class="one">TD 5</td>
<td class="two">TD 6</td>
</tr>
<tr>
<td class="one">TD 7</td>
<td class="two">TD 8</td>
<td class="one">TD 9</td>
</tr>
<tr>
<td class="two">TD 10</td>
<td class="one">TD 11</td>
<td class="two">TD 12</td>
</tr>
</table>
css:

table {
width: 100%;
}

td.one {
background: Gainsboro;
}

td.two {
background: silver;
}
Farbige Div's 1
DIV 1
DIV 2
DIV 3
DIV 4
DIV 5
DIV 6
DIV 7
DIV 8
DIV 9
DIV 10
DIV 11
DIV 12
html:

<div class="tabs one">
<div>DIV 1</div>
<div>DIV 2</div>
<div>DIV 3</div>
</div>
<div class="tabs two">
<div>DIV 4</div>
<div>DIV 5</div>
<div>DIV 6</div>
</div>
<div class="tabs one">
<div>DIV 7</div>
<div>DIV 8</div>
<div>DIV 9</div>
</div>
<div class="tabs two">
<div>DIV 10</div>
<div>DIV 11</div>
<div>DIV 12</div>
</div>
css:

.tabs {
display:flex;
}

.tabs div{
flex:1;
}

.tabs.one > div {
background: Gainsboro;
}

.tabs.two > div {
background: silver;
}
Farbige Div's 2
DIV 1
DIV 2
DIV 3
DIV 4
DIV 5
DIV 6
DIV 7
DIV 8
DIV 9
DIV 10
DIV 11
DIV 12
html:

<div id="tabs">
<div>DIV 1</div>
<div>DIV 2</div>
<div>DIV 3</div>
<div>DIV 4</div>
<div>DIV 5</div>
<div>DIV 6</div>
<div>DIV 7</div>
<div>DIV 8</div>
<div>DIV 9</div>
<div>DIV 10</div>
<div>DIV 11</div>
<div>DIV 12</div>
</div>
css:

#tabs {
display:flex;
align-items: stretch;
flex-flow: row wrap;
}

#tabs div{
width:33.3%;
}

#tabs > div:nth-of-type(odd) {
background: Gainsboro;
}

#tabs > div:nth-of-type(even) {
background: silver;
}
Farbige Div's mit php 1
DIV 1
DIV 2
DIV 3
DIV 4
DIV 5
DIV 6
DIV 7
DIV 8
DIV 9
DIV 10
DIV 11
DIV 12
DIV 13
DIV 14
DIV 19
DIV 16
DIV 17
DIV 18
DIV 19
DIV 20
DIV 21

<?php
$divCona = array ( " bg1 " , " bg2 " ) ;
$stmt = $pdo -> prepare ( " select spalte1 , spalte2 , spalte3 from tabelle " ) ;
$stmt -> execute ( ) ;
$ia = count ( $divCona ) ;
echo ' <div id = " tabs "> ' ;
while ( $line = $stmt -> fetch ( ) ) {
echo ' <div class = " ' . $divCona [ $ia % count ( $divCona ) ] . ' "> ' . $line [ ' spalte1 ' ] . ' </div> ' ;
echo ' <div class = " ' . $divCona [ $ia % count ( $divCona ) ] . ' "> ' . $line [ ' spalte2 ' ] . ' </div> ' ;
echo ' <div class = " ' . $divCona [ $ia % count ( $divCona ) ] . ' "> ' . $line [ ' spalte3 ' ] . ' </div> ' ;
$ia + + ;
}
echo ' </div> ' ;
?>
css:

.bg1 {
background: Gainsboro;
}

.bg2 {
background: silver;
}

#tabs {
display:flex;
align-items: stretch;
flex-flow: row wrap;
}

#tabs div {
width: 33.3%;
}
Farbige Div's mit php 2
DIV 1
DIV 2
DIV 3
DIV 4
DIV 5
DIV 6
DIV 7
DIV 8
DIV 9
DIV 10
DIV 11
DIV 12
DIV 13
DIV 14
DIV 19
DIV 16
DIV 17
DIV 18
DIV 19
DIV 20
DIV 21

<?php
$divCona = array ( " bg1 " , " bg2 " ) ;
$divConb = array ( " bg2 " , " bg1 " ) ;
$divConc = array ( " bg1 " , " bg2 " ) ;
$stmt = $pdo -> prepare ( " select spalte1 , spalte2 , spalte3 from tabelle " ) ;
$stmt -> execute ( ) ;
$ia = count ( $divCona ) ;
$ib = count ( $divConb ) ;
$ic = count ( $divConc ) ;
echo ' <div id = " tabs "> ' ;
while ( $line = $stmt -> fetch ( ) ) {
echo ' <div class = " ' . $divCona [ $ia % count ( $divCona ) ] . ' "> ' . $line [ ' spalte1 ' ] . ' </div> ' ;
echo ' <div class = " ' . $divConb [ $ib % count ( $divConb ) ] . ' "> ' . $line [ ' spalte2 ' ] . ' </div> ' ;
echo ' <div class = " ' . $divConc [ $ic % count ( $divConc ) ] . ' "> ' . $line [ ' spalte3 ' ] . ' </div> ' ;
$ia + + ;
$ib + + ;
$ic + + ;
}
echo ' </div> ' ;
?>
css:

.bg1 {
background: Gainsboro;
}

.bg2 {
background: silver;
}

#tabs {
display:flex;
align-items: stretch;
flex-flow: row wrap;
}

#tabs div {
width: 33.3%;
}
Beispiel: Tabelle
Pl
Team
Sp
S
U
N
Tore
Pkt
1
Bayern
24
19
1
4
75:26
58
2
Dortmund
24
16
2
6
64:37
50
3
Leverkusen
24
13
5
6
63:39
44
4
Leipzig
24
12
4
8
50:28
40
5
Freiburg
24
11
7
6
39:26
40
6
Hoffenheim
24
12
4
8
47:36
40
7
Union
24
10
7
7
32:32
37
8
Köln
24
9
9
6
36:38
36
9
Mainz
24
10
4
10
35:29
34
10
Frankfurt
24
8
7
9
33:36
31
11
Bochum
24
8
5
11
25:34
29
12
Wolfsburg
24
8
4
12
26:37
28
13
Gladbach
24
7
6
11
32:48
27
14
Bielefeld
24
5
10
9
22:32
25
15
Augsburg
24
5
8
11
26:41
23
16
Hertha
24
6
5
13
25:54
23
17
Stuttgart
24
4
7
13
28:45
19
18
Fürth
24
3
5
16
22:62
14