table esce fuori da div della pagina

[KillerWorm]

Ciao, non ho una soluzione specifica ma vedo un bel po' di pasticci nel codice:

• Nell'immagine vedo che stai usando HTML5 per il quale non è supportato il tag <center>. Vedi nella documentazione cosa puoi invece usare.
• Gli elementi <td> hanno di default display: table-cell; che gli conferisce una disposizione e un comportamento ideali nel contesto del <table> di cui fanno parte. Nel momento in cui gli applichi un valore differente per la proprietà display (nel tuo caso stai applicando display: grid;) non è più garantito il "corretto" funzionamento proprio delle celle di una tabella. Se vuoi che tali elementi si comportino per ciò che sono, lascia pure il valore di default; non vedo infatti un motivo valido per cui tu debba impostarli come grid.
• Nello style del <td> hai scritto "padding: 5px 0px px 0px;" il cui valore è chiaramente non valido (vedi quel "px" che sta li in mezzo da solo). Suppongo sia un banale typo.
• I tag <li> dovrebbero normalmente stare dentro uno dei contenitori preposti alla funzione di liste (<ul>, <ol> o <menu>). Non è consentito inserire direttamente un <li> dentro un <td>. Ad ogni modo non mi è comunque chiaro quale sia il tuo intento nell'uso di un <li> (elemento di lista) in quel contesto.
• Un ulteriore consiglio nell'ambito dello sviluppo di codice web è quello di tenere sempre ben separato lo stile (CSS) dalla struttura (HTML). Vedo invece che stai usando CSS in linea applicato direttamente sui tag; questo, oltre a rendere difficile da gestire l'applicazione dello stile, nel tuo caso va a produrre in output un codice ridondante perché il marckup HTML della tabella sarà costellato di proprietà CSS ripetute identiche per ogni elemento dentro la tabella. Da quel che mi pare di capire hai già un foglio di stile separato in cui definisci la presentazione degli elementi di questa pagina; perché non definire lì anche il CSS degli elementi di tale tabella?

Prima di cercare di arrivare a delle soluzioni riguardo l'oggetto in questione, suggerisco di passare la pagina ad un validatore e correggere tutti gli eventuali errori segnalati.

[Indi22]

Ciao, non ho una soluzione specifica ma vedo un bel po' di pasticci nel codice:

• Nell'immagine vedo che stai usando HTML5 per il quale non è supportato il tag <center>. Vedi nella documentazione cosa puoi invece usare.
• Gli elementi <td> hanno di default display: table-cell; che gli conferisce una disposizione e un comportamento ideali nel contesto del <table> di cui fanno parte. Nel momento in cui gli applichi un valore differente per la proprietà display (nel tuo caso stai applicando display: grid;) non è più garantito il "corretto" funzionamento proprio delle celle di una tabella. Se vuoi che tali elementi si comportino per ciò che sono, lascia pure il valore di default; non vedo infatti un motivo valido per cui tu debba impostarli come grid.
• Nello style del <td> hai scritto "padding: 5px 0px px 0px;" il cui valore è chiaramente non valido (vedi quel "px" che sta li in mezzo da solo). Suppongo sia un banale typo.
• I tag <li> dovrebbero normalmente stare dentro uno dei contenitori preposti alla funzione di liste (<ul>, <ol> o <menu>). Non è consentito inserire direttamente un <li> dentro un <td>. Ad ogni modo non mi è comunque chiaro quale sia il tuo intento nell'uso di un <li> (elemento di lista) in quel contesto.
• Un ulteriore consiglio nell'ambito dello sviluppo di codice web è quello di tenere sempre ben separato lo stile (CSS) dalla struttura (HTML). Vedo invece che stai usando CSS in linea applicato direttamente sui tag; questo, oltre a rendere difficile da gestire l'applicazione dello stile, nel tuo caso va a produrre in output un codice ridondante perché il marckup HTML della tabella sarà costellato di proprietà CSS ripetute identiche per ogni elemento dentro la tabella. Da quel che mi pare di capire hai già un foglio di stile separato in cui definisci la presentazione degli elementi di questa pagina; perché non definire lì anche il CSS degli elementi di tale tabella?

Prima di cercare di arrivare a delle soluzioni riguardo l'oggetto in questione, suggerisco di passare la pagina ad un validatore e correggere tutti gli eventuali errori segnalati.

Ok grazie per tutti i suggerimenti, in questi giorni ci ho lavorato ed in effetti è molto meglio usare i div invece che i td etc. Sto imparando e mi pareva il metodo più semplice, mentre era invece incasinante.
Grazie anche per il validatore, non lo conoscevo e l'ho usato!

Dunque grazie per l'aiuto, ti auguro una meravigliosa giornata!🙏