Exercice supplémentaire avant d’attaquer autre chose.
Le code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>chose your plan</title>
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Passion+One:900" rel="stylesheet">
</head>
<style>
.table1 {
width: 750px;
height: px;
margin: auto;
font-family: 'PT Sans Narrow', sans-serif;
font-weight: 400;
text-align: center;
}
.table1 td {
border: 1px solid #ddd;
margin: auto;
}
.table_in{
margin:5px auto;
width: 90%;
}
.table1 .table_in2{
margin:10px auto;
border: none;
}
.table1 .table_in2 td{
border: none;
}
.table1 .table_in td{
border: none;
}
.bleu {
background-color: skyblue;
}
.choix1, .choix2{
background-color:#2fbceb;
color: white;
}
.table1 .table_in2 .choix{
margin-top: 10px;
}
.prix{
background-color: #eee;
}
.tbody1 td:first-child{
text-align: left;
}
/*
.tbody1 tr:nth-child(2n), ou
*/
.tbody1 tr:nth-child(even){
background-color: #eee;
}
.tbody1 tr:nth-child(6) td:nth-child(n+2),
.tbody1 tr:nth-child(5) td:nth-child(n+2){
font-family: 'Passion One', cursive;
font-size: 1.6em;
padding:0;
}
.tbody1 tr:nth-child(5) td:nth-child(n+2){
color:#2fbceb;
}
.tbody1 tr td{
padding: .5em;
font-size: 1em;
}
.bleu1,
.bleu2
{
color:#2fbceb;
}
.thead1 tr:first-child>td:first-child{
font-size: 1.8em;
}
.dollar1, .bleu1{
font-size: 2.2em;
}
.dollar2, .bleu2{
font-weight: bolder;
font-size: 1.7em;
}
.gras{
font-weight: 600;
}
</style>
<body>
<table class="table1">
<col class="col1">
<thead class="thead1">
<tr>
<td class="bleu1">
chose<br/> your plan
</td>
<td>
<table class="table_in">
<tr>
<td class="choix1">starter</td>
</tr>
<tr>
<td class="prix"><span class="dollar1">$</span><span class="bleu1">10</span> <br/>per month</td>
</tr>
</table>
</td>
<td>
<table class="table_in">
<tr>
<td class="choix1">corporate</td>
</tr>
<tr>
<td class="prix"><span class="dollar1">$</span><span class="bleu1">20</span><br/> per month</td>
</tr>
</table>
</td>
<td>
<table class="table_in">
<tr>
<td class="choix1">business</td>
</tr>
<tr>
<td class="prix"><span class="dollar1">$</span><span class="bleu1">30</span><br/> per month</td>
</tr>
</table>
</td>
<td>
<table class="table_in">
<tr>
<td class="choix1">professional</td>
</tr>
<tr>
<td class="prix"><span class="dollar1">$</span><span class="bleu1">40</span><br/> per month</td>
</tr>
</table>
</td>
</tr>
</thead>
<tfoot>
<tr>
<th>
</th>
<td>
<table class="table_in2">
<tr>
<td class="prix2"><span class="dollar2">$</span><span class="bleu2">10</span><br/> per month</td>
</tr>
<tr>
<td class="choix2">Sign up</td>
</tr>
</table>
</td>
<td>
<table class="table_in2">
<tr>
<td class="prix2"><span class="dollar2">$</span><span class="bleu2">20</span> <br/>per month</td>
</tr>
<tr>
<td class="choix2">Sign up</td>
</tr>
</table>
</td>
<td>
<table class="table_in2">
<tr>
<td class="prix2"><span class="dollar2">$</span><span class="bleu2">30</span> <br/>per month</td>
</tr>
<tr>
<td class="choix2">Sign up</td>
</tr>
</table>
</td>
<td>
<table class="table_in2">
<tr>
<td class="prix2"><span class="dollar2">$</span><span class="bleu2">40</span><br/> per month</td>
</tr>
<tr>
<td class="choix2">Sign up</td>
</tr>
</table>
</td>
</tr>
</tfoot>
<tbody class="tbody1">
<tr>
<td>Amount of space</td>
<td><span class="gras">10GB</span> Disk space</td>
<td><span class="gras">20GB</span> Disk space</td>
<td><span class="gras">30GB</span> Disk space</td>
<td><span class="gras">40GB</span> Disk space</td>
</tr>
<tr>
<td>Bandwith per month</td>
<td><span class="gras">100GB</span> Bandwith</td>
<td><span class="gras">200GB</span> Bandwith</td>
<td><span class="gras">300GB</span> Bandwith</td>
<td><span class="gras">400GB</span> Bandwith</td>
</tr>
<tr>
<td>MySql Databases</td>
<td><span class="gras">1</span> Databases</td>
<td><span class="gras">2</span> Databases</td>
<td><span class="gras">3</span> Databases</td>
<td><span class="gras">4</span>Databases</td>
</tr>
<tr>
<td>E-mail accounts</td>
<td><span class="gras">1</span> Accounts</td>
<td><span class="gras">1</span> Accounts</td>
<td><span class="gras">1</span> Accounts</td>
<td><span class="gras">1</span> Accounts</td>
</tr>
<tr>
<td>24h support</td>
<td>√</td>
<td>√</td>
<td>√</td>
<td>√</td>
</tr>
<tr>
<td>E-mail support</td>
<td>×</td>
<td>×</td>
<td>×</td>
<td>×</td>
</tr>
</tbody>
</table>
</body>
</html>On continu
Le code :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>tableau rank 1</title>
<style>
.fig1{
text-align: center;
font-size: 1.5em;
font-weight: 700;
margin-bottom: 10px;
}
.table1,
.table1 td,
.table1 tr,
.table1 th{
border: 3px solid white;
border-collapse: collapse;
padding: 0.2em 0.5em;
}
.table1{
width: 100%;
}
.table1 .thead1 td:nth-of-type(4),
.table1 .thead1 td:nth-of-type(3),
.table1 .tbody1 td:nth-of-type(3),
.table1 .tbody1 td:nth-of-type(2)
{
text-align: right;
}
.thead1, .tfoot1{
background-color:darkorange;
}
.tbody1 tr:nth-of-type(even) :nth-child(even),
.tbody1 tr:nth-of-type(odd) :nth-child(odd)
{
background-color:bisque;
}
.tbody1 tr:nth-of-type(odd) :nth-child(even),
.tbody1 tr:nth-of-type(even) :nth-child(odd)
{
background-color:#d6d9b9;
}
</style>
</head>
<body>
<table class="table1">
<figcaption class="fig1">Most Downloadded Movies on BiTorrent, 2011</figcaption>
<thead class="thead1">
<tr>
<td>Rank</td>
<td>Movie</td>
<td>Downloads</td>
<td>Grosses</td>
</tr>
</thead>
<tfoot class="tfoot1">
<tr>
<td colspan="4">torrentfreak.com</td>
</tr>
</tfoot>
<tbody class="tbody1">
<tr>
<th>1</th>
<td>Fast Five</td>
<td>9,260,000</td>
<td>$626,137,675</td>
</tr>
<tr>
<th>2</th>
<td>The Hangover II</td>
<td>9,260,000</td>
<td>$581,464,305</td>
</tr>
<tr>
<th>3</th>
<td>Thor</td>
<td>9,260,000</td>
<td>$626,137,675</td>
</tr>
<tr>
<th>4</th>
<td>Source Code</td>
<td>7,200,000</td>
<td>$581,464,305</td>
</tr>
<tr>
<th>5</th>
<td>I Am Number Four</td>
<td>7,910,000</td>
<td>$1,328,111,219</td>
</tr>
<tr>
<th>6</th>
<td>Sucker Punch</td>
<td>7,910,000</td>
<td>$626,137,675</td>
</tr>
<tr>
<th>7</th>
<td>127 Hours</td>
<td>7,910,000</td>
<td>$1,328,111,219</td>
</tr>
<tr>
<th>8</th>
<td>Rango</td>
<td>6,910,000</td>
<td>$581,464,305</td>
</tr>
<tr>
<th>9</th>
<td>The King’s Speech</td>
<td>6,910,000</td>
<td>$1,328,111,219</td>
</tr>
<tr>
<th>10</th>
<td>Harry Potter and the Deathly Hallows Part 2</td>
<td>6,910,000</td>
<td>$581,464,305</td>
</tr>
</tbody>
</table>
</body>
</html>Mais encore
Le code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tableau_rank2
</title>
<style>
.fig1{
text-align: right;
padding-right: 40px;
}
.table1 th:first-child{
width: 40px;
}
.table1{
border-collapse: collapse;
width: 800px;
margin:auto;
font-family: sans-serif;
}
.table1 td,
.table1 th{
padding: 8px;
}
.table1 .thead1,
.table1 .tfoot1
{
background-color: #6a8cd9;
color: white;
}
.table1 .tbody1 tr:nth-child(odd){
background-color: #bbd7e8;
border-right: 1px solid #6a8cd9;
}
.table1 .thead1 tr:nth-child(1),
.table1 td:nth-child(1),
.table1 th:nth-child(1){
border-top: 1px solid #6a8cd9;
border-bottom: 1px solid #6a8cd9;
border-right: 1px solid #6a8cd9;
}
.table1 .tbody1 tr:nth-child(even) :nth-child(n){
border-top: 1px solid #6a8cd9;
border-bottom: 1px solid #6a8cd9;
border-right: 1px solid #6a8cd9;
}
.table1 .thead1 th:nth-child(2){
text-align: left;
}
.table1 .thead1 th:nth-child(n+3),
.table1 .tbody1 tr:nth-child(n) td:nth-child(n+3){
text-align: right;
}
</style>
</head>
<body>
<table class="table1">
<figcaption class="fig1">Most Downloadded Movies on BiTorrent, 2011</figcaption>
<thead class="thead1">
<tr>
<th>rank </th>
<th>movie</th>
<th>downloads</th>
<th>grosses</th>
</tr>
</thead>
<tfoot class="tfoot1">
<tr>
<td colspan="4">torrentfreak.com</td>
</tr>
</tfoot>
<tbody class="tbody1">
<tr>
<th>1</th>
<td>Fast Five</td>
<td>9,260,000</td>
<td>$626,137,675</td>
</tr>
<tr>
<th>2</th>
<td>The Hangover II</td>
<td>9,260,000</td>
<td>$581,464,305</td>
</tr>
<tr>
<th>3</th>
<td>Thor</td>
<td>9,260,000</td>
<td>$626,137,675</td>
</tr>
<tr>
<th>4</th>
<td>Source Code</td>
<td>7,200,000</td>
<td>$581,464,305</td>
</tr>
<tr>
<th>5</th>
<td>I Am Number Four</td>
<td>7,910,000</td>
<td>$1,328,111,219</td>
</tr>
<tr>
<th>6</th>
<td>Sucker Punch</td>
<td>7,910,000</td>
<td>$626,137,675</td>
</tr>
<tr>
<th>7</th>
<td>127 Hours</td>
<td>7,910,000</td>
<td>$1,328,111,219</td>
</tr>
<tr>
<th>8</th>
<td>Rango</td>
<td>6,910,000</td>
<td>$581,464,305</td>
</tr>
<tr>
<th>9</th>
<td>The King’s Speech</td>
<td>6,910,000</td>
<td>$1,328,111,219</td>
</tr>
<tr>
<th>10</th>
<td>Harry Potter and the Deathly Hallows Part 2</td>
<td>6,910,000</td>
<td>$581,464,305</td>
</tr>
</tbody>
</table>
</body>
</html>