[Résolu] Tableau

bonjour,
je n'ai que 14 ans donc soyez indulgent
Je me lance en HTML après avoir a peu près compris comment ça fonctionne, j'ai décidé de commencer par essayer de faire un tableau.
Je sais que ça peut se faire en css (que je n'ai pas encore vu) mais sur les conseils de mon entourage je voudrais bien comprendre le fonctionnement des tableaux avant de me lancer plus loin (avec des divs et des spans).
Ils pourraient m'y aider mais ils préfèrent que je fasse cette recherche par moi même.
Une fois quelques bases acquises je ferais le même exercice avec des divs et du css.

Voilà mon problème :
Lorsque sur ma dernière ligne je conserve les trois cellules il n'y a aucun souci par contre si je ne veux qu'une cellule sur la dernière ligne ça perturbe les cellules plus hautes :

mon code avec trois cellules qui fonctionne:

<table border="1">
	<tr>
		<td colspan="4">titre</td>
	<tr>
	<tr>
		<td  rowspan="3">Cellule 1</td>
		<td>Cellule 2</td>
		<td colspan="2">Cellule 3</td>
	</tr>
	<tr>
		<td colspan="2">Cellule 4</td>
		<td>Cellule 5</td>
	</tr>
	<tr>
        <td>Cellule 4</td>
        <td>Cellule 5</td>
        <td>Cellule 6</td>
	</tr>
</table>

Et mon code qui fonctionne mal :

<table>
	<tr>
		<td colspan="4">titre</td>
	<tr>
	<tr>
		<td  rowspan="3">Cellule 1</td>
		<td>Cellule 2</td>
		<td colspan="2">Cellule 3</td>
	</tr>
	<tr>
		<td colspan="2">Cellule 4</td>
		<td>Cellule 5</td>
	</tr>
	<tr>
		<td colspan="3">Cellule 6</td>
	</tr>
</table>

Je voudrai que ma dernière ligne prenne tout la largeur du tableau (sans compter la cellule 1) quand je fusionne les cellules ça modifie le fusionnage des cellules plus hautes(2,3,4 et 5).
Si ce n'est pas assez clair je ferait un dessin du résultat voulu.

salut,
je ne suis pas sûr d'avoir tout compris mais j'imagine que tu t'attends à avoir l'équivalent d'une ligne à quatre cellules avec ton deuxième exemple.
Le problème est qu'il n'y a pas dans ton tableau quatre colonnes "physiques". Techniquement, il n'y en a que trois.

D'une manière générale, si tu spécifies un colspan supérieur au nombre de colonnes réelles sur une ligne (spécifiées avec des <td> ou <th>), cette valeur ne générera pas l'équivalent restant de vraies colonnes.

Il n'y a par exemple aucune différence de rendu avec ces deux codes :

<table>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td colspan=2>3</td>
  </tr>
</table>

<table>
  <tr>
    <td>1</td>
    <td colspan=39>2</td>
  </tr>
  <tr>
    <td colspan=40>3</td>
  </tr>
</table>

Par contre, je te déconseillerais vivement de mettre des valeurs pour le colspan supérieures au nombre de colonnes existantes.

Il faut aussi que tu saches qu'il y a une différence entre des tableaux HTML et des mises en page tabulaires en CSS.
Le premier a pour rôle de présenter des données d'une certaine manière et a un sens sémantique au niveau du document tandis que le second ne sert qu'à mettre en page (rendu visuel seulement).
Modifié par Zelalsan (17 Nov 2017 - 03:12)

Salut

Pour t'aider : voici un tuto court mais clair sur rowspan et colspan
http://fr.html.net/tutorials/html/lesson11.php
et un autre poussé un peu plus loin avec du css
https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/les-tableaux-1

Bonsoir,
Merci à vous pour vos réponses.
pchlj :
Je regarderai tes liens de suite.
On m'a déjà expliqué cette différence entre les tableau et la mise en page, mais pour le moment c'est juste un exercice pour comprendre un peu le fonctionnement des tableaux et essayer de me familiariser un peu avec le html de base, je verrai bientôt le css.
J’espère que ce soit pas trop compliqué.
PS ; je crois avoir bien compris le fonctionnement les rowspan et colspan mais je ne trouve pas la réponse dans ton 1° lien.
Pour ton 2° lien je le consulterai plus tard (je préféré bien comprendre le html avant).


Zelalsan ;
Je vois que je n'ai pas été assez clair.
Je rajoute une image comme je l'avais dit dans mon premier message.
Ce que je voudrais arriver à faire c'est un tableau sur ce modèle :



J'ai édité mon message parceque je l'avais fait en cours (donc un peu à l'arrache), promis je le referai plus
Modifié par pimento-jr (17 Nov 2017 - 19:38)

Bonjour,

J'ai bien lu tous les liens que vous m'avez donné mais je n'y trouve pas la réponse.

Ce que je veux faire c'est un tableau identique à l'image de mon dernier message.
Avec mon code ça me donne ça :


Avec mon code les balises 2,3,4 et 5 ne conserve pas les caractéristiques demandées, sauf si je rajoute un ligne en dessous de la cellule 6.
Je ne comprend vraiment pas ce qui cloche bien que j'ai cherché un peu partout (sur les liens qu'on m'a fourni ici ou par recherche google).

Je bloque là dessus et j'aimerai bien avancer pour passer à l'étape de transformer mes cellules en spans et divs pour enfin commencer à voir un peu le css.

Merci

Bonsoir.

De deux choses l'une : soit c'est prévu dans la spécification, soit ça ne l'est pas.
À priori, ça ne l'est pas.
Quand vous demandez à la Cellule 4 de prendre deux colonnes, l'algorithme comprend 'la largeur des deux cellules d'au-dessus'. Comment lui demander de "s'arrêter au milieu de la largeur de la Cellule 3" ?

Par défaut, les cellules s'adaptent aux dimensions des contenus. Mais même avec "table-layout : fixed" appliqué au tableau, la Cellule 4 prend la largeur des deux cellules au dessus et Cellule 5 sort du tableau…

Une seule solution : 'GridLayout', lequel correspond davantage à ce que vous avez en tête quand vous pensez 'tableau'…

Arf ces ados...

Pourtant la réponse que je t'ai donné aurait pu t'aider à comprendre pourquoi tu as ce résultat.
Les colspan que tu utilises ne se réfèrent pas à 4 colonnes mais 3. Il n'y a dans ton tableau que 3 colonnes physiques et non 4 (en gros, aucune ligne ne contient 4 <td> ou 4 <th>). Par conséquent, lorsque tu écris colspan=4, le moteur de rendu n'ira pas plus loin que 3, car 3 étant la limite existante.
Pareil pour les lignes suivantes. Les colspan=2 ne servent à rien car sur cette ligne, les 3 colonnes du tableau sont déjà occupées.

Par contre, lorsque tu ajoutes une ligne avec 4 colonnes, ton code prend du sens.
Exemple logique ; exemple irrationnel.

Cependant, ta démarche n'est pas la meilleure pour comprendre la mise en page CSS. C'est très très différent d'une "simple" mise en page tabulaire.

bonjour
excusez moi pour ce long moment sans réponse mais avec les cour je n'est pas eu le temps .
merci pour vos réponse cela ma permit de comprendre mes erreur

bonjour
excusez moi pour ce long moment sans réponse mais avec les cour je n'est pas eu le temps .
merci pour vos réponse cela ma permit de comprendre mes erreur
Modifié par pimento-jr (31 Jan 2018 - 17:28)