Allineamento colonne tabella html5

[marco moffa]

Salve volevo capire perché da foto allegata le ultime tre colonne della mia tabella non si allineano con l'intestazione . La tabella é in parte creata in HTML ed in parte popolata dinamicamente con JavaScript. E sono proprio quelle che aggiungo dinamicamente che mi rimangono tutte e tre sotto una sola cella d'intestazione.Screenshot_20191024_031837_com.android.chrome_compress99.jpg

[KillerWorm]

Ciao, si dice che a volte un'immagine valga più di mille parole... ma non è questo il caso

Da quella sola immagine non è possibile chiarire con precisione le cause del problema; è presumibile che ci sia qualcosa di sbagliato nel codice (tag chiusi male o altro che va a sfasciare la struttura della tabella) ma si possono giusto fare delle ipotesi.

Sarebbe utile, se non indispensabile, postare un po' di codice (o meglio, se possibile, il link della pagina in questione) per capire come viene creata e modificata quella tabella.

[marco moffa]

Grazie per la risposta adesso allego qualcosa in più

  <table id="squadre" style="border:solid;width:300px" class="tabella">
  
    <thead>
   <colgroup span="4" width="400px" background-colour="orange"></colgroup>
    <tr style="background-color:orange">
     <th style="border:solid;width:200px">Squadra</td>
    <th id="nome_squadre" style="border:solid"></td>
    <th style="border:solid;width:600px"></td>
     <th style="border:solid"></td>
    </tr >
    <tr style="background-color:yellow">
    <th style="border:solid">Ruolo</td>
  <th style="border:solid" id="nome">Nome</td>
  <th style="border:solid">Squadra</td>
 <th style="border:solid">Quotazione</td>
    </tr>
     </thead>
     
   <tbody id="body" style="border:solid"> 

   <tr id="portieri"><td style="border:solid">Portieri</td></tr>
    <tr id="difensori"><td style="border:solid">Difensori</td></tr>
    <tr id="centrocampisti"><td style="border:solid">Centrocampisti</td></tr>
    <tr id="attaccanti"><td style="border:solid">Attaccanti</td></tr>
  </tbody> 
   </table>

var riga= document.createElement("tr");
//var riga=document.getElementById(g)
//var riga_ruolo=document.crea teElement("tr")
var cella= document.createElement("td");
var cella1=document.createElement("td")
var cella2=document.createElement("td")
cella.style.border="solid";

cella1.style.border="solid";

cella2.style.border="solid";



cella.innerText=ruol[u][1];
cella1.innerText=ruol[u][2]
cella2.innerText=ruol[u][4]
riga.appendChild(cella);
riga.appendChild(cella1);
riga.appendChild(cella2);
posizione.appendChild(riga)

[marco moffa]

 var riga= document.createElement("tr");
    //var riga=document.getElementById(g)
  //var riga_ruolo=document.crea teElement("tr")
   var cella= document.createElement("td");
   var cella1=document.createElement("td")
   var cella2=document.createElement("td")
   cella.style.border="solid";
  
   cella1.style.border="solid";
  
   cella2.style.border="solid";
  
  
   
   cella.innerText=ruol[u][1];
   cella1.innerText=ruol[u][2]
   cella2.innerText=ruol[u][4]
   riga.appendChild(cella); 
   riga.appendChild(cella1);
   riga.appendChild(cella2);
   posizione.appendChild(riga)

[KillerWorm]

Manca del codice per capire bene; quella roba va dentro un ciclo???

posizione.appendChild(riga)

Cos'è esattamente "posizione"? Presumo si tratti delle righe già esistenti, cioè quelle relative al ruolo.

In tal caso non puoi inserire un <tr> direttamente dentro un altro <tr>. Considera che ogni tabella deve rispettare una struttura ben precisa che di base è <table><tr><td>...</td></tr></table>.

Ad occhio ti direi che puoi risolvere applicando opportunamente l'attributo rowspan ai <td> laterali. Il valore di rowspan dovrà essere relativo al numero di righe che compongono i dati da inserire. A quel punto potrai creare le nuove righe a seguire con i relativi dati (vedi mio esempio sotto).

In alternativa si potrebbero creare delle mini tabelle che dovranno essere inserite una per ogni cella in cui andranno i nuovi dati, ma la cosa rischia di diventare farraginosa in questo caso.


Altri errori di validazione:

    <thead>
   <colgroup span="4" width="400px" background-colour="orange"></colgroup>
...
     </thead>

L'elemento <colgroup> deve essere un figlio diretto di <table>; non va posto dentro <thead>; eventualmente va messo prima.

Personalmente farei a meno di usare tale elemento per formattare la tabella; ti consigli invece di fare uso dei CSS, magari definendo delle regole da includere nel documento (dentro <head>) e non in-linea nei tag della tabella.

