Images dans tableau - apparition de lignes
JMD
-
telliak Messages postés 3668 Date d'inscription Statut Membre Dernière intervention -
telliak Messages postés 3668 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai des lignes qui apparaissent de la couleur de fond sous chaque image insérée dans un tableau, que ce soit avec firefox ou chrome. Quelqu'un pourrait-il m'éclaire svp ?
Plus précisément : j'ai 4 images 78x52 et mon code est très simple :
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<TABLE>
<tr>
<td><img src="bleu-78-52.gif" id="F11" alt="" height="52" width="78"></td>
<td><img src="vert-78-52.gif" id="F12" alt="" height="52" width="78"></td>
</tr>
<tr>
<td><img src="jaune-78-52.gif" id="F13" alt="" height="52" width="78"></td>
<td><img src="gris-78-52.gif" id="F14" alt="" height="52" width="78"></td>
</tr>
</table>
</body>
</html>
J'ai essayé différentes combinaisons sans succès, telles que td{border: 0px solid yellow; outline: 0px solid pink; margin: 0px; padding: 0px; background-color: #FF0000; width:78px; height:52px;}
et
<TABLE style="border-collapse: collapse; border: none; outline: none; margin: 0px; padding: 0px;">
et <img ... style="object-fit: fill;">
La seule chose qui marche, mais ça m'ennuie, c'est de supprimer la première ligne <!DOCTYPE html>
Merci par avance.
J'ai des lignes qui apparaissent de la couleur de fond sous chaque image insérée dans un tableau, que ce soit avec firefox ou chrome. Quelqu'un pourrait-il m'éclaire svp ?
Plus précisément : j'ai 4 images 78x52 et mon code est très simple :
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<TABLE>
<tr>
<td><img src="bleu-78-52.gif" id="F11" alt="" height="52" width="78"></td>
<td><img src="vert-78-52.gif" id="F12" alt="" height="52" width="78"></td>
</tr>
<tr>
<td><img src="jaune-78-52.gif" id="F13" alt="" height="52" width="78"></td>
<td><img src="gris-78-52.gif" id="F14" alt="" height="52" width="78"></td>
</tr>
</table>
</body>
</html>
J'ai essayé différentes combinaisons sans succès, telles que td{border: 0px solid yellow; outline: 0px solid pink; margin: 0px; padding: 0px; background-color: #FF0000; width:78px; height:52px;}
et
<TABLE style="border-collapse: collapse; border: none; outline: none; margin: 0px; padding: 0px;">
et <img ... style="object-fit: fill;">
La seule chose qui marche, mais ça m'ennuie, c'est de supprimer la première ligne <!DOCTYPE html>
Merci par avance.
Configuration: Windows / Firefox 69.0
A voir également:
- Images dans tableau - apparition de lignes
- Tableau word - Guide
- Tableau ascii - Guide
- Trier un tableau excel - Guide
- Tableau croisé dynamique - Guide
- Imprimer tableau excel sur une page - Guide
4 réponses
Bonjour,
les tableaux ne sont pas fait pour ça ils sont réservés aux données tabulaires depuis plus de 10 ans.
C'est une erreur qui aura un grave impact sur votre site si vous utilisez un tableau pour faire la mise en page alors que c'est le rôle de CSS.
les tableaux ne sont pas fait pour ça ils sont réservés aux données tabulaires depuis plus de 10 ans.
C'est une erreur qui aura un grave impact sur votre site si vous utilisez un tableau pour faire la mise en page alors que c'est le rôle de CSS.
JMD
Merci octopot pour votre réponse très rapide. Sur le fond, 1/ Si les tableaux ne sont pas faits pour cela, ils ne me semblent pas réservés aux données tabulaires puisque justement il y a la possibilité de mettre role="presentation" (ce qui ne change toutefois rien à mon problème). 2/ J'ai essayé du CSS (cf. l'attribut style utilisé). Je vais quand même suivre votre conseil pour faire les choses de façon plus orthodoxe.
Salut,
La seule chose qui marche, mais ça m'ennuie, c'est de supprimer la première ligne <!DOCTYPE html>
Contrairement à ce que l'on pourrait croire, HTML et CSS ne se manipulent pas au pifomètre et ils nécessitent une formation minimale pour obtenir des résultats censés.
Il existe de nombreux sites mettant le pied à l'étrier, tels que celui-ci, par exemple.
La seule chose qui marche, mais ça m'ennuie, c'est de supprimer la première ligne <!DOCTYPE html>
Contrairement à ce que l'on pourrait croire, HTML et CSS ne se manipulent pas au pifomètre et ils nécessitent une formation minimale pour obtenir des résultats censés.
Il existe de nombreux sites mettant le pied à l'étrier, tels que celui-ci, par exemple.
J'ai certainement encore beaucoup de choses à apprendre sur HTML et CSS mais je n'ai certainement pas besoin d'une formation minimale et de mettre le pied à l'étrier. Je vous recommande de lire "Les mots sont des fenêtres - initiation à la communication non violente", de Marshall Rosenberg, Edition La Découverte.
Bonjour
Je ne vois pas le rapport entre le livre que tu proposes et la réponse donnée..
Quoi qu'il en soit, si tu aimes la lecture je te propose ce site
https://www.cosmopolitan.fr/,savoir-accepter-les-critiques-ca-s-apprend,1959807.asp
Je ne vois pas le rapport entre le livre que tu proposes et la réponse donnée..
Quoi qu'il en soit, si tu aimes la lecture je te propose ce site
https://www.cosmopolitan.fr/,savoir-accepter-les-critiques-ca-s-apprend,1959807.asp
Pour ceux qui viendraient sur ce forum avec le même problème que moi, voici une solution qui marche :
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<div id="containeur" style="width:200px; display: flex; flex-wrap: wrap; align-content: flex-start; ">
<img src="bleu-78-52.gif" alt="" height="52" width="78">
<img src="vert-78-52.gif" alt="" height="52" width="78">
<img src="jaune-78-52.gif" alt="" height="52" width="78">
<img src="gris-78-52.gif" alt="" height="52" width="78">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<div id="containeur" style="width:200px; display: flex; flex-wrap: wrap; align-content: flex-start; ">
<img src="bleu-78-52.gif" alt="" height="52" width="78">
<img src="vert-78-52.gif" alt="" height="52" width="78">
<img src="jaune-78-52.gif" alt="" height="52" width="78">
<img src="gris-78-52.gif" alt="" height="52" width="78">
</div>
</body>
</html>
Re,
Je ne comprends pas ce qui t'a amené à faire cette diatribe sur mon commentaire.
Je n'ai fait rien d'autre que vouloir t'aider, sans violence, et je regrette le temps que j'y ai perdu.
Je maintiens que la lecture du site que je propose (il en existe bien d'autres) amène à l'écriture d'un code conforme à l’« esprit » des langages, alors qu'une approche au feeling, à partir de bouts d'exemples, conduit à tout mettre à la poubelle un jour ou l'autre, après avoir vainement cherché à corriger un enchevêtrement d'erreurs.
La « solution » que tu proposes, en dehors de toute une utilisation rigoureuse de CSS, est partiellement du niveau des années 1990 et ne saurait être recommandée.
Je ne comprends pas ce qui t'a amené à faire cette diatribe sur mon commentaire.
Je n'ai fait rien d'autre que vouloir t'aider, sans violence, et je regrette le temps que j'y ai perdu.
Je maintiens que la lecture du site que je propose (il en existe bien d'autres) amène à l'écriture d'un code conforme à l’« esprit » des langages, alors qu'une approche au feeling, à partir de bouts d'exemples, conduit à tout mettre à la poubelle un jour ou l'autre, après avoir vainement cherché à corriger un enchevêtrement d'erreurs.
La « solution » que tu proposes, en dehors de toute une utilisation rigoureuse de CSS, est partiellement du niveau des années 1990 et ne saurait être recommandée.
