tabelle e css

[yagorossi]

sono un principiante: come faccio ad applicare le caratteristiche di una tabella definite in css:

table{border-collapse: collapse}
table,td{border: dashed 1px #666}
tr.alterna td{background-color: #FF00000}

soltanto a una determinata tabella della mia pagina e non a tutte?

[nextart]

ciao io per le tabelle uso questo css

@charset "utf-8";
/* CSS Document */

#itsthetable table a:link {color: #CC6633;}
#itsthetable table a:visited {color: #CC6633;}
#itsthetable table a:hover {color: #999966;}
#itsthetable table a:active {color: #CC6633;}
#itsthetable table a:focus{color: #CC6633;}


#itsthetable table caption {
		padding: 18px 2px 15px 2px;
		color: #cfcfcf;
		background-color: inherit;
		font-weight: normal;
		text-align: centered;
		text-transform: capitalize;
		}

	#itsthetable table{
		width : 99%;
            
             border: 1px solid #D9D9D9;
	}
	#itsthetable table tr td{
		padding: 6px 9px;
		text-align:left;

	}
	#itsthetable table thead th{
		background-color: #006699;
		border-bottom: 1px solid #ccc;
		border-left: 1px solid #D9D9D9;
		font-weight: bold;
		text-align:center;
		padding: 16px 9px;
		color:#fff;
	}
	#itsthetable table tbody tr th{
		background-color: #fff;
		font-weight: normal;
		border-left: none;
		padding: 6px 9px;
		background-color: #E5E5D8;

	}
	#itsthetable table tbody td{
			border-left: 1px solid #D9D9D9;
                        text-align:center;
	}
	#itsthetable table tbody tr.odd{
		background-color: #F3F3F3;
               
	}
	
#itsthetable table tbody tr:hover {
	color: #ff0000;
	background-color: #E5E5D8;
}

#itsthetable table tbody tr.odd:hover {
        color: #fff;
	background-color: #006699;
}
	
	#itsthetable table tfoot td, #itsthetable table tfoot th{
		border-top: 1px solid #ccc;
		font-weight:bold;
		color:#592C16;
		padding: 16px 9px;
		
}

e nella pagina

<div id="itsthetable">
<table>
<caption>Titolo della tabella</caption>
<thead>
				<tr>
					<th scope="col">IMG</th>
					<th scope="col">Descrizione</th>
                                        <th scope="col">Scarica</th>
				</tr>
			</thead>	
			<tfoot>

				<tr>
					<th scope="row">Total</th>
					<td colspan="4">8 designs</td>
				</tr>
			</tfoot>

<tbody>
<tr class="odd">
<th scope="row">[img]img/01.gif[/img]</th>
<td>descrizionedescrizionedescrizionedescrizione</td>
<td>[img]img/download_pic.gif[/img]</td>
</tr>
<tr class="odd">
<th scope="row">[img]img/02.gif[/img]</th>
<td>descrizionedescrizionedescrizionedescrizione</td>
<td>[img]img/download_pic.gif[/img]</td>
</tr>
<tr class="odd">
<th scope="row">[img]img/03.gif[/img]</th>
<td>descrizionedescrizionedescrizionedescrizione</td>
<td>[img]img/download_pic.gif[/img]</td>
</tr>
<tr class="odd">
<th scope="row">[img]img/04.gif[/img]</th>
<td>descrizionedescrizionedescrizionedescrizione</td>
<td>[img]img/download_pic.gif[/img]</td>
</tr>
<tr class="odd">
<th scope="row">[img]img/01.gif[/img]</th>
<td>descrizionedescrizionedescrizionedescrizione</td>
<td>[img]img/download_pic.gif[/img]</td>
</tr>
<tr class="odd">
<th scope="row">[img]img/02.gif[/img]</th>
<td>descrizionedescrizionedescrizionedescrizione</td>
<td>[img]img/download_pic.gif[/img]</td>
</tr>
</tbody>
</table>
</div>

gli esempi li ho trovati su questo sito:
link

[yagorossi]

ma non risolvo il problema perché dentro alla tabella1 (formattata in un certo modo) ho la tabella2 (formattanta in altro modo) così non posso usare <div...>
come devo fare?

[salasir]

Domanda: le tabelle ti servono per il layout?

Se sì, non hai pensato di utilizzare i <div> per un layout tableless?

Se invece le tabelle ti servono per formattare dei tati tabellari, attribuisci alla seconda tabella un diverso "id" o "class" e definisci le caratteristiche diverse per ogni id o class.

[donato.sciarra]

credo che il problema sia abbastanza banale....ti basta definire delle classi che utilizzarai solo per quegli oggetti

TD.prima_classe{
color: yellow;
border: 0;
background-color: Lime;
border: dashed;
border-color: fuchsia;
overflow: hidden;
}
ed applicare nella html all'altezza della cella o dell'intera tabella che vuoi modificare

<table><tr><td class="prima_classe">Contenuto cella</td></tr></table>

in questo caso come sono definiti i css li puoi usare solo all'interno del tag TD, cambia la definizione della classe sostituendo td con table per l'intera tabella o tr per l'intera riga....

...se togli il td verrà applicato a tutti gli oggetti a cui assegni quella classe...

ciao...