Tabella in html+css

[peera]

oggi spiego come creare una tabella con HTML E CSS

per prima cosa apriamo il blocco note e buttiamoci dentro questo codice:

Codice:

body {margin-bottom: 20px; background-color: #FFF; font-family: verdana, tahoma, arial; font-size: 11px; color: #3C3C3C} #F777829 {display:none}
table, div {font-size: 10px; color: #3C3C3C}
a:link, a:visited, a:active {color: #507318; text-decoration: none}
a:hover {color: #4D6A8A; text-decoration: underline}
.mback_left {width: 10px; background-image: url(http://img.forumfree.net/style_images/37/maintitle.gif); background-repeat: repeat-y}
.mback_right {width: 28px; background-image: url(http://img.forumfree.net/style_images/37/maintitle.gif); background-position: right; background-repeat: repeat-y}
.mback {height: 32px; background-image: url(http://img.forumfree.net/style_images/37/tile_back.gif); background-repeat: repeat-x; background-color: #7AA82F; border-top: 1px solid #9DA1A6; border-bottom: 1px solid #899199}
.mleft, .sep_left, .mleft_top, .mright, .sep_right, .mright_top {width: 1px; background-color: #9DA1A6}
.ww {background-color: #D8E3C4}
.aa {background-color: #D1E0BA}
.mainbg {background-color: #FFF}
.skin_tbl_border {background-color: #FFF; border: 1px solid #9DA1A6}
.msub {border-top: 1px solid #9DA1A6; font-size: 1px; height: 0}
.mleft_bottom, .mright_bottom {background-image: url(http://img.forumfree.net/style_images/37/bottom.gif); background-repeat: no-repeat}
.title {height: 26px; background-image: url(http://img.forumfree.net/style_images/37/tile_sub.gif); background-repeat: repeat-x; background-color: #DFE2E4; border-bottom: 1px solid #9CA4AE; color: #3A566C; font-weight: bold; letter-spacing: 1px; margin: 0; padding: 5px}

a questo punto salveremo il file con il nome Style.css (NON TXT)

poi apriamo la nostra pagina web, dove inseriremo questo codice per iniziare:

Codice:

@import url("Style.css");

in questo modo abbiamo messo in collegamento la pagina HTML e il foglio di stile, in modo che possiamo richiamare una classe con il codice

Codice:

<td class="nomeclasse"></td>

ora aggiungiamo questo codice:

Codice:

<table class="skin_tbl" align="center" cellpadding="0" cellspacing="0"><tr><td class="mleft_top"></td><td><table class="mback" width="100%" cellpadding="0" cellspacing="0"><tr><td class="mback_left"></td><td class="mback_center">

<div class="mtitle">titolo tabella</div>

</td><td class="mback_right"></td></tr></table></td><td class="mright_top"></td></tr><tr><td class="mleft"></td><td><table class="mainbg" style="text-align:center;width:100%" cellpadding="4" cellspacing="1">

<tr title="1">
<td class="ww">1</td>
<td class="aa">2</td>
<td class="ww">3</td>
</tr>

</table></td><td class="mright"></td></tr><tr><td class="mleft_bottom"></td><td><table class="msub" width="100%" cellpadding="0" cellspacing="0"><tr><td class="msub_left"></td><td class="msub_center">&nbsp;</td><td class="msub_right"></td></tr></table></td><td class="mright_bottom"></td></tr></table><br><br>

vi ricorda niente questo codice?
se si... avrete capito che le tabelle assomigliano allo stile Forumfree/ForumCommunity

questa è una semplice tabella su 2 righe ( titolo e colonne) e 3 colonne
per aggiungere un altra riga, copiate questo codice:

Codice:

<tr title="num riga">
<td class="ww">testo colonna1</td>
<td class="aa">testo colonna 2</td>
<td class="ww">testo colonna 3</td>
</tr>

e inseritelo dopo:

Codice:

<tr title="1">
<td class="ww">1</td>
<td class="aa">2</td>
<td class="ww">3</td>
</tr>

nel prossimo topic spiegherò come fare tabelle più complesse...

ciao a tutti,
Peera

Fonte: Me

[Kimi]

Perdona la mia arroganza, ma tralasciando che mi fa molto piacere che le persone soprattutto i nuovi arrivati cercano in qualche modo di contribuire al forum, pero' credo che prima di cercare di spiegarle a gli altri bisogna avere il buonsenso di approfondire un po l'argomento o quanto meno verificare se quando si dice è corretto o meno.
Nel codice da te postato ci sono gravissimi errori
a partire da questo:

peera Ha scritto:poi apriamo la nostra pagina web, dove inseriremo questo codice per iniziare:

Codice PHP:

<p><style type="text/css">
<?
include("Style.css");
?>
</style></p> 


quando codice cosi non vuol dire nulla, perche' il tag <style> ha bisogno di essere chiuso in un paragrafo?
inoltre per includere un file nel css serve:

Codice:

@import url("style.css");

e non come se fosse php ...

Ripeto la mia non è una critica alle tue conoscenze, qui nessuno nasce con tutte le conoscenze, pero almeno l'umiltà di non diffondere conoscenze sbagliate in giro.

Kimi

[peera]

ad essere sinceri io uso questo codice e mi funziona benissimo... poi non so dirti... xD

[Luca P.]

togli il tag style da paragrafo...e poi perchè non usare link rel o il tag postato da Kimi?

[Trinit]

confermo l'import di Kimi anche se non ho mai avuto il piacere di utilizzarlo

[peera]

si... si può usare quello di kimi... il fatto è che non l'ho mai provato quello xD

[metonator]

Per essere sinceri, io uso solo html:

<table border="3">
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>

[Luca P.]

Ora che lo riguardo poi, mi sembra che il codice della tabella sia quello del Table Generator del cercuito Forumfree.

[skyz]

Si è identico

[peera]

(05-05-2010 17:39)peera Ha scritto:  vi ricorda niente questo codice?
se si... avrete capito che le tabelle assomigliano allo stile Forumfree/ForumCommunity