جدول ها در HTML

[P O U R I A]

فهرست تاپیک:

1. رنگی کردن ردیف های (rows) یک جدول (table)، به صورت یک در میان، در HTML
2. لینک دار کردن خانه های یک جدول، در HTML

 

[P O U R I A]

رنگی کردن ردیف های (rows) یک جدول (table)، به صورت یک در میان، در HTML

رنگی کردن ردیف های (rows) یک جدول (table)، به صورت یک در میان، در HTML

فرض کنید قصد داریم که ردیف های یک جدول (table)، به صورت یک در میان، دارای رنگ متفاوتی باشند، برای این منظور، می توانیم که برای ردیف های با شماره فرد (odd)، یک رنگ متفاوت (نسبت به رنگ پیش فرض) را انتخاب کنیم.

به مثال زیر توجه کنید :

[h=4]مثال :[/h]

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]style[/B][/COLOR] [COLOR=#000066]type[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"text/css"[/COLOR]>[/COLOR]
table.myTable { 
    border=1;
    border-style:solid;
    border-color:#000;
}
table.myTable td{ 
    width:200px;
}
table.myTable tr:nth-of-type(odd) { 
    background:#eee; 
}
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]style[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]table[/B][/COLOR] [COLOR=#000066]class[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"myTable"[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]tr[/B][/COLOR]>[/COLOR]
    [COLOR=#009900]<[COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]1-1[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]
    [COLOR=#009900]<[COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]1-2[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]
    [COLOR=#009900]<[COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]1-3[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]tr[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]tr[/B][/COLOR]>[/COLOR]
    [COLOR=#009900]<[COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]2-1[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]
    [COLOR=#009900]<[COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]2-2[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]
    [COLOR=#009900]<[COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]2-3[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]tr[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]tr[/B][/COLOR]>[/COLOR]
    [COLOR=#009900]<[COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]3-1[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]
    [COLOR=#009900]<[COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]3-2[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]
    [COLOR=#009900]<[COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]3-3[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]tr[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]tr[/B][/COLOR]>[/COLOR]
    [COLOR=#009900]<[COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]4-1[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]
    [COLOR=#009900]<[COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]4-2[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]
    [COLOR=#009900]<[COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]4-3[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]tr[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]table[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

بخش مهم کد CSS که با آن، رنگ ردیف های فرد را تعیین کرده ایم :

[COLOR=#000000][FONT=Tahoma][FONT=monospace]table.myTable tr:nth-of-type(odd) { 
    background:#eee; 
}[/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]

 

[P O U R I A]

لینک دار کردن خانه های یک جدول، در HTML

لینک دار کردن خانه های یک جدول، در HTML

برای لینک دار کردن خانه های یک جدول، باید تگ a مربوط به لینک را در میان تگ های td مربوط به آن خانه ها از جدول قرار بدهیم. برای درک بهتر این موضوع، به مثال زیر توجه کنید :

مثال :

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]table[/B][/COLOR] [COLOR=#000066]border[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"1"[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]tr[/B][/COLOR]>[/COLOR]
    [COLOR=#009900]<[COLOR=#000000][B]td[/B][/COLOR]><[COLOR=#000000][B]a[/B][/COLOR] [COLOR=#000066]href[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"#"[/COLOR]>[/COLOR]1[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]a[/B][/COLOR]><[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]
    [COLOR=#009900]<[COLOR=#000000][B]td[/B][/COLOR]><[COLOR=#000000][B]a[/B][/COLOR] [COLOR=#000066]href[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"#"[/COLOR]>[/COLOR]2[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]a[/B][/COLOR]><[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]tr[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]tr[/B][/COLOR]>[/COLOR]
    [COLOR=#009900]<[COLOR=#000000][B]td[/B][/COLOR]><[COLOR=#000000][B]a[/B][/COLOR] [COLOR=#000066]href[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"#"[/COLOR]>[/COLOR]3[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]a[/B][/COLOR]><[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]
    [COLOR=#009900]<[COLOR=#000000][B]td[/B][/COLOR]><[COLOR=#000000][B]a[/B][/COLOR] [COLOR=#000066]href[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"#"[/COLOR]>[/COLOR]4[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]a[/B][/COLOR]><[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]td[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]tr[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]table[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]

نتیجه :

---

1	2
3	4

---