Problema con il tag table-tabella annidata

**Gandalf73** · 27-04-2006, 16:24

Ho un grossissimo dubbio accompagnato da un problema con il tag table e relativi attributi.
Per la prima volta mi sono cimentato nella costruzione di una pagina web.
Ho creato due tabelle annidate entrambe mono riga e mono colonna.
La prima con le dimensioni width & height del 100% e l'altra con le dimensioni più piccole (80%)
Ebbene non riesco a centrare quello che dovrebbe essere il 'quadretto' (cioè la seconda tabella monoriga e monocolonna) in verticale avendo messo sotto controllo il tutto attraverso un colore di sfondo.
Riesco a controllare parzialmente la cosa soltanto togliendo height dalla seconda table,inserendolo nel tag <tr> della seconda tabella e ragionando con la percentuale di occupazione dello spazio all'inverso.
Vi mando un cut&paste dell'operato sperando che qualcuno mi possa aiutare non tanto nella risoluzione quanto nel comprendere il perchè si ha questo comportamento.

"<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Lavori in corso</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table width="100%" height="100%" border="5">
<tr>
<td align="center" valign="middle">
<table width="80%" bgcolor="#99FF99" border="5" >
<tr height="7%">
<td>
<div align="center">

<font size="4" face="Arial, Helvetica, sans-serif">
PROVA DELLA CENTRATURA CON RIQUADRO
</font></p>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>".
Variando height dal 7% al 80% ottengo una evidenziazione centrata della stringa "PROVA DELLA CENTRATURA CON RIQUADRO"
Grazie indistintamente a tutti
Ale.

**webdemo** · 27-04-2006, 18:45

Codice PHP:


<style type="text/css">

<!--

.tab1 {

    width:100%;

    height:100%;

    border: 5px solid #999999;

}

.tab2 {

    width:80%;

    height:80%;

    border: 5px solid #999999;

    background-color:#99FF99;

}

-->

</style>

</head>

<body>

<table class="tab1">

<tr>

<td align="center">

<table class="tab2">

<tr>

<td align="center">PROVA DELLA CENTRATURA CON RIQUADRO</td>

</tr>

</table>

</td>

</tr>

</table>

ciaux

**Gandalf73** · 28-04-2006, 10:33

Scusami....ma...visto il fatto che sono un neofita....mi hai suggerito di fare una cosa più pulita ed 'architetturalmente' più valida???
Come ho fatto io perchè non funzionava???Quale vincolo andavo a violare???
Un enorme grazie
Ale.

**webdemo** · 28-04-2006, 10:39

diciamo che ho rispettando la tua scelta di utilizzare <table> al posto di <div>

detto ciò ho semplicemente utilizzato l'html per definire le tue tabelle e gli stili css per attribuire agli elementi uno stile grafico.

Si può fare ancora meglio, ma diciamo che è la strada giusta per migliorare.

il codice che hai postato "funziona" e basta... meglio non utilizzarlo così

ciaux

**Gandalf73** · 28-04-2006, 10:54

Il problema è che non capisco perchè il secondo height va all'inverso....è quello il tarlo...visto che vado sempre a sviscerare i concetti :-).
E' come se la mia seconda tabella venisse centrata in orizzontale,fissata in alto (al centro appunto) e poi togliessi la percentuale in altezza.
Mi sbaglio???
Comunque grazie davvero.....
La tua è una soluzione logica utilizzando gli stili.
Invece come accennavi utilizzando il div come si potrebbe fare???
Ale.

**webdemo** · 28-04-2006, 11:08

Originariamente inviato da Gandalf73
E' come se la mia seconda tabella venisse centrata in orizzontale,fissata in alto (al centro appunto) e poi togliessi la percentuale in altezza.
Ale.

Diciamo una cosa: all'interno di una cella di tabella <td></td> non occorre specificare la centratura in verticale, perché è l'esposizione impostata di default, quindi dicendo <td valign="middle"> dici al fuoco di scottara... Scotta già di suo.

Originariamente inviato da Gandalf73
Invece come accennavi utilizzando il div come si potrebbe fare???
Ale.

Diciamo che strutturalmente le tabelle sarebbe meglio utilizzarle per i tabulati e i div per definire aree per tutti i contenuti. Nessuno ti impedisce di utilizzare <table>, puoi anche validarlo...
È un po' come fare Roma-Milano in camion anziché in auto, puoi farlo tranquillamente ma...

Se vuoi cimentarti con i div, prova a definire uno spazio dove inserire contenuti, anziché con <table> con <div>

il concetto è sempre lo stesso:

<table><tr><td>contenuto</td></tr></table>

<div>contenuto</div>

guarda già quanto codice hai risparmiato... fammi sapere gli sviluppi.

ciaux

**Gandalf73** · 28-04-2006, 12:40

scusami se te lo chiedo ma mi sto avvicinando ora alla vera ingegnerizzazione delle pagine,ma quello che hai inserito all'inizio sono righe di codice php...oppure posso metterle (abituandomi a fare appunto qualcosa di pulito ed ordinato in merito a strutture ed oggetti) in un file '.css'?
Grazie mille
Ale.

**Gandalf73** · 28-04-2006, 12:51

rettifico ancora....ho provato il tuo codice...ma così come sta mi ancora ancora il 'quadretto in verde' in alto al centro...non me lo allinea perfettamente in mezzo alla pagina...esattamente come la prova che hai fatto tu.Come mai?
Un enorme grazie
Ale.

**webdemo** · 28-04-2006, 13:04

probabilmente dipende da Hieght100% se non erro deprecato quindi:

Codice PHP:


<style type="text/css">

<!--

.tab1 {

    width:100%;

    height:500px;

    border: 5px solid #999999;

}

.tab2 {

    width:80%;

    height:20px;

    border: 5px solid #999999;

    background-color:#99FF99;

}

-->

</style>

</head>

<body>

<table class="tab1">

<tr>

<td align="center">

<table class="tab2">

<tr>

<td align="center">PROVA DELLA CENTRATURA CON RIQUADRO</td>

</tr>

</table>

</td>

</tr>

</table>

ciaux

**Gandalf73** · 28-04-2006, 13:08

Concordo con te...ma allora se uno vuole in altezza la percentuale di occupazione perchè sarebbe vincolato a fissare a priori i pixel con scarsa adattabilità a quelle che sono le altezze dei video???
Ale.

Discussione: Problema con il tag table-tabella annidata

Strumenti discussione

Ricerca discussione

Visualizza

Problema con il tag table-tabella annidata

Permessi di invio