L'attributo background-colour non si può sentire; a parte l'errore ortografico (la u in più in colour) non esiste comunque un attributo HTML background-color (che tuttalpiù è una proprietà CSS), magari sarebbe possibile usare l'attributo bgcolor ma non è comunque consentito per questo elemento. Anche qui, sempre meglio usare il CSS, come poi hai fatto nei <tr> sotto, ma meglio includere lo stile nel documento ed evitare di sporcare i contenuti con style in-linea.

Ancora, l'uso dell'attributo width per il colgroup non è supportato in HTML5; usare il CSS.

Analogamente la proprietà width, anche se applicata col CSS, non puoi definirla per le singole celle in questo modo:

<th style="border:solid;width:200px">

infatti le celle, le relative righe e colonne, nonché l'intera tabella, normalmente si dimensionano in automatico in base ai loro contenuti. Certo, è possibile impostare comunque delle dimensioni, magari all'intera tabella o anche alle colonne, ma non come hai fatto tu. In alcuni casi è necessario applicare alla tabella la regola table-layout:fixed attraverso il CSS.

Qui qualche pasticcio:

<th style="border:solid;width:200px">Squadra</td>

nelle varie righe simili a questa, hai aperto un <th> ma poi hai usato </td> per la chiusura. Chiaramente va corretto; o utilizzi <th>...</th> o utilizzi <td>...</td>.

Infine, di norma per tutte le righe di una tabella è necessario definire uno stesso numero di colonne, altrimenti avresti un codice non valido, come nel tuo caso. E' vero che i dati li stai inserendo dinamicamente, ma sarebbe comunque opportuno avere una struttura iniziale che sia valida.

Per verificare la validità del codice ti consiglio l'uso di un validatore (ad esempio questo).

Un ultimo consiglio: non capisco l'uso di quegli id che hai applicato ai vari elementi della tabella. Partendo dal fatto che un id deve essere univoco, in vista di avere magari diverse istanze di quella stessa tabella (in cui magari cambiano giusto i contenuti ma non la struttura base) sarebbe meglio usare delle classi se ti serve ad esempio fare riferimento, via script, ai vari elementi all'interno di una tabella; magari usare l'id solo nel tag principale <table> se ti serve distinguerlo da altre possibili istanze dello stesso tipo di tabella. Sono giusto dei consiglio.

Qui quella che potrebbe essere la tabella di base:

<!DOCTYPE HTML>
<html lang="it">
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style>
      .tabella-ruoli {
        table-layout: fixed;
        border-collapse: collapse;
        width: 800px;
        font: 14px sans-serif;
      }
      .tabella-ruoli .tabella-ruoli_nome {
        font-style: italic;
      }
      .tabella-ruoli,
      .tabella-ruoli th,
      .tabella-ruoli td {
        border: 1px solid Gray;
        padding: 3px;
      }
      .tabella-ruoli > thead > tr:nth-child(1){
        background-color: Orange;
      }
      .tabella-ruoli > thead > tr:nth-child(2){
        background-color: Yellow;
      }
      .tabella-ruoli > tbody th{
        background-color: WhiteSmoke;
      }
      .tabella-ruoli td:nth-child(2),
      .tabella-ruoli td:nth-child(3){
        text-transform: uppercase;
      }
    </style>
  </head>
  <body>
  
    <table id="squadre" class="tabella-ruoli">
      <thead>
        <tr>
          <th>Squadra</th>
          <th class="tabella-ruoli_nome" colspan="3"></th>
        </tr >
        <tr>
          <th>Ruolo</th>
          <th>Nome</th>
          <th>Squadra</th>
          <th>Quotazione</th>
        </tr>
      </thead>
      <tbody> 
        <tr class="tabella-ruoli_portieri">      <th>Portieri</th>      <td colspan="3"></td></tr>
        <tr class="tabella-ruoli_difensori">     <th>Difensori</th>     <td colspan="3"></td></tr>
        <tr class="tabella-ruoli_centrocampisti"><th>Centrocampisti</th><td colspan="3"></td></tr>
        <tr class="tabella-ruoli_attaccanti">    <th>Attaccanti</th>    <td colspan="3"></td></tr>
      </tbody> 
    </table>
    
  </body>
</html>

Chiaramente il problema in oggetto è ancora irrisolto perché ora bisogna capire come popolare la tabella; senza vedere il resto del tuo script non riesco a capire qual è la struttura dei dati in arrivo e quali criteri stai usando per trattarli e appiccicarli alla tabella; se puoi dare qualche altra indicazione posso provare ad abbozzare qualche riga di JavaScript.

[marco moffa]

Grazie del tuo intervento. Ho risolto da me usando rowspan.

[KillerWorm]

Bene, mi fa piacere che tu sia riuscito autonomamente

Nel frattempo ho provato a mettere giù un po' di script, posto una possibile soluzione, magari può tornare utile a qualcuno:

<!DOCTYPE HTML>
<html lang="it">
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style>
      .tabella-ruoli {
        table-layout: fixed;
        border-collapse: collapse;
        width: 800px;
        max-width: 100%;
        font: 14px sans-serif;
      }
      .tabella-ruoli .tabella-ruoli_nome {
        font-style: italic;
      }
      .tabella-ruoli,
      .tabella-ruoli th,
      .tabella-ruoli td {
        border: 1px solid Gray;
        padding: 3px;
        text-align: center;
        word-break: break-all;
      }
      .tabella-ruoli > thead > tr:nth-child(1){
        background-color: Orange;
      }
      .tabella-ruoli > thead > tr:nth-child(2){
        background-color: Yellow;
      }
      .tabella-ruoli > tbody > tr[class] > *{
        border-top-width: 2px;
      }
      
      .tabella-ruoli > tbody th{
        background-color: WhiteSmoke;
      }
      
      .tabella-ruoli td:nth-of-type(1),
      .tabella-ruoli td:nth-of-type(2){
        text-transform: uppercase;
      }
    </style>
  </head>
  <body>
  
    <table id="squadre" class="tabella-ruoli">
      <thead>
        <tr>
          <th>Squadra</th>
          <th class="tabella-ruoli_nome" colspan="3"></th>
        </tr >
        <tr>
          <th>Ruolo</th>
          <th>Nome</th>
          <th>Squadra</th>
          <th>Quotazione</th>
        </tr>
      </thead>
      <tbody> 
        <tr class="tabella-ruoli_portieri">      <th>Portieri</th>      <td colspan="3"></td></tr>
        <tr class="tabella-ruoli_difensori">     <th>Difensori</th>     <td colspan="3"></td></tr>
        <tr class="tabella-ruoli_centrocampisti"><th>Centrocampisti</th><td colspan="3"></td></tr>
        <tr class="tabella-ruoli_attaccanti">    <th>Attaccanti</th>    <td colspan="3"></td></tr>
      </tbody> 
    </table>
    
    <script>
      function aggiornaTabellaRuoli(sel,nom,arr){
        var tabs = document.querySelectorAll(sel);
        for (let t = 0; t < tabs.length; t++) {
          let tab = tabs[t];
          tab.querySelector('.tabella-ruoli_nome').innerText = nom;
          let righeRuoli = {
            p: tab.querySelector('.tabella-ruoli_portieri')
           ,d: tab.querySelector('.tabella-ruoli_difensori')
           ,c: tab.querySelector('.tabella-ruoli_centrocampisti')
           ,a: tab.querySelector('.tabella-ruoli_attaccanti')
          }
          for (let r = 0; r < arr.length; r++) {
            let dat = arr[r];
            let rigaRuolo = righeRuoli[dat[0].toLowerCase()];
            if (!rigaRuolo) continue;
            let strTd = '<td>'+dat[1]+'</td><td>'+dat[2]+'</td><td>'+dat[3]+'</td>';
            if (rigaRuolo.querySelector('td:only-of-type')){
              rigaRuolo.deleteCell(1);
              rigaRuolo.insertAdjacentHTML('beforeend', strTd);
            } else {            
              let tr = document.createElement('tr');
              rigaRuolo.insertAdjacentHTML('afterend', '<tr>'+strTd+'</tr>');
              rigaRuolo.querySelector('th').rowSpan++;
            }
          }
        }
      }
      
      aggiornaTabellaRuoli(
        '#squadre'
       ,'Alfa Team'
       ,[
          ['p','Handanovic','int',0]
         ,['d','Izzo','tor',0]
         ,['c','Chiesa','fio',0]
         ,['c','Milinkovic-Savic','laz',0]
         ,['d','Hateboer','ata',0]
         ,['a','Cristiano Ronaldo','juv',0]
         ,['p','Meret','nap',0]
         ,['d','Kalarov','rom',0]
         ,['a','Zapata D','ata',0]
         ,['a','Immobile','laz',0]
         ,['a','Belotti','tor',0]
         ,['d','N\'Koulou','tor',0]
         ,['c','Bernardeschi','juv',0]
         ,['d','Acerbi','laz',0]
         ,['c','Callejon','nap',0]
         ,['a','Higuain','juv',0]
         ,['p','Gollini','ata',0]
         ,['c','Under','rom',0]
         ,['a','Milik','nap',0]
         ,['c','Verdi','nap',0]
         ,['c','Kurtic','spa',0]
         ,['d','Alex Sandro','juv',0]
         ,['d','Mancini G','rom',0]
         ,['d','De Ligt','juv',0]
         ,['c','Bonaventura','mil',0]
        ]
      );
      
    </script>
   
  </body>
</html>