CSS einbinden#
Wenn die Funktionalität gegeben ist, kann mit CSS das Layout verbessert werden.
1<!DOCTYPE html>
2<html lang="de-de">
3 <head>
4 <title>Javascript im Browser</title>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6 <link href="styles.css" rel="stylesheet" type="text/css">
7 </head>
8 <body>
9 <h1>JS/HTML: Tabelle</h1>
10 <ul>
11 <li>Version I: Grundgerüst</li>
12 <li>Version II: JS am Dateiende einbinden</li>
13 <li>Version III: Ausgabe einer Objektlist</li>
14 <li>Version IV: Trennung von Daten und Anwendung</li>
15 <li>Version V: Ausgabe in einer Tabelle</li>
16 <li>Version VI: Layout-Fragen</li>
17 </ul>
18 <pre id="debug" style="color:rgb(116, 68, 68)">
19
20 </pre>
21 <div style="halign:center">
22 <table id="teamTable">
23 <tr>
24 <th>Anrede</th>
25 <th>Vorname</th>
26 <th>Nachname</th>
27 </tr>
28 </table>
29 </div>
30 <h1>-- Finale -- </h1>
31 <script src="./ausgabe-vars-04-data.js"></script>
32 <script src="./ausgabe-vars-05.js"></script>
33 </body>
34
35</html>
Styles#
1html {
2 font-size: 10px;
3 font-family: 'Open Sans', sans-serif;
4 padding-top: 20px;
5 }
6
7
8 h1 {
9 font-size: 40px;
10 text-align: center;
11 }
12
13 p, li {
14 font-size: 10px;
15 line-height: 2;
16 letter-spacing: 1px;
17 }
18
19 html {
20 background-color: #00539F;
21 }
22
23 body {
24 width: 600px;
25 margin: 0 auto;
26 background-color: #FF9500;
27 padding: 0 20px 20px 20px;
28 border: 5px solid darkblue;
29 }
30
31 h1 {
32 margin: 0;
33 padding: 20px 0;
34 color: #00539F;
35 text-shadow: 3px 3px 1px black;
36 }
37
38 table{
39 border:1px solid black;
40 margin-left:auto;
41 margin-right:auto;
42 }
43
44tr:nth-child(odd) { background-color:#eee; }
45tr:nth-child(even) { background-color:#fff; }