Dubbio attributi tabelle

[harry80]

Salve,

volevo sviscerare un dubbio che mi porto da un po', nella costruzione di un sito web con struttura a tabelle in HTML, è giusto specificare sia sulla tabella che nelle celle "sempre" gli attributi width e height? Se si, OK, diversamente come giudicare quando non serve mettere l'attributo?

Spero di essere stato chiaro!

[Myaku]

Originariamente inviato da harry80
nella costruzione di un sito web con struttura a tabelle in HTML, è giusto specificare sia sulla tabella che nelle celle "sempre" gli attributi width e height?

è giusto non usare le tabelle per definire la "struttura" della pagina (come più volte detto, le tabelle servono per impaginare dati - appunto - tabellari)
è giusto definire tutto quello che riguarda la presentazione da css (in una corretta progettazione web, l'html ha il compito di descrivere le sole informazioni / contenuti di una pagina, non anche il suo aspetto).

[harry80]

Originariamente inviato da Myaku
è giusto non usare le tabelle per definire la "struttura" della pagina (come più volte detto, le tabelle servono per impaginare dati - appunto - tabellari)
è giusto definire tutto quello che riguarda la presentazione da css (in una corretta progettazione web, l'html ha il compito di descrivere le sole informazioni / contenuti di una pagina, non anche il suo aspetto).

OK, sei stato chiarissimo, ma nel caso di utilizzo delle tabelle per strutturare, come comportarsi?

Ad esempio, meglio

<table width="980" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="10"></td>
    <td width="960"></td>
    <td width="10"></td>
  </tr>
</table> 

o

<table width="980" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="10" height="100%"></td>
    <td width="960" height="100%"></td>
    <td width="10" height="100%"></td>
  </tr>
</table> 

?

[harry80]

U P !

[harry80]

U P !

[Prill]

1. height non è attributo valido per le tabelle (può essere passato via css);
2. in caso di più celle affiancate basterà impostare l'altezza solo sulla prima.

Facendo ricorso ai fogli di stile potresti avere:

#tabella{
width:980px;
height:100%;
border:0;
border-collapse:collapse;
margin:0 auto;
}
#tabella td{
padding:0;
height:100%;
}

e nell'html

<table id="tabella">
  <tr>
    <td width="10"></td>
    <td width="960"></td>
    <td width="10"></td>
  </tr>
</table>

anche la larghezza potrebbe essere assegnata nel css creando classi diverse da assegnare alle varie celle

[harry80]

Originariamente inviato da Prill
1. height non è attributo valido per le tabelle (può essere passato via css);
2. in caso di più celle affiancate basterà impostare l'altezza solo sulla prima.

Facendo ricorso ai fogli di stile potresti avere:

#tabella{
width:980px;
height:100%;
border:0;
border-collapse:collapse;
margin:0 auto;
}
#tabella td{
padding:0;
height:100%;
}

e nell'html

<table id="tabella">
  <tr>
    <td width="10"></td>
    <td width="960"></td>
    <td width="10"></td>
  </tr>
</table>

anche la larghezza potrebbe essere assegnata nel css creando classi diverse da assegnare alle varie celle

Grazie!

Guarda però... il discorso è questo, tornando un attimo al ragionamento del layout a tabelle HTML, chiedevo, è più giusto specificare in tutti i modi gli attributi di larghezza e altezza oppure ci sono dei casi in cui si possono omettere? Sempre tenendo conto dei miei 2 esempi, quale è il più giusto. Riguardo all'altezza in percentuale non presa, io inserisco nell'head come codice

<style type="text/css">
html, body {
    height: 100%;
}
</style> 

P.S. Mi sai consigliare, se esiste, qualche strumento visuale o servizio web per generare in CSS dei layout? Vorrei fare il salto da HTML a CSS e avere tra le mani gli strumenti giusti.

[Prill]

Su una tabella e sulle celle meglio specificare sempre la larghezza, riguardo all'altezza se deve essere fissata, allora occorrerà specificare anche quella. Nel tuo secondo esempio è inutile specificare l'altezza sulle ultime due celle (che si adatteranno all'altezza della prima), è errato specificarla sul tag table che non ha fra i suoi attributi height.
Se il tuo problema è che la tabella non assume un'altezza in percentuale è perché sbagli qualcosa, esempio:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>titolo</title>

<style type="text/css">
html, body {
    height: 100%;
    margin:0;
}
#tabella{
width:980px;
height:100%;
border:0;
border-collapse:collapse;
margin:0 auto;
background:green /* per visualizzare la tabella */
}
#tabella td{
padding:0;
height:100%;
}
</style> 
</head>

<body>
<table id="tabella">
  <tr>
    <td width="10"> </td>
    <td width="960"> </td>
    <td width="10"> </td>
  </tr>
</table>
</body>
</html>

Per quanto riguarda la costruzione di layout senza tabelle, quello che posso consigliarti è lo studio della guida css. Puoi anche cercare e scaricare dei layout semplici già pronti e esercitarti su quelli modificandoli

[harry80]

Originariamente inviato da Prill
Su una tabella e sulle celle meglio specificare sempre la larghezza, riguardo all'altezza se deve essere fissata, allora occorrerà specificare anche quella. Nel tuo secondo esempio è inutile specificare l'altezza sulle ultime due celle (che si adatteranno all'altezza della prima), è errato specificarla sul tag table che non ha fra i suoi attributi height.
Se il tuo problema è che la tabella non assume un'altezza in percentuale è perché sbagli qualcosa, esempio:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>titolo</title>

<style type="text/css">
html, body {
    height: 100%;
    margin:0;
}
#tabella{
width:980px;
height:100%;
border:0;
border-collapse:collapse;
margin:0 auto;
background:green /* per visualizzare la tabella */
}
#tabella td{
padding:0;
height:100%;
}
</style> 
</head>

<body>
<table id="tabella">
  <tr>
    <td width="10"> </td>
    <td width="960"> </td>
    <td width="10"> </td>
  </tr>
</table>
</body>
</html>

Per quanto riguarda la costruzione di layout senza tabelle, quello che posso consigliarti è lo studio della guida css. Puoi anche cercare e scaricare dei layout semplici già pronti e esercitarti su quelli modificandoli

Grazie... ho incominciato a leggere un po' di cosette sui CSS...