Tabelle e dati tabellari con CSS

[ThePassenger]

Gestire una tabella con i fogli di stile è un'impresa anche per chi ha ha ormai una certa familiarità con i CSS.
Non penso di essere un drago coi fogli di stile, ma penso di cavicchiarmela abbastanza discretamente.
Però quando si tratta di gestire una tabella con i fogli di stile non riesco mai a ottenere il risultato che voglio.
Chiarisco subito che non uso più le tabelle per il layout da un sacco di tempo e questo anche grazie all'aiuto di questo forum. Mi riferisco all'utilizzo di tabelle per inserire dati tabellari.
Nello specifico voglio realizzare una tabella che contenga una "discografia", con 5 colonne così distribuite:

• Link all'immagine della copertina
• Titolo
• Casa discografia
• Numero di catalogo
• Anno di uscita

Il problema però è quando si tratta di dimensionare in modo stabile le celle della tabella: se per esempio la prima voglio che sia delle dimensioni dell'immagine utilizzata per il link o la seconda che contiene il titolo che sia più larga delle altre...
Una cosa del genere non funziona per niente neanche attribuendo una classe alla cella.

td {
width: 25px; 
padding 2px;
}

Insomma, come faccio a gestire la formattazione della tabella per darle un aspetto gradevole e non affidarmi al semplice contenuto della stessa per la larghezza delle celle?
Vorrei evitare di ricorrere al "vecchio" sistema

<td width="25">

Ah, preciso che ho cercato OVUNQUE un tutorial, una guida o un post in questo forum che ne parlasse, senza trovare nulla che potesse aiutarmi.

Grazie.

[OcchioCrepato]

potresti crearti delle classi con le varie dimensioni in pixel

.w20p{width:20px}
.w50p{width:50px}

o in percentuale

.w10{width:10%}
.w20{width:20%}
.w40{width:40%}

.w100{width:100%}

da assegnare alle varie colonne

<table border="1" cellpadding="2" cellspacing="0" class="w100" frame="border" rules="all" summary="Questa tabella visualizza l'elenco degli album">
<caption>Album</caption>
<thead>
<tr>
<th class="w20">Copertina</th>
<th class="w40">Titolo</th>
<th class="w20">Casa discografia</th>
<th class="w10">catalogo</th>
<th class="w10">Anno </th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>

</table>

[ThePassenger]

Originariamente inviato da OcchioCrepato
potresti crearti delle classi con le varie dimensioni in pixel
(...)

Sì, ma non funziona.
Ho provato sia con

	table-layout: fixed;

che con

	table-layout: auto;

ma in entrambi i casi prende solamente la prima colonna, mentre le comunque le fa tutte uguali.
Mah...

[OcchioCrepato]

non capisco io utilizzo il metodo che ti ho descritto sopra e mi funziona.
hai provato l'esempio che ti ho descritto?

[ThePassenger]

Hai ragione, funziona!
Adesso non posso metterla online per farti vedere, ma più tardi la carico e ti faccio vedere.
Naturalmente il risultato è buono per Firefox e Opera, Explorer fa sempre un po' quello che je pare, ma è accettabile.
Ma perché prima non mi funzionava? Boh...
Grazie!

[ThePassenger]

Eccolo online:
http://rizsamaritano.altervista.org/dischi.htm

Adesso vorrei inserire un guestbook con asp e database access... c'è un tutorial facile facile?
Vabbeh, ma adesso sto andando OT.

[OcchioCrepato]

Potresti effettuare delle migliorie

visto che tutte le colonne tranne quella del titolo hanno il testo centrato potresti mettere una classe nelle riga "testocentrato".
per mettere il testo a sinistra basta mettere una classe "testosx" solamente nella cella dove viene inserito il titolo dell'album.

in questo modo alleggerisci la pagina ed ottieni il medesimo risultato.
la larghezza delle celle è sufficiente metterla nelle colonne della prima riga


Altra cosa inserisci sempre caption thead tbody

<table class="tabdisco">
<caption class="discoheader">7&#034;</caption>

<thead>
<tr>
	<th class="discocover">COVER</th>
	<th class="discotitolo">TITOLO</th>
	<th class="discoetichetta">ETICHETTA</th>
	<th class="discocatalogo">CAT</th>
	<th class="discoanno">ANNO</th>
</tr>
</thead>
<tbody>
<tr class="testocentrato">
	<td >[img]img/discosmall/ipmip3175.jpg[/img]</td>
	<td class="testosx">Angelina/Notte di piombo</td>

	<td>IPM</td>
	<td>IP3175</td>
	<td></td>
</tr>
<tr class="testocentrato">
	<td>[img]img/discosmall/c172.jpg[/img]</td>
	<td class="testosx">Tango Vigliacco/Tango dell'Evaso</td>
	<td>Combo</td>
	<td>172</td>
	<td>1960</td>
</tr>
</tbody>
</table>

per info su come costruire una tabella accessibile guarda qua

http://www.diodati.org/w3c/html401/s...tml#edef-TABLE

[ThePassenger]

Uhm... sì, per le classi del testo centrato/a sinistra hai ragione, non ci avevo pensato.

Per il caption... uhm... però così non mi si allinea con la tabella, si stacca da essa e si "attacca" in alto a sx e non ha i bordi... non è più pratico tenerla nel thead come th col colspan senza diventare matti?

[cleverboy]

per info su come costruire una tabella accessibile guarda qua
http://www.diodati.org/w3c/html401/...html#edef-TABLE

Questo è un ottimo punto di partenza per l'accessibilità! Ottimo consiglio

Ma mi pare di capire che ci sono anche problemi con Explorer.
Dal basso della mia esperienza come programmatore di siti accessibili (lo faccio per lavoro ) ti consiglio di fare una cosa del genere.

Premesso che stiamo parlando di IE6 e non di IE7 (per il quale si dovrebbe dire molto altro) devi fare così:

/* MOZILLA */
.w20p{width:20px}
.w50p{width:50px}

/* EXPLORER 6 */
* html .w20p{width:22px}
* html .w50p{width:52px}

Le larghezze le ho messe a caso! Basta adattarle a tuo piacimento!

Se invece parliamo di IE7 allora devi ricordare che nel CSS si deve seguire questo ordine
1) CSS per IE7
2) CSS per MOZILLA (o cmq qualcosa che non sia per IE7)
3) CSS per IE6 (opzionale... spesso non serve)

La stessa roba di sopra si scriverebbe così (misure sempre a casaccio!)

/* IE7 */
.w20p{width:20px}
.w50p{width:50px}

/* MOZILLA */
html>/**/body .w20p{width:24px}
html>/**/body .w50p{width:54px}

/* EXPLORER 6 */
* html .w20p{width:22px}
* html .w50p{width:52px}

CIAO