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.