tabella + css

[Gelion]

sto impazzendo giuro

come definiresti questo in css?

<table width="530" border="1" cellpadding="1" cellspacing="1" bordercolor="#141414" bgcolor="#000000" id="h1">
<tr>
<td height="0" bordercolor="#000000" bgcolor="#141414"><font color="#F00000" size="2" face="Times New Roman, Times, serif">.:
CRADLE OF FILTH</font></td>
</tr>
<tr>
<td height="135" bordercolor="#000000"> <div align="center">




<font color="#000000">dsdssffs</font>[img]topppp.jpg[/img]



</p>
</div></td>
</tr>
<tr>
<td height="10" bordercolor="#000000" bgcolor="#141414"><div align="center"><font color="#666666" size="1" face="Verdana, Arial, Helvetica, sans-serif">-
clicca su un immagine per ingrandirla -</font></div></td>
</tr>
</table>

[bombo]

P { font-family:tahoma,verdana,arial; font-size:11px; color:#575757 }
TD { font-family:tahoma,verdana,arial; font-size:11px; color:#575757 }
STRONG { font-style:normal; font-size:10px}
INPUT { font-family:tahoma,verdana,arial; font-size:11px; color:#575757}
TEXTAREA { font-family:tahoma,verdana,arial; font-size:12px;}
SELECT { background-color:#D6D3D6;font-family:tahoma,verdana,arial; font-size:11px; color:#575757}
CITE { font-style:normal; font-size:9px}

h1 {
font-family : Tahoma, Arial, Verdana;
font-size : 24px;
font-style : normal;
font-variant : normal;
font-weight : bold;
text-align : left;
color: #575757;
}

h2 {
font-family: Tahoma, Arial, Verdana;
font-size: 11px;
font-style: normal;
font-weight: bold;
font-variant: normal;
text-align: left;
color: #575757;
}

code {
font-family: "Lucida Console";
font-size: 9px;
font-style: normal;
text-align: left;
text-decoration: none
}
span {
font-family: "Lucida Console";
font-size: 9px;
font-style: normal;
color: #CCCCCC;
text-align: left;
text-decoration: none
}

A:link { font-family:tahoma,verdana,arial; font-size:11px; color:#FF8608; text-decoration:none }
A:visited { font-family:tahoma,verdana,arial; font-size:11px; color:#FF8608; text-decoration:none }
a:hover{
font-size: 11px;
color: #575757;
font-family: Tahoma, Verdana, Arial, Helvetica;
text-decoration: none;
background: #EFEFEF;
/* border: 1px dotted #D6D3D6; */
}

A.intestazione {color :#F98101; text-decoration : none}
A.intestazione:Visited {color :#F98101; text-decoration : none}
A.intestazione:Active {color :#F98101;}
A.intestazione:Hover {color :#FFFFFF; background-color:#7C7C7C;}

A.intestazione2 {color :white; text-decoration : none}
A.intestazione2:Visited {color :white; text-decoration : none}
A.intestazione2:Active {color :white;}
A.intestazione2:Hover {color :black; background-color:#FE860C;}

A.menu:link { font-family:verdana,arial; font-size:9px; color:#FFFFFF; text-decoration:none }
A.menu:visited { font-family:verdana,arial; font-size:9px; color:#FFFFFF; text-decoration:none }
A.menu:hover { font-family:verdana,arial; font-size:9px; color:#C7C7C7; text-decoration:none }

A.linkMax:link { font-family:tahoma,verdana,arial; font-size:13px; color:#FF8608; font-weight:bold; text-decoration:none }
A.linkMax:visited { font-family:tahoma,verdana,arial; font-size:13px; color:#FF8608; font-weight:bold; text-decoration:none }
A.linkMax:hover{
font-weight:bold;
font-size: 13px;
color: #575757;
font-family: Tahoma, Verdana, Arial, Helvetica;
text-decoration: none;
background: #EFEFEF;
/* border: 1px dotted #D6D3D6; */
}

A.linkMin:link { font-family:tahoma,verdana,arial; font-size:9px; color:#FF8608; text-decoration:none }
A.linkMin:visited { font-family:tahoma,verdana,arial; font-size:9px; color:#FF8608; text-decoration:none }
A.linkMin:hover{
font-size: 9px;
color: #575757;
font-family: Tahoma, Verdana, Arial, Helvetica;
text-decoration: none;
background: #EFEFEF;
/* border: 1px dotted #D6D3D6; */
}

A.linkBianco:link { font-family:tahoma,verdana,arial; font-size:10px; color:#8A8A8A; text-decoration:none }
A.linkBianco:visited { font-family:tahoma,verdana,arial; font-size:10px; color:#8A8A8A; text-decoration:none }
A.linkBianco:hover{
font-size: 10px;
color: #575757;
font-family: Tahoma, Verdana, Arial, Helvetica;
text-decoration: none;
background: #EFEFEF;
}

N'centra niente però...

[Marcolino's]

Originariamente inviato da Gelion
capisco...
quindi i css valgono solo per le cose generali diciamo

mi sorgono 2 domande:

se ho 1 tabella con 3 righe tutte e 3 completamente diverse i css non posso utilizzarli

e se ho 2 tabelle invece posso? come faccio a dire per questa tabella pesca questa formattazione e per l'altra quest'altra?

Definendo delle classi.
Le classi permettono di definire diversi stili per lo stesso oggetto.
Il DOM, stabilisce che ogni elemento dell'html (elemento = tag) possa essere gestito in modo autonomo.
I CSS questo fanno.
Ma ricorda, sono a cascata ciò vuol dire che si riperquotono sull'elemento più in basso.

Cosa vuol dire: semplice, se stabilisci una formattazione di testo per l'elemento body, essendo più alto di un elemento tabella, quest'ultima erediterà la formattazione di testo del body.
Quindi, se vuoi fare realizzare una formattazione diversa per la tabella, dovrai definirla a parte.
Come? Ecco qui:

<style type="text/css">
body {font-family: Verdana; font-size: small; background-color: White; color: black }
table.principale {background-color: Gray; color: White }
table.secondaria{background-color: Yellow; color: Red }
</style>
<body>

Le scritte in grassetto si riferisco ai nomi delle classi, e si usano così:

<table class="principale">
</table>

<table class="secondaria">
</table>

Ecco fatto, in questo modo avrai due tabelle con stili differenti nella stessa pagina.

Come vedi non esistono cose generali, è che bisogna leggere molto prima di mettersi a codificare, così da imparare che ... non si è ancora letto abbastanza

[Gelion]

come faccio definire in css
che la mia tabella deve acere bordo grande "1" di colore nero e distanza margine 1?

[Marcolino's]

E' che hai bisogno di un bel manuale, comunque:

border: 1px solid black;
margin: 1px;

Se per margine intendi la distanza tra l'elemento che contiene la tabella e la tabella stessa.
Ma se per margine intendi il bordo della tabella e ciò che contiene, allora devi usare padding.
Esempio: padding: 1px
Se invece devi simulare il cellpadding allora:

table {
border-spacing: 2px;
border-collapse: separate;
empty-cells: hide;
border: 1px solid Black;
}

In questo modo, nascondi pure le celle vuote della tabella.

[Gelion]

table {
border: 1px #141414;
margin: 1px;
width: 530px;
background-color: #000000
}

facendo cosi in dw vedo tutto ok ma se faccio l'anteprima il bordo non esiste piu
perchè?

vorrei anche sapere come si fa a mettere la tabella al centro.. con quale attributo?

[Gelion]

up

[Marcolino's]

Non devi guardare mai un sito con l'anterprima dell'editor.
Introduce sempre delle inesattezze, la cosa migliore è montarsi un piccolo web server in locale, altrimenti, doppio click sul file che stai modificando.
Poi per vedere le modifiche basta fare il reload della pagina.

per la tabella al centro, ti consiglio il vecchio attributo: <table align="center"> altrimenti vai su www.constile.org e ucciditi di codici e calcoli con i pixels