Les tableaux

DéfinitionLa base

table : le tableau

tr : ligne de cellules

td : cellule

1
<table>
2
  <tr>
3
    <td>Matières</td>
4
    <td>Notes</td>
5
  </tr>
6
  <tr>
7
    <td>Math</td>
8
    <td>15</td>
9
  </tr>
10
  <tr>
11
    <td>Francais</td>
12
    <td>10</td>
13
  </tr>
14
  <tr>
15
    <td>Moyenne</td>
16
    <td>12,5</td>
17
  </tr>
18
</table>
Matières Notes
Math 15
Francais 10
Moyenne 12,5
Interprétation de balises

DéfinitionComplet

caption : Légende du tableau

th : cellule de titre de colonne

thead : entête du tableau

tbody : corps du tableau

tfoot : pied du tableau

1
<table>
2
  <caption>Notes du semestre</caption>
3
  <thead>
4
    <tr>
5
      <th>Matières</th>
6
      <th>Notes</th>
7
    </tr>
8
  </thead>
9
  <tbody>
10
    <tr>
11
      <td>Math</td>
12
      <td>15</td>
13
    </tr>
14
    <tr>
15
      <td>Francais</td>
16
      <td>10</td>
17
    </tr>
18
  </tbody>
19
  <tfoot>
20
    <tr>
21
      <td>Moyenne</td>
22
      <td>12,5</td>
23
    </tr>
24
  </tfoot>
25
</table>
Notes du semestre
Matières Notes
Math 15
Francais 10
Moyenne 12,5
Interprétation de balises

Avec la mise en forme

1
thead, tfoot {
2
  background-color: #3f87a6;
3
  color: #fff;
4
}
5
tbody {
6
  background-color: #e4f0f5;
7
}
8
caption {
9
  padding: 10px;
10
  caption-side: bottom;
11
}
12
table {
13
  border-collapse: collapse;
14
  border: 2px solid rgb(200, 200, 200);
15
}
16
td, th {
17
  border: 1px solid rgb(190, 190, 190);
18
  padding: 5px 10px;
19
  text-align: center;
20
}
21


 
 Notes du semestre  
 Matières Notes 
   
 Math 15 
 
 Francais 10 
   
 Moyenne 12,5 
  
 


Interprétation de balises
DéfinitionFusion de cellule
colspan : nombre de colonnes occupées par la cellule
rowspan : nombre de lignes occupées par la cellule
1
<table>
2
  <tr>
3
    <td>Cellule 1</td>
4
    <td>Cellule 2</td>
5
    <td>Cellule 3</td>
6
  </tr>
7
  <tr>
8
    <td colspan="2">2 colonnes</td>
9
    <td rowspan="2">2 lignes</td>
10
  </tr>
11
  <tr>
12
    <td>...</td>
13
    <td>...</td>
14
  </tr>
15
  <tr>
16
    <td colspan="2" rowspan="2">2 colonnes 2 lignes</td>
17
    <td>...</td>
18
  </tr>
19
  <tr>
20
    <td>...</td>
21
  </tr>
22
</table>


 
 

 Cellule 1 Cellule 2 Cellule 3 
 
 2 colonnes 2 lignes 
 
 ... ... 
 
 2 colonnes 2 lignes ... 
 
 ... 
 

 


Interprétation de balises