WebPetit

Ce matin en lançant mon navigateur j’ai eu la surprise de voir cette image en dessous du champs de recherche de la page d’accueil de Google :

Il s’agissait d’un lien vers le site Art Project de Google.

Le projet a été lancé depuis un bon moment car Google travaille depuis 18 mois en collaboration avec 17 musées afin de créer un site qui nous permettra d’accéder à des œuvres exposées dans ces musées. On peut se promener virtuellement dans ces musées à la manière de Street View ou admirer les tableaux un à un.

Google met ainsi à portée des internautes des œuvres dont beaucoup ne pourront/voudront jamais aller voir en musée.

Source : le blog de Google France.

L’ élément HTML de type block table permet de créer des tableaux.
Il est utilisé avec les éléments tr pour les lignes et td pour les colonnes.

<table>
<tr>
<td>Lorem ipsum dolor sit amet,</td>
<td>Suspendisse pharetra placerat felis</td>
<td>Mauris id nunc ac quam sollicitudin varius.</td>
</tr>
</table>

Attributs

Attribut : class

Permet de spécifier la classe css à utiliser sur le tableau.

<table class="tableau">
<tr>
<td>Lorem ipsum dolor sit amet,</td>
<td>Suspendisse pharetra placerat felis</td>
<td>Mauris id nunc ac quam sollicitudin varius.</td>
</tr>
<tr>
<td>Mauris eget erat vitae purus lacinia egestas.</td>
<td>Proin nibh nisl, dictum vitae lacinia quis,</td>
<td>consectetur congue elit.</td>
</tr>
</table>

.tableau{
background-color:chocolate;
border:1px solid black;
}
.tableau tr td{
border:1px solid black;
}

Attribut : id

Permet de spécifier l’identifiant css à utiliser sur le corps de la page HTML.

<table id="tableau">
<tr>
<td>Lorem ipsum dolor sit amet,</td>
<td>Suspendisse pharetra placerat felis</td>
<td>Mauris id nunc ac quam sollicitudin varius.</td>
</tr>
<tr>
<td>Mauris eget erat vitae purus lacinia egestas.</td>
<td>Proin nibh nisl, dictum vitae lacinia quis,
<td>consectetur congue elit.</td>
</tr>
</table>

#tableau{
font-weight:bolder;
background-color:yellow;
border:1px solid black;
}
.tableau tr td{
border:1px solid black;
}

Attribut : title

Permet de mettre une infobulle sur le tableau.

<table title="tableau">
<tr>
<td>Lorem ipsum dolor sit amet,</td>
<td>Suspendisse pharetra placerat felis</td>
<td>Mauris id nunc ac quam sollicitudin varius.</td>
</tr>
</table>

Attribut : dir

Permet de spécifier le sens d’écriture du texte. Elle prend 2 valeurs :
- ltr : Left To Right : de gauche à droite(valeur par défaut).
- rtl : Right To Left : de droite à gauche.

<table dir="rtl">
<tr>
<td> فصل وجهان واُسدل بمباركة بـ. بها عل أعلنت</td>
<td>ويعزى الحروب مع دون, عام كل قررت تسمّى الشتوية.</td>
<td>الى حاملات الأمريكي، قد, معركة المدنيون بـ أخر.</td>
</tr>
</table>

Attribut : style

Permet d’appliquer un style au tableau directement dans le html, sans avoir besoin d’une feuille de style.

<table style="border:1px solid black;">
<tr>
<td style="border:1px solid black;">Lorem ipsum dolor sit amet,</td>
<td style="border:1px solid black;">Suspendisse pharetra placerat felis</td>
<td style="border:1px solid black;">Mauris id nunc ac quam sollicitudin varius.</td>
</tr>
</table>

Attribut : lang

Permet de spécifier la langue à l’intérieur du tableau.

<table lang="en">
<tr>
<td>Where is Brian?</td>
<td>He is in the kitchen</td>
<td>He can't cook, what is he doing there?</td>
</tr>
</table>

La propriété CSS table-layout permet de modifier la taille des cellules d’un tableau.

#mon_identifiant {
table-layout:fixed;
}

Elle permet de modifier la taille des cellules d’un tableau selon une taille prédéfini, ou selon le contenu.
Les valeurs possibles sont:

• auto: le navigateur détermine les dimensions des cellules en fonction de leur contenu sauf si une ou plusieurs largeurs sont explicitement indiquées (propriété width), valeur mise par défaut.
• fixed: toutes les colonnes ont la même largeur sauf celles dont la largeur est précisée par la propriété width.
• inhérit hérite de son parent.

Attention le temps de calcul peut être long.

Exemple :

CSS

table{
table-layout:auto;
border:1px solid green;
}
table tr td{
border:1px solid red;
}

HTML

<table>
<tr>
<td>Lorem ipsum dolor sit amet,</td>
<td>consectetur adipiscing elit.</td>
<td>Suspendisse pharetra placerat felis,</td>
<td> quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius.</td>
</tr>
</table>

La propriété CSS border-collapse permet de gérer la bordure des cellules d’un tableau.

#mon_identifiant {
border-collapse:separate;
}

Elle permet de coller ou de séparer les cellules d’un tableau.
Les valeurs possibles sont: collapse(les cellules ont une bordure commune), separate(les cellules ont une bordure séparée),
inhérit(hérite de son parent).

Exemple :

CSS

table{
border-collapse:separate;
border:1px solid red;
}
td{
border:1px solid green;
}

HTML

<table>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu.</td>
<td>Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis,<td>
</tr>
</table>