IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Définir le style des cellules d'un tableau


Sujet :

Tableau en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Consultant coût global
    Inscrit en
    Juillet 2011
    Messages
    108
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Consultant coût global
    Secteur : Enseignement

    Informations forums :
    Inscription : Juillet 2011
    Messages : 108
    Par défaut Définir le style des cellules d'un tableau
    Bonjour,
    Je crée un tableau (à partir d'un script JS) contenant ici 4 colonnes et 4 lignes. Dans le script, le nombre de colonnes est paramétré.
    Je souhaite pouvoir définir la taille des cellules, le nombre maximum de caractères par cellule et positionner le texte au centre de la cellule. Je tourne en rond en essayant de paramétrer la feuille de style (que je mettrai ensuite dans un fichier séparé), mais je n'y arrive pas.
    Le fichier html est en PJ.
    Je remercie toute personne pouvant m'éclairer sur la façon de procéder.
    Cordialement
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    <!DOCTYPE HTML>
    <html>
    <head> 
    	<title>Somme de variables uniformes indépendantes</title>
    	<meta charset="utf-8" />
    <!--	<link rel="stylesheet" href="style.css" />   on peut ajouter type="text/css"-->
    	<style>
                    /* un sélecteur et un bloc de déclarations propriété: valeur */
            p       {
                    color: blue; }
            #letablo {
                    border-collapse: collapse;
                    table-layout:auto;
                    text-align: center;
                    }
            #letablo > th, #letablo > td {
                    colspan:5px;
                    width:5px;
                    text-align: center;
                    }
            </style>
     
    </head> <!-- Fin de la section d'en-tete du document -->
     
    <body>
    <p>Le tableau suivant est généré par un script JS</p>
    bonjour <br>
    Nbre de VA : 4
    <form name='lesva' method='post'>
    <table id="letablo">
    	<tr>
    		<th> </th>
    		<th>Risk 0</th>
    		<th>Risk 1</th>
    		<th>Risk 2</th>
    		<th>Risk 3</th>
    	</tr>
    	<tr>
    		<td>loi</td>
    		<td> <input type='text' name='celule' tabindex="1" > </td>
    		<td> <input type='text' name='celule' tabindex="5"> </td>
    		<td> <input type='text' name='celule' tabindex="9"> </td>
    		<td> <input type='text' name='celule' tabindex="13"> </td>
    	</tr><br>
    	<tr>
    		<td>min</td>
    		<td> <input type='text' name='celule' tabindex="2"> </td>
    		<td> <input type='text' name='celule' tabindex="6"> </td>
    		<td> <input type='text' name='celule' tabindex="10"> </td>
    		<td> <input type='text' name='celule' tabindex="14"> </td>
    	</tr><br>
    	<tr>
    		<td>max</td>
    		<td> <input type='text' name='celule' tabindex="3"> </td>
    		<td> <input type='text' name='celule' tabindex="7"> </td>
    		<td> <input type='text' name='celule' tabindex="11"> </td>
    		<td> <input type='text' name='celule' tabindex="15"> </td>
    	</tr><br>
    	<tr>
    		<td>mode</td>
    		<td> <input type='text' name='celule' tabindex="4"> </td>
    		<td> <input type='text' name='celule' tabindex="8"> </td>
    		<td> <input type='text' name='celule' tabindex="12"> </td>
    		<td> <input type='text' name='celule' tabindex="16"> </td>
    	</tr><br>
    </table>
    </form>

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 209
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 209
    Par défaut
    Bonjour,
    Je souhaite pouvoir définir la taille des cellules,
    c'est du ressort de la propriété CSS width
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    input {
      width: 6em;
    }
    le nombre maximum de caractères par cellule
    c'est du ressort de l'attribut HTML maxlength
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <input type='text' name='celule' tabindex="1" maxlength="5">
    et positionner le texte au centre de la cellule.
    c'est du ressort de la propriété CSS textalign
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    input {
      text-align: center;
    }

  3. #3
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    1- Intéresse-toi à la structure correcte d'une <table> : Les tableaux (XHTML & CSS)

    2- On ne met AUCUNE balise entre <tr> et <td> ou <th> (ici : pas de <br>)

    3-
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    #letablo > th, #letablo > td {
    > signifie "enfent direct".
    Or, il y a un <tr> entre <table> et <td>.

    Donc ceci suffit :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    #letablo th, #letablo td {

    4- colspan n'est pas une propriété CSS.

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo