Index exercices optimisation moteurs CSS (feuille de style) Index faire son site Plan du site Trucs et astuces pc

HTML exercices correction 2

HTML exercices, script HTML d'un tableau multi-cellules

L' HTML exercices multi-cellules ne doit pas vous poser plus de problèmes que le tableau à une cellule, si vous y êtes arrivé avec le premier exercice, celui-ci : "y a pas prob, Bob" ! Comme précédemment, amusez-vous avec les valeurs et observer le résultat, c'est le mieux, si vous rencontrez des problèmes contactez-moi, si je peux, je vous renseignerais. des cours HTML tableau se trouve plus bas sur cette page web, cours HTML : couleur de fond et image de fond (cliquez sur couleur de fond et image de fond), les codes HTML sont copiables et collables dans votre éditeur wysiwyg ou dans le Bloc-notes de Windows.


1 2
<table
 style="border: 1px solid rgb(255, 255, 0); width: 400px;
 border="0" cellpadding="10" cellspacing="10">
        <tbody>
          <tr>
            <td
 style="border: 1px solid rgb(174, 0, 0); height: 100px; width: 200px; text-align: center; vertical-align: middle;">1</td>
            <td
 style="border: 1px solid rgb(174, 0, 0); width: 200px; text-align: center; vertical-align: middle;">2</td>
          </tr>
        </tbody>
      </table>

Grâce à cellpadding et cellspacing, il est possible de détacher les cellules du tableau HTML.

HTML exercices, cellules tableau supperposées avec background-color

L'épaisseurs des bordures est réglable avec border-width, dans le tableau ci-dessous border-width est à 1 pixels et border solid 

1
2
      <table
 style="border: 1px solid rgb(255, 255, 0); background-color: rgb(192, 192, 192); color: rgb(0, 0, 0); width: 200px; text-align: left; margin-left: auto; margin-right: auto;"
 border="0" cellpadding="10" cellspacing="10">
        <tbody><tr>
            <td
 style="border: 1px solid rgb(174, 0, 0); height: 100px; width: 200px; text-align: center; vertical-align: middle; background-color: rgb(0, 153, 0); color: rgb(0, 0, 0);">1</td>
          </tr><tr>
            <td
 style="border: 1px solid rgb(174, 0, 0); width: 200px; text-align: center; vertical-align: middle; background-color: rgb(255, 255, 0); color: rgb(0, 0, 0); height: 100px;">2</td>
          </tr>
        </tbody>
      </table>

tableau avec background-image et background-color

Les possiblités de mise en page grâce aux tableaux sont fantastiques, vous pouvez faire un habillage de vos pages HTML avec très peu d'images, donc un poids léger et une vitesse de chargement de la page rapide. 

1 2
3 4
      <table style="border: 1px solid rgb(255, 255, 0); background-image: url(../sitesam/bbt.gif); background-repeat: no-repeat; background-position: center; background-color: rgb(204, 102, 0); color: rgb(0, 0, 0); width: 500px;"
 border="0" cellpadding="70" cellspacing="70">
        <tbody><tr>
            <td style="border-style: double; border-color: rgb(0, 100, 200) rgb(0, 200, 200); border-width: 6px; height: 100px; width: 200px; text-align: center; vertical-align: middle; background-color: rgb(255, 255, 0); color: rgb(0, 0, 0);">1</td>
            <td style="border: 6px outset rgb(174, 0, 0); width: 200px; text-align: center; vertical-align: middle; background-color: rgb(204, 0, 0); color: rgb(0, 0, 0);">2</td>
          </tr><tr>
            <td style="border: 6px ridge rgb(174, 0, 0); height: 100px; text-align: center; vertical-align: middle; background-color: rgb(204, 0, 0); color: rgb(0, 0, 0);">3</td>
            <td style="border: 6px dashed rgb(0, 0, 0); height: 100px; text-align: center; vertical-align: middle; background-color: rgb(255, 255, 0); color: rgb(0, 0, 0);">4</td>
          </tr></tbody></table>

Si vous avez une ou des recherches à faire, utlisez Google. Pour revenir à cette page utiliser le bouton retour de votre navigateur.
Savez-vous que vous pouvez utiliser Google comme calculatrice ? Tapez, par exemple : 43 * 6, ou même un autre calcul plus complexe. Un dossier sur les astuces de recherches Google est disponible ICI et les "trucs" PC sont à votre disposition dans l'espace Trucs et astuces PC. Vous pouvez vous y rendre depuis le lien Trucs et astuces PC en haut à gauche, ou bien directement ICI.
 

Google

Titre de la page : 2. Exercice HTML correction, tableau multi-cellules
Le site visiograf.org a été réalisé avec le souci de correspondre aux normes du W3C, pour  vérifier la validation HTML 4.01 Transitional copiez l'adresse de la présente page : http://www.visiograf.org/html/correction_ex_2.html cliquez ici et collez cette adresse dans le champ Address:, de la rubrique Validate by URL puis cliquez sur Check pour vérifier la validation CSS 2.1 cliquez ici, et collez de nouveau l'adresse dans le champs Adresse: puis cliquez sur Vérifier
 

Valid HTML 4.01 Transitional



Creative Commons License      Contact     Haut de page      copyright