Définir le style des cellules d'un tableau

**Mopige** · 01/12/2018, 15h07

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>

**NoSmoking** · 04/12/2018, 10h15

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;
}

Invité · 04/12/2018, 12h08

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