Scribd
Importer
4 vues8 pages

Introduction aux tableaux et div en HTML

Le chapitre présente les tableaux en HTML, expliquant les balises <table>, <tr>, et <td> pour structurer les données en lignes et colonnes. Il aborde également la balise <div> comme un conteneur générique pour regrouper d'autres éléments sans valeur sémantique. Des exemples de code HTML et CSS sont fournis pour illustrer ces concepts.

Transféré par

sieweelwis0
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
4 vues8 pages

Introduction aux tableaux et div en HTML

Le chapitre présente les tableaux en HTML, expliquant les balises <table>, <tr>, et <td> pour structurer les données en lignes et colonnes. Il aborde également la balise <div> comme un conteneur générique pour regrouper d'autres éléments sans valeur sémantique. Des exemples de code HTML et CSS sont fournis pour illustrer ces concepts.

Transféré par

sieweelwis0
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Chapitre (02) : Le langage HTML

1/ Les Tableaux en HTML :


Un tableau est un ensemble structuré de données (table de données)
présentées en lignes et colonnes.

Pour faire un tableau HTML, il faut utiliser les balises suivantes :

• La balise < table > : elle indique au navigateur qu'il faut afficher un tableau.
Tout ce qui se trouve entre les balises < table > < /table > est organisé en lignes
et en colonnes.

• La balise < tr >, pour « table row » : elle désigne une ligne du tableau. Les
éléments renseignés à l'intérieur des balises < tr > < /tr > s'affichent sur une
ligne.

• La balise < td >, pour « table data » : elle permet de remplir le contenu d'une
cellule.

Le tableau HTML se construit ligne par ligne. Après avoir inséré la balise < table
>, il faut coder chaque ligne du tableau l'une après l'autre. Le nombre de
colonnes est déterminé par le nombre de balises < td > de chaque ligne. Pour
créer un tableau HTML à 2 lignes et 2 colonnes, par exemple, le code ressemble
à cela :
< table >

< tr > < td >Colonne 1< /td > < td >Colonne 2< /td > < /tr >

< tr > < td >Contenu colonne 1< /td > < td >Contenu colonne 2< /td > < /tr >

< /table >

Ezzitouni 1
Chapitre (02) : Le langage HTML

Exemple 01 :

Exemple 02 :

Le code CSS :
table{
border-collapse: collapse
}
td{
border: 1px solid black;
padding: 10px;
}

Ezzitouni 2
Chapitre (02) : Le langage HTML

Exemple 03 :

Ezzitouni 3
Chapitre (02) : Le langage HTML

2/ les div en HTML


La balise HTML div, pour « division », est un élément de bloc qui a vocation à contenir
d'autres éléments : un div HTML regroupe du contenu à l'intérieur de ses balises < div > <
/div >.

• Le div HTML est un conteneur générique : sa fonction est structurante, il n'a


aucune valeur sémantique.

Ezzitouni 4
Chapitre (02) : Le langage HTML

Exemple :

<div style="width:300; height:180; overflow:auto; border:solid 1px black;">

<table width="90%" cellpadding="0" cellspacing="0">

<tr height="40" valign="middle"><td align="left">Ligne 1</td></tr>

<tr height="40" valign="middle"><td align="center">Ligne 2</td></tr>

<tr height="40" valign="middle"><td align="right">Ligne 3</td></tr>

<tr height="40" valign="middle"><td align="left">Ligne 4</td></tr>

<tr height="40" valign="middle"><td align="center">Ligne 5</td></tr>

<tr height="40" valign="middle"><td align="right">Ligne 6</td></tr>

<tr height="40" valign="middle"><td align="left">Ligne 7</td></tr>

<tr height="40" valign="middle"><td align="center">Ligne 8</td></tr>

<tr height="40" valign="middle"><td align="right">Ligne 9</td></tr>

</table>

</div>

Ezzitouni 5
Chapitre (02) : Le langage HTML

Résultat :

Exemple :

Ezzitouni 6
Chapitre (02) : Le langage HTML

CODE HTML :

CSS :

Ezzitouni 7
Chapitre (02) : Le langage HTML

Exemple :

Ezzitouni 8

Vous aimerez peut-être aussi