Sujet Précédent Sujet Suivant

Etirer son tableau HTML à la taille de l'écran

Fermé
mrcbb Messages postés 3 Date d'inscription samedi 12 avril 2014 Statut Membre Dernière intervention 13 avril 2014 - 12 avril 2014 à 14:25
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 14 avril 2014 à 03:46
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>
A voir également:

4 réponses

Réponse 1 / 4
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
12 avril 2014 à 14:47
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%
8
Réponse 2 / 4
mrcbb Messages postés 3 Date d'inscription samedi 12 avril 2014 Statut Membre Dernière intervention 13 avril 2014
12 avril 2014 à 15:24
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%;
}
0
Réponse 3 / 4
mrcbb Messages postés 3 Date d'inscription samedi 12 avril 2014 Statut Membre Dernière intervention 13 avril 2014
13 avril 2014 à 01:34
S'IL VOUS PLAIT AIDEZ MOI :( :(
0
Réponse 4 / 4
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
13 avril 2014 à 16:00
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 !
0
mrcbb
13 avril 2014 à 20:30
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
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
14 avril 2014 à 03:46
essaie width 100%
0

Discussions similaires

Ecran iphone qui est trop grand
patorp -
Proulx -

144 réponses
Bibliothèque
cosjac85 -
renard bleu -

3 réponses
Remettre l'écran en taille normale
Floriane -
Cindy64000 -

24 réponses