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; }

Ende#

../../_images/finale-tabelle.webp