Guillaume Duverger - DĂ©veloppement & Graphisme - Blog

Vous ĂȘtes ici : Accueil > DĂ©monstrations > HTML

Tableaux complexes HTML

Tableau complexe avec l'attribut colspan :

Titre du jeu Enfants Adolescents/Adultes
Call of duty black ops 4 Non adapté Adapté
Grand Theft Auto IV Non adapté Adapté
The Legend of Zelda: Breath of the Wild Tout Ăąge

Code :

HTML


<table>
<thead>
<tr>
<th>Titre du jeu</th>
<th>Enfants</th>
<th>Adolescents/Adultes</th>
</tr>
</thead>
<tr>
<td>Call of duty black ops 4</td>
<td>Non adapté</td>
<td>Adapté</td>
</tr>
<tr>
<td>Grand Theft Auto IV</td>
<td>Non adapté</td>
<td>Adapté</td>
</tr>
<tr>
<td>The Legend of Zelda: Breath of the Wild</td>
<td colspan="2">Tout Ăąge</td>
</tr>
</table>


CSS


table{
	
margin: 1rem auto;
text-align: center;
width: 100%;
max-width: 100%;
border-collapse: collapse;
border: 1px solid

}
		
	
thead{

background-color: purple;
color: white

}
	

th,td{padding:8px 0}

tbody tr:nth-child(even) {
	
background-color: #ddd
	
}
	
@media only screen and (max-width: 800px) {
		
table, 
thead, 
tbody, 
th, 
td, 
tr{ 
	
display: block
	
}
	
thead tr { 
position: absolute;
top: -9999px;
left: -9999px;
}
 
 
 
td { 
	
position: relative;
padding-left: 50%; 
white-space: normal;
text-align: left
	
	}
 
td:before { 
	
position: absolute;
top: 6px;
left: 6px;
width: 45%; 
padding-right: 10px; 
font-weight: bold;
white-space: nowrap;
text-align:left;
content: attr(data-title)
	
	}
}



Tableau complexe avec l'attrribut rowspan :

Titre du jeu Call of duty black ops 4 Grand Theft Auto IV The Legend of Zelda: Breath of the Wild
Enfants Non adapté Non adapté Tout ùge
Adolescents/Adultes Adapté Adapté

Code :

HTML


<table>
<thead>
<tr>
<th>Titre du jeu</th>
<td>Call of duty black ops 4</td>
<td>Grand Theft Auto IV</td>
<td>The Legend of Zelda: Breath of the Wild</td>
</tr>
</thead>
<tr>
<th>Enfants</th>
<td>Non adapté</td>
<td>Non adapté</td>
<td rowspan="2">Tout Ăąge</td>
</tr>
<tr>
<th>Adolescents/Adultes</th>
<td>Adapté</td>
<td>Adapté</td>
</tr>	
</table>


Vous rencontrez un problÚme avec cette démonstration ?

Avant de vous arracher les cheveux ou de crier au scandale, procĂ©dez Ă  quelques simples vĂ©rifications. Si la dĂ©monstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de mĂȘme chez vous. De plus vous pouvez tĂ©lĂ©charger la dĂ©monstration. Si vraiment vous coincez, vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne rĂ©ponds qu'aux messages respectueux.