Créez les fichiers suivants :

joueurs.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>joueurs</title>
		<link type="text/css" rel="stylesheet" href="joueurs.css"/>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script src="joueurs.js"></script>
	</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="ajout-bouton" 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>
</table>
<!--------------------->
	</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

console.log("Ce programme JS vient d'être chargé");
$(document).ready(function()
{
	console.log("Le document est pret");


	console.log("La mise en place est finie. En attente d'événements...");
});

Vérifiez que l'affichage est correct.