Comment crée un tableau avec du html et du css

Crée un tableau avec du html et css seulement, sur la plate form blogger.
 Nous avons généralement besoin de formater notre contenu HTML brut afin de mieux le présenter, 

UN TABLEAU RESPONSIVE AVEC DU CSS.

Nous avons souvent besoin de faire un tableau ou des feuilles de calcul qui sont argumentés et à chargement rapide, afin de les placer ou de les remplir avec des données dans n’importe quel endroit, alors j’ai choisi de placer un code de tableau avec html et cssK, une feuille de calcul téléchargée rapidement qui est facile à modifier.

Voir le code css sur codepen. 

 Exemple de tableau css et html.

Ceci est un exemple de tableau de donnée css  attrayante et vous trouverez le code source sur le site copepen

UN EXEMPLE DE TABLEAU RESPONSIVE
Allegra	33 ans	Espagne
Bianca	26 ans	États-Unis
Michelle	26 ans	Romania
Domizia	26 ans	Espagne
Enrichetta	26 ans	France

Code

le code html

Un tableau responsive avec du Css et Html
<table class="tabloo"><thead><tr><th colspan="3"><span style="font-size: medium;">UN EXEMPLE DE TABLEAU RESPONSIVE</span></th>       
      </tr></thead>
      <tbody>
   <tr>
       <td><span style="font-size: medium;">Allegra</span></td>
       <td><span style="font-size: medium;">33 ans</span></td>
       <td><span style="font-size: medium;">Espagne</span></td>
   </tr>
   <tr>
       <td><span style="font-size: medium;">Bianca</span></td>
       <td><span style="font-size: medium;">26 ans</span></td>
       <td><span style="font-size: medium;">États-Unis</span></td>
   </tr>
        
        <tr>
       <td><span style="font-size: medium;">Michelle</span></td>
       <td><span style="font-size: medium;">26 ans</span></td>
       <td><span style="font-size: medium;">Romania</span></td>
   </tr>
        
        <tr>
       <td><span style="font-size: medium;">Domizia</span></td>
       <td><span style="font-size: medium;">26 ans</span></td>
       <td><span style="font-size: medium;">Espagne</span></td>
   </tr>
  <tr>
       <td><span style="font-size: medium;">Enrichetta</span></td>
       <td><span style="font-size: medium;">26 ans</span></td>
       <td><span style="font-size: medium;">France</span></td>
        </tr></tbody>
</table>

le code Css

div.tableau_test {
   display: block;
  margin: auto;
  max-width: 70%;
  padding:5px;
  width: 70%;
color: #222;
}

.tableau_test-title h3 {
   color: #fafafa;
   font-size: 14px;
   font-weight: 600;
   font-style:normal;
   font-family: "Roboto", helvetica, arial, sans-serif;
   text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
   text-transform:uppercase;
}


.tableau_test  {
  background: white;
  border-radius:3px;
  border-collapse: collapse;
  height: 320px;
  margin: auto;
  max-width: 600px;
  padding:5px;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s infinite;
}
 
th {
  color:#999;
  background:#1b1e24;
  border-bottom:4px solid #9ea7af;
  border-right: 1px solid #343a45;
  font-size:23px;
  font-weight: 100;
  padding:24px;
  text-align: center;
	direction: tlr;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  vertical-align:middle;
	
}

th:first-child {
  border-top-left-radius:3px;
	text-align: center;
	direction: tlr;
}
 
th:last-child {
  border-top-right-radius:3px;
  border-right:none;
	text-align: center;
	direction: tlr;
}
  
tr {
  border-top: 1px solid #C1C3D1;
  border-bottom-: 1px solid #C1C3D1;
  color:#666B85;
  font-size:16px;
  font-weight:normal;
  text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
	text-align: center;
	direction: tlr;
}
 
tr:hover td {
  background:#4E5066;
  color:#FFC300;
  border-top: 1px solid #22262e;
}
 
tr:first-child {
  border-top:none;
	text-align: center;
	direction: tlr;
}

tr:last-child {
  border-bottom:none;
	text-align: center;
	direction: tlr;
}
 
tr:nth-child(odd) td {
  background:#EBEBEB;
}
 
tr:nth-child(odd):hover td {
  background:#4E5066;
}

tr:last-child td:first-child {
  border-bottom-left-radius:3px;
}
 
tr:last-child td:last-child {
  border-bottom-right-radius:3px;
}
 
td {
  background:#FFFFFF;
  padding:20px;
   vertical-align:middle;
  font-weight:300;
  font-size:18px;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
  border-right: 1px solid #C1C3D1;
	text-align: center;
	direction: tlr;
}

td:last-child {
  border-right: 0px;
	text-align: center;
	direction: tlr;
}

th.text-right {
  text-align: left;
	text-align: center;
	direction: rtl;
}

th.text-right {
  text-align: center;
}

th.text-right {
  text-align: center;
}

td.text-right {
  text-align: center;
	direction: rtl;
}

td.text-center {
  text-align: center;
}

td.text-right {
  text-align: center;
}


@media (max-width: 400px) {
.tableau_test td:nth-child(6),
.tableau_test th:nth-child(6) { display: center; }
}