Objectifs
- ِAppréhender les nouveaux éléments de tableau.
Exercice: 1
Enoncé
- À l'aide des éléments HTML liés aux tableaux, créer un tableau selon le modèle suivant
Solution
Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <center> <table border="2" width="60%" cellpadding="10"> <tr> <td> <!--Début tableau 01--> <table border="1" width="100%" > <thead bgcolor="gray"> <tr> <th>C1</th> <th>C2</th> <th>C3</th> <th>C4</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td>9</td> <td>10</td> <td>11</td> <td>12</td> </tr> </tbody> </table> <!--Fin tableau 01--> </td> <td> <!--Début tableau 02--> <table border="1" width="100%" > <tbody> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>D</td> <td>E</td> <td>F</td> </tr> <tr> <td>G</td> <td>H</td> <td>I</td> </tr> <tr> <td>J</td> <td>K</td> <td>L</td> </tr> </tbody> </table> <!--Fin tableau 02--> </td> </tr> <tr> <td colspan="2"> <!--Début tableau 03--> <table border="1" width="100%" > <tbody> <tr> <td>A</td> <td>B</td> <td>C</td> <td>D</td> <td>E</td> <td>F</td> <td>G</td> </tr> <tr> <td>H</td> <td>I</td> <td>J</td> <td>K</td> <td>L</td> <td>M</td> <td>N</td> </tr> <tr> <td>O</td> <td>P</td> <td>Q</td> <td>R</td> <td>S</td> <td>T</td> <td>U</td> </tr> <tr> <td>V</td> <td>W</td> <td>X</td> <td>Y</td> <td>Z</td> <td></td> <td></td> </tr> </tbody> </table> <!--Fin tableau 03--> </td> </tr> </table> </center> </body> </html>
Exercice: 2
Enoncé
- À l'aide des éléments HTML liés aux tableaux, créer un tableau selon le modèle suivant