Etirer son tableau HTML à la taille de l'écran
mrcbb
Messages postés
3
Date d'inscription
Statut
Membre
Dernière intervention
-
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je veux me faire un petit site sans prétention et surtout sans me prendre la tête. J'ai donc pensé à utiliser photoshop pour faire une image que je découpe en tableau avec l'outil slice puis l'enregistrer en web et ajouter les quelques codes html de bases pour faire mon site (<a href> pour mes liens, <video> pour ma video).
Mon problème (récurent mais j'ai pas trouver de solution dans mon cas), est que je n'arrive pas à faire en sorte que mon tableau s'étire à la taille de l'écran (au risque de déformations que j'assume). J'ai essayé <body width="100%">, j'ai essayer de mettre mon tableau dans un div qui va chercher un id dans une feuille de style avec le width à 100% ({width:100%;} c'est mal en css parait-il), bref j'ai essayer plusieurs choses et rien de concluant. J'imagine bien que avec un minimum de connaissance en html et css j'aurai pas besoin de vous embêter avec se genre de questions qui sont posés 1000x mais je n'est pas le temps de me concentrer sur se domaine.
Si vous avez une solution simple que je n'ai pas forcement besoin de comprendre n'hésitez pas.
En gros: PLEASE HELP!!!!!! Et merci à vous pour votre temps.
Voici mon index:
<html>
<head>
<title>ACCUEIL</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body background="images/bg.png" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (FOND 2.psd) -->
<table id="Table_01" width="1601" height="1101" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="7">
<img src="images/index_01.png" width="1600" height="382" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="382" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<a href="cv.html">
<img src="images/index_02.png" width="263" height="70" alt=""></td>
<td colspan="6">
<img src="images/index_03.png" width="1337" height="40" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="40" alt=""></td>
</tr>
<tr>
<td colspan="4" rowspan="2">
<img src="images/index_04.png" width="293" height="117" alt=""></td>
<td rowspan="7">
<video src="images/video.mp4" width="711" height="398" controls autoplay loop></td>
<td rowspan="9">
<img src="images/index_06.png" width="333" height="678" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="30" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index_07.png" width="263" height="87" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="87" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/index_08.png" width="286" height="51" alt=""></td>
<td rowspan="7">
<img src="images/index_09.png" width="270" height="561" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="51" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/index_10.png" width="286" height="86" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="86" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/index_11.png" width="274" height="54" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/index_12.png" width="12" height="139" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="54" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/index_13.png" width="274" height="85" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="85" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img src="images/index_14.png" width="285" height="57" alt=""></td>
<td rowspan="3">
<img src="images/index_15.png" width="1" height="285" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="5" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/index_16.png" width="711" height="280" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="52" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/index_17.png" width="285" height="228" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="228" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="263" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="11" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="11" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="270" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="711" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="333" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
Je veux me faire un petit site sans prétention et surtout sans me prendre la tête. J'ai donc pensé à utiliser photoshop pour faire une image que je découpe en tableau avec l'outil slice puis l'enregistrer en web et ajouter les quelques codes html de bases pour faire mon site (<a href> pour mes liens, <video> pour ma video).
Mon problème (récurent mais j'ai pas trouver de solution dans mon cas), est que je n'arrive pas à faire en sorte que mon tableau s'étire à la taille de l'écran (au risque de déformations que j'assume). J'ai essayé <body width="100%">, j'ai essayer de mettre mon tableau dans un div qui va chercher un id dans une feuille de style avec le width à 100% ({width:100%;} c'est mal en css parait-il), bref j'ai essayer plusieurs choses et rien de concluant. J'imagine bien que avec un minimum de connaissance en html et css j'aurai pas besoin de vous embêter avec se genre de questions qui sont posés 1000x mais je n'est pas le temps de me concentrer sur se domaine.
Si vous avez une solution simple que je n'ai pas forcement besoin de comprendre n'hésitez pas.
En gros: PLEASE HELP!!!!!! Et merci à vous pour votre temps.
Voici mon index:
<html>
<head>
<title>ACCUEIL</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body background="images/bg.png" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (FOND 2.psd) -->
<table id="Table_01" width="1601" height="1101" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="7">
<img src="images/index_01.png" width="1600" height="382" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="382" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<a href="cv.html">
<img src="images/index_02.png" width="263" height="70" alt=""></td>
<td colspan="6">
<img src="images/index_03.png" width="1337" height="40" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="40" alt=""></td>
</tr>
<tr>
<td colspan="4" rowspan="2">
<img src="images/index_04.png" width="293" height="117" alt=""></td>
<td rowspan="7">
<video src="images/video.mp4" width="711" height="398" controls autoplay loop></td>
<td rowspan="9">
<img src="images/index_06.png" width="333" height="678" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="30" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index_07.png" width="263" height="87" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="87" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/index_08.png" width="286" height="51" alt=""></td>
<td rowspan="7">
<img src="images/index_09.png" width="270" height="561" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="51" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/index_10.png" width="286" height="86" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="86" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/index_11.png" width="274" height="54" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/index_12.png" width="12" height="139" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="54" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/index_13.png" width="274" height="85" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="85" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img src="images/index_14.png" width="285" height="57" alt=""></td>
<td rowspan="3">
<img src="images/index_15.png" width="1" height="285" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="5" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/index_16.png" width="711" height="280" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="52" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/index_17.png" width="285" height="228" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="228" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="263" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="11" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="11" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="270" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="711" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="333" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
A voir également:
- Etirer son tableau HTML à la taille de l'écran
- Comment réduire la taille d'un fichier - Guide
- Tableau word - Guide
- Double ecran - Guide
- Tableau ascii - Guide
- Trier un tableau excel - Guide
4 réponses
Salut
Une mise en page ne se fait pas avec la balise table
pour cela il faut utiliser des div et du css
sinon pour qu'un element prenne toute la largeur du parent mettre le width à 100%
Une mise en page ne se fait pas avec la balise table
pour cela il faut utiliser des div et du css
sinon pour qu'un element prenne toute la largeur du parent mettre le width à 100%
Bjr animostab et merci pour ta réactivité.
j'ai déjà essayer de mettre mon tableau dans un div et faire une feuille de style. Mais sans succès. J'ai fait ça:
<html>
<head>
<title>ACCUEIL</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css"/>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="table">
<table width="1601" height="1101" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="7"> ......
</table>
</div>
</html>
et en feuille de style:
body
{
margin:0;
}
#table
{
width:100%;
}
j'ai déjà essayer de mettre mon tableau dans un div et faire une feuille de style. Mais sans succès. J'ai fait ça:
<html>
<head>
<title>ACCUEIL</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css"/>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="table">
<table width="1601" height="1101" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="7"> ......
</table>
</div>
</html>
et en feuille de style:
body
{
margin:0;
}
#table
{
width:100%;
}
la balise table ne sert qu'aux données tabulaires comme par exemple un tableau de produits / tarifs
Voici un lien pour apprendre html et css
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
plus de css
http://css.mammouthland.net/
je ne vais pas aider quelqu'un a faire une mise en page avec table car c'est comme apprendre à quelqu'un à jouer du piano avec 2 doigts
de plus avec css pas besoin de mettre des width dans du html
ex
<table width="1601" ....
table {
width:100%;}
tu as 2 fois witdh !
Voici un lien pour apprendre html et css
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
plus de css
http://css.mammouthland.net/
je ne vais pas aider quelqu'un a faire une mise en page avec table car c'est comme apprendre à quelqu'un à jouer du piano avec 2 doigts
de plus avec css pas besoin de mettre des width dans du html
ex
<table width="1601" ....
table {
width:100%;}
tu as 2 fois witdh !
Merci mais je connais déjà ces sites pour apprendre l'html et le css j'y ai deja passé un peu de temps. C'est rigolo mais c'est pas mon truc. Je dois consacrer mon temps dans un autre domaine et le jours ou j'aurai besoin d'un vrai minimum de site pour me vendre je le ferai... Ou le ferai faire... En attendant pour l'usage que je vais faire de la "me...rde" si dessus ça va me suffir. Je voulais juste savoir si on pouvait étirer un tableau à la taille de l'écran qui le visionne (et j'ai compris que non :) ). En tout cas merci