Mise en forme d'une ligne ou d'une colonne
Résolu
Oskiator
Messages postés
216
Statut
Membre
-
Oskiator Messages postés 216 Statut Membre -
Oskiator Messages postés 216 Statut Membre -
Bonjour,
Je cherche à mettre en forme une ligne ou une colonne d'un tableau, sans avoir à mettre un style à chaque <td> d'une ligne ou d'une colonne.
J'aimerais pouvoir appliquer un style sur n'importe quelle colonne (par exemple, j'aimerais pouvoir faire que les 2 première colonnes de mon tableau soit d'une couleur, et qu'en suite les colonnes qui suivent soient de 2 couleurs alternées.)
Merci d'avance !
Oskiator
Je cherche à mettre en forme une ligne ou une colonne d'un tableau, sans avoir à mettre un style à chaque <td> d'une ligne ou d'une colonne.
J'aimerais pouvoir appliquer un style sur n'importe quelle colonne (par exemple, j'aimerais pouvoir faire que les 2 première colonnes de mon tableau soit d'une couleur, et qu'en suite les colonnes qui suivent soient de 2 couleurs alternées.)
Merci d'avance !
Oskiator
A voir également:
- Mise en forme d'une ligne ou d'une colonne
- Mise en forme conditionnelle excel - Guide
- Déplacer une colonne excel - Guide
- Mise en forme tableau word - Guide
- Partager photos en ligne - Guide
- Trier une colonne excel - Guide
4 réponses
tu mets une class à tes colonnes
ex: <td class="couleur1"></td>
<td class="couleur1"></td>
<td class="couleur2"></td>
<td class="couleur3"></td>
<td class="couleur2"></td>
<td class="couleur3"></td>
<td class="couleur2"></td>
<td class="couleur3"></td>
et tu fais du CSS
.couleur1{
//la couleur voulue
}
etc..
ex: <td class="couleur1"></td>
<td class="couleur1"></td>
<td class="couleur2"></td>
<td class="couleur3"></td>
<td class="couleur2"></td>
<td class="couleur3"></td>
<td class="couleur2"></td>
<td class="couleur3"></td>
et tu fais du CSS
.couleur1{
//la couleur voulue
}
etc..
Oskiator
Messages postés
216
Statut
Membre
19
Mais "<td class="couleur1"></td>" ne s'applique qu'à une cellule de la colonne. Je dois donc faire ça pour chaque td, ce que je veux à tout prix éviter parce que le tableau est grand.
ha alors voici une solution en javascript:
<html>
<head>
<script type="text/javascript">
function appliquer_style_table(id_table){
var obj_table=document.getElementById(id_table);
var arrayLignes = obj_table.rows;
//parcours de cet array pour atteindre les td
for(i=0;i<arrayLignes.length;i++){
var array_td = arrayLignes[i].getElementsByTagName('td');
//alert("taille array td: "+array_td.length);
//parcours de cet array pour appliquer un style
for(j=0;j<array_td.length;j++){
if((j % 2) ==0){
//numéro de colonne j pair attention commence à zéro
array_td[j].style.color="red";
}else{
//j impair
array_td[j].style.color="green";
}
}
}
}
</script>
</head>
<body>
<table id="ma_table" border="1">
<tr>
<td>aaee</td><td>tyyy</td><td>jjyjkyk</td><td>illll</td><td>fhklm</td><td>sdfsfbhh</td><td>dfggg</td>
</tr>
<tr>
<td>bfgh</td><td>jjkkk</td><td>dddff</td><td>gfgfhg</td><td>dff</td><td>dgg</td><td>hhghh</td>
</tr>
</table>
<!-- l'appel de la fonction doit être après la table -->
<script type="text/javascript">appliquer_style_table('ma_table')</script>
</body>
</html>
Merci pour ta réponse. Je ne connais pas du tout le javascript. Pourrais-tu encore me dire comment je dois faire pour que ce soit la couleur de fond, et pas la couleur de texte qui change ? Et comment faire pour que la première ligne et les 2 première colonnes soit d'une couleur différentes du reste ?
voilà:
<html>
<head>
<script type="text/javascript">
function appliquer_style_table(id_table){
var obj_table=document.getElementById(id_table);
var arrayLignes = obj_table.rows;
//parcours de cet array pour atteindre les td
for(i=0;i<arrayLignes.length;i++){
var array_td = arrayLignes[i].getElementsByTagName('td');
//alert("taille array td: "+array_td.length);
//parcours de cet array pour appliquer un style
for(j=0;j<array_td.length;j++){
// tu peux mettre le code hexa HTML de la couleur #......
if(j==0){
//premiere col
array_td[j].style.backgroundColor = "yellow"; //la tu peux mettre le code hexa de la couleur #......
}else if(j==1){
//deuxieme col
array_td[j].style.backgroundColor = "green";
}else if((j % 2) ==0){
//numéro de colonne j pair attention commence à zéro
array_td[j].style.backgroundColor = "red";
}else{
//j impair
array_td[j].style.backgroundColor = "white";
}
}
}
}
</script>
</head>
<body>
<table id="ma_table" border="1">
<tr>
<td>aaee</td><td>tyyy</td><td>jjyjkyk</td><td>illll</td><td>fhklm</td><td>sdfsfbhh</td><td>dfggg</td>
</tr>
<tr>
<td>bfgh</td><td>jjkkk</td><td>dddff</td><td>gfgfhg</td><td>dff</td><td>dgg</td><td>hhghh</td>
</tr>
</table>
<script type="text/javascript">appliquer_style_table('ma_table')</script>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function appliquer_style_table(id_table){
var obj_table=document.getElementById(id_table);
var arrayLignes = obj_table.rows;
//parcours de cet array pour atteindre les td
for(i=0;i<arrayLignes.length;i++){
var array_td = arrayLignes[i].getElementsByTagName('td');
//alert("taille array td: "+array_td.length);
//parcours de cet array pour appliquer un style
for(j=0;j<array_td.length;j++){
if(i==0){
//je suppose que ta première ligne est en td aussi
array_td[j].style.backgroundColor = "blue";
}else{
// tu peux mettre le code hexa HTML de la couleur #......
if(j==0){
//premiere col
array_td[j].style.backgroundColor = "yellow"; //la tu peux mettre le code hexa de la couleur #......
}else if(j==1){
//deuxieme col
array_td[j].style.backgroundColor = "green";
}else if((j % 2) ==0){
//numéro de colonne j pair attention commence à zéro
array_td[j].style.backgroundColor = "red";
}else{
//j impair
array_td[j].style.backgroundColor = "white";
}
}
}
}
}
</script>
</head>
<body>
<table id="ma_table" border="1">
<tr>
<td>aaee</td><td>tyyy</td><td>jjyjkyk</td><td>illll</td><td>fhklm</td><td>sdfsfbhh</td><td>dfggg</td>
</tr>
<tr>
<td>bfgh</td><td>jjkkk</td><td>dddff</td><td>gfgfhg</td><td>dff</td><td>dgg</td><td>hhghh</td>
</tr>
</table>
<script type="text/javascript">appliquer_style_table('ma_table')</script>
</body>
</html>
