4.2: Fichiers

Créez les fichiers suivants.

joueurs.html

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>joueurs</title>
		<link type="text/css" rel="stylesheet" href="joueurs.css"/>
	</head>
	<body>
<!--------------------->
<h2>Joueurs :</h2>
<p id="ajouter">
	<label>nom:   <input id="ajout-nom"   type="text"/></label>
	<label>score: <input id="ajout-score" type="text"/></label>
	<input id="bouton-ajouter" type="button" value="ajouter"/>
</p>
<table id="joueurs">
	<tr><td class="nom">Leïla</td><td class="score">121</td></tr>
	<tr><td class="nom">Driss</td><td class="score">153</td></tr>
	<tr><td class="nom">Lian</td><td class="score">210</td></tr>
	<tr><td class="nom">Joe</td><td class="score">32</td></tr>
	<tr><td class="nom">Naïma</td><td class="score">261</td></tr>
	<tr><td class="nom">Karim</td><td class="score">183</td></tr>
	<tr><td class="nom">Anon.</td><td class="score">0</td></tr>
</table>
<p>
	total   : <span id="total"  >960</span><br/>
</p>

<!--------------------->
	<script src="joueurs.js"></script>
	</body>
</html>

joueurs.css

body
{
	font-family: sans;
}

h2
{
	font-size: 16px;
}

#joueurs
{
	box-shadow: 2px 2px 4px rgba(0,0,0,.2);
	border-radius: 2px;
	border-collapse: collapse;
	margin-left: 40px;
}

#joueurs td
{
	padding: 3px 10px;
}
#joueurs tr
{
	background-color: #f0f0ff;
}

#joueurs tr:nth-child(2n)
{
	background-color: #efe;
}

#ajouter input[type='text']
{
	width: 80px;
}

#ajout-nom
{
	margin-right: 10px;
}

joueurs.js

(vide)