Tabella in css: allineamento celle

[disaster.net]

Buon tutto

sto cercando di capire come fare una tabella DIV + CSS
ed ho trovato questo generatore
https://divtable.com/table-styler/

il mio problema è che TUTTE le celle generate sono giustifica te in un unico verso, destra centro oppure sinistra...

vorrei capire come fare per avere alcune celle a destra, altre in centro altre a sinistra... pre allineare etichette (a sinistra) codici (al centro) importi (a destra)

mi potreste aiutare ?

Grazie
Flavio


// HTML

<div class="divTable blueTable">
<div class="divTableHeading">
<div class="divTableRow">
<div class="divTableHead">head1</div>
<div class="divTableHead">head2</div>
<div class="divTableHead">head3</div>
<div class="divTableHead">head4</div>
</div>
</div>
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">cell1_1</div>
<div class="divTableCell">cell2_1</div>
<div class="divTableCell">cell3_1</div>
<div class="divTableCell">cell4_1</div>
</div>
<div class="divTableRow">
<div class="divTableCell">cell1_2</div>
<div class="divTableCell">cell2_2</div>
<div class="divTableCell">cell3_2</div>
<div class="divTableCell">cell4_2</div>
</div>
<div class="divTableRow">
<div class="divTableCell">cell1_3</div>
<div class="divTableCell">cell2_3</div>
<div class="divTableCell">cell3_3</div>
<div class="divTableCell">cell4_3</div>
</div>
<div class="divTableRow">
<div class="divTableCell">cell1_4</div>
<div class="divTableCell">cell2_4</div>
<div class="divTableCell">cell3_4</div>
<div class="divTableCell">cell4_4</div>
</div>
</div>
</div>
<div class="blueTable outerTableFooter">
<div class="tableFootStyle">
<div class="links"><a href="#">&laquo;</a> <a class="active" href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">&raquo;</a></div>
</div>
</div>

// CSS

div.blueTable {
  border: 1px solid #1C6EA4;
  background-color: #EEEEEE;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
.divTable.blueTable .divTableCell, .divTable.blueTable .divTableHead {
  border: 1px solid #AAAAAA;
  padding: 3px 2px;
}
.divTable.blueTable .divTableBody .divTableCell {
  font-size: 13px;
}
.divTable.blueTable .divTableRow:nth-child(even) {
  background: #D0E4F5;
}
.divTable.blueTable .divTableHeading {
  background: #1C6EA4;
  background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  border-bottom: 2px solid #444444;
}
.divTable.blueTable .divTableHeading .divTableHead {
  font-size: 15px;
  font-weight: bold;
  color: #FFFFFF;
  border-left: 2px solid #D0E4F5;
}
.divTable.blueTable .divTableHeading .divTableHead:first-child {
  border-left: none;
}


.blueTable .tableFootStyle {
  font-size: 14px;
  font-weight: bold;
  color: #FFFFFF;
  background: #D0E4F5;
  background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  border-top: 2px solid #444444;
}
.blueTable .tableFootStyle {
  font-size: 14px;
}
.blueTable .tableFootStyle .links {
     text-align: right;
}
.blueTable .tableFootStyle .links a{
  display: inline-block;
  background: #1C6EA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}
.blueTable.outerTableFooter {
  border-top: none;
}
.blueTable.outerTableFooter .tableFootStyle {
  padding: 3px 5px; 
}
/* DivTable.com */
.divTable{ display: table; }
.divTableRow { display: table-row; }
.divTableHeading { display: table-header-group;}
.divTableCell, .divTableHead { display: table-cell;}
.divTableHeading { display: table-header-group;}
.divTableFoot { display: table-footer-group;}
.divTableBody { display: table-row-group;}

[KillerWorm]

Ciao, quel generatore ti mostra un esempio di codice HTML col relativo CSS, dove ogni elemento della tabella è rappresentato da una classe; potresti aggiungere delle classi manualmente e usarle per definirne l'allineamento, oppure usare altri tipi di selettori, ad esempio nth-child per poter selezionare tutte le celle della stessa colonna.

Non mi è chiaro però a cosa ti riferisci quando parli di etichette, codici e importi; nell'esempio di codice che hai postato non vedo questi riferimenti. Puoi chiarire?



[Mod]
Non sei nuovo del forum, dovresti sapere da regolamento che è bene usare gli appositi tag di formattazione quando si posta del codice. Per ora ho corretto io, fai attenzione in futuro. Grazie.

[disaster.net]

Ciao e buon tutto.
Grazie perla correzione.
In effetti sono un pochino "antico" del forum ma lo uso talmente di rado e per cose strane che non ho mai dovuto quotare un listato. normalmente bazzico nel topic PHP

premessa
da anni uso un vecchissimo blog (flatnuke) come framework per un paio di progetti di gestionali ad uso personale
è angoscioso, lo so, ma fa una minima autenticazione utente ed ha quel set di "cose base" che facilitano la scrittura di un codice PHP-Sqlite diciamo "verticale"
(tanto lo faccio praticamente solo per me.... )

volevo sostituire il il tema che attualmente è fuso con parte del codice PHP ma mi sono trovato molto preso male
in particolare le tabelle classiche <table></table> mandano a peripatetiche la grafica prima ancora di cominciare...

il 99% degli output di un gestionale sono tabelle
come piano dei conti, primanota... (giusto per fare alcuni esempi che tutti conoscono)

le tabelle hanno 3 tipi di dato
Etichetta testo , giustificato a sinistra
Numero "indice" al centro
importi giustificati a destra
come una lista di un chart
numero codice | descrizione | importo
(centrato) | (allineato sinistra) | (allineato destra)

quando genero una tabella anziché usare il

<td align = center>$indice</td>

volevo usare qualcosa di più elegante.... (e meno antico)

Flavio

[KillerWorm]

Capito ma, giusto un'osservazione, se devono essere riportati dei dati tabellari, sarebbe opportuno usare proprio le tabelle.

Il fatto che diano problemi può dipendere da vari fattori, ma magari si potrebbe cercare di applicare il CSS in modo adeguato su quelle stesse tabelle, senza bisogno di cercare soluzioni alternative poco opportune.

Nel caso, posta un link della pagina in questione, se possibile, dove hai le "vecchie" tabelle, così si cerca di capire come si può intervenire.

Se non è possibile consultare la pagina, prova a postare un esempio di codice delle vecchie tabelle, e chiarisci meglio che risultato vorresti ottenere, magari anche con un immagine.

[disaster.net]

Chiedo scusa se non sono riuscito a rispondere.
non riesco a postare un link un link diretto alle pagine.

Ho cominciato a lavorare per "staccare" le parti di grafica dai form e dalle tabelle... non è semplice perchè come un ....(beep) ho mischiato codice di elaborazione e "output" a video stile polpettone... (non sai che carne ci sia dentro, ma funziona)
appena riesco a capire come ho scritto il codice prometto che riprendo il post.