/* image de fond */
body {
background-image: url("image/foret1.jpg"); background-repeat: repeat;
background-size: cover;
}
/*++++pour que border-spacing fonctionne++++*/ 
table {
	border-collapse: separate;}
/*++++distance entre les cellules du tableau++++*/ 
table {
	border-spacing: 15px;
/*++++  avec deux fois auto, le tableau est centré ä l'écran+++++*/	
}
table{
     margin-left: auto;
     margin-right: auto;
}
/*++justification du texte+++++*/
table{
     text-align: center;
}
/* +++++++ Définit la couleur du texte ++++ */
table{
color: white;
	}
/* Définit la couleur des liens */
table{
a { color: white;  
	}
  <style>
	tr { /* pour que le tabeau soit visible */
		  } 	 
    td {
        background-color: black; 	/* Définit la couleur de fond des cellules */
         border: 5px solid black; 	/* Ajoute une bordure aux cellules (facultatif) */
       	font-size: 100%;
			font-family: calibri light;
			border-radius : 13px;  		/* arrondir les angles des cellules */
			height:30px; 					/* hauteur des cellules */
   	} 
   </style> 
   
/* Rend la page HTML adaptive, la largeur est adaptée à la résolution de l'écran */ 
/* @media; requête multimedia qui renvoie la résoluion de l'écran de l'internaute */ 
/* table{ display; adapte la largeur de la page] */ 

@media (max-width: 640px) {
	table {display: table; width: 100%; table-layout: auto; margin-right: auto; margin: 0 auto;}
	}

@media (min-width: 641px) and (max-width: 2000px) {
	table {display: table; width: 30%; table-layout: auto; margin-right: auto; margin: 0 auto;}
	}
	
@media (min-width: 2001px) and (max-width: 5000px) {
	table {display: table; width: 15%; table-layout: auto; margin-right: auto; margin: 0 auto;}
	}