ظاهر پیش فرض جدول ها در HTML مانند بقیه ی عناصر چندان جذاب نیست و برای وب سایت های مدرن دیگر جواب نمی دهد. خبر خوش آنجاست که شما می توانید با تنها چند خط CSS ظاهر این جداول را کاملا قابل قبول کنید.
به مثال زیر نگاهی بیندازید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
<!DOCTYPEhtml>
<html>
<head>
<style>
#customers {
font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
border-collapse:collapse;
width:100%;
}
#customers td, #customers th {
border:1pxsolid#ddd;
padding:8px;
}
#customers tr:nth-child(even){background-color:#f2f2f2;}
#customers tr:hover {background-color:#ddd;}
#customers th {
padding-top:12px;
padding-bottom:12px;
text-align:left;
background-color:#4CAF50;
color:white;
}
</style>
</head>
<body>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr>
<td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>
</body>
</html>
|
مشاهده ی خروجی در JSBin
همانطور که می بینید تنها با چند خط کوچک CSS ظاهر کاملا قابل قبولی به جدول خود داده ایم. اگر همان چند خط CSS را حذف کنیم جدول ما به این شکل تبدیل می شود که برای کاربر امروزی فاجعه ای بیش نیست.
در جلسه ی امروز می خواهیم با انواع روش های تزئین و استایل دهی جدول ها آشنا شویم. باید ابتدا به سراغ حاشیه ها برویم.
border در جدول ها
برای تعیین حاشیه و خط های یک جدول از خاصیت border در زبان CSS استفاده می کنیم.
به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!DOCTYPEhtml>
<html>
<head>
<style>
table, th, td {
border:1pxsolidblack;
}
</style>
</head>
<body>
<h2>Addaborder toatable:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
|
مشاهده ی خروجی در JSBin
شکل جدول خروجی ما:
جدول خروجی 1
سوال: چرا در مثال بالا جدول ما خط های دو تایی دارد؟ برای رفع آن چه کاری می توانیم انجام دهیم؟
پاسخ: اگر به قسمت CSS کد بالا نگاه کنید متوجه می شوید که ما برای هر سه قسمت جدول (یعنی table, th, td) حاشیه تعریف کرده ایم! بنابراین هر کدام جداگانه حاشیه ی خود را می گیرد و شکل بالا ایجاد می شود. تصور کنید کد CSS بالا را به این شکل بنویسیم:
|
|
<style>
table {
border:1pxsolidblack;
}
</style>
|
در این صورت جدول ما به این شکل در خواهد آمد.
شما می توانید با این کدها بازی کنید تا شکل های مختلف آن را ببینید. اما اگر می خواهید این حالت به طور کلی از بین برود می توانید از دستور border-collapse استفاده کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<!DOCTYPEhtml>
<html>
<head>
<style>
table {
border-collapse:collapse;
}
table, td, th {
border:1pxsolidblack;
}
</style>
</head>
<body>
<h2>Let the borders collapse:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<pdir='rtl'><b>Note:</b>اگرمقدارDOCTYPE!مشخصنشدهباشدایندستورمیتواندنتایجناخواستهایرادرمرورگراینترنتاکسپلورر8وپایینترایجادکند.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
نکته: اگر مقدار DOCTYPE! مشخص نشده باشد این دستور می تواند نتایج ناخواسته ای را در مرورگر اینترنت اکسپلورر 8 و پایین تر ایجاد کند.
طول و عرض جدول
اگر دوست داشته باشید که جدول شما طول یا عرض مشخصی داشته باشد می توانید با استفاده از خصوصیات width و height آن را مشخص کنید. به طور مثال در کد زیر گفته ایم که جدول ما باید عرض %100 داشته باشد (یعنی تمام عرض صفحه را بگیرد) و همچنین به <th> ها نیز ارتفاع 50 پیکسلی داده ایم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
<!DOCTYPEhtml>
<html>
<head>
<style>
table, td, th {
border:1pxsolidblack;
}
table {
border-collapse:collapse;
width:100%;
}
th {
height:50px;
}
</style>
</head>
<body>
<h2>The width andheight Properties</h2>
<p>Set the width of the table,andthe height of the table header row:</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
|
مشاهده ی خروجی در JSBin
اگر به کد بالا دقت کنید متوجه می شوید که نوشته های داخل جدول با یکدیگر هماهنگ نیستند و در یک موقعیت مکانی قرار ندارند. اگر بخواهیم آن ها را ترازبندی کنیم چه کاری میتوان کرد؟
هم ترازی داده های جدول
برای هم تراز کردن نوشته های یک جدول به صورت افقی می توانیم از دستور text-align استفاده کنیم. حالت پیش فرض جدول ها برای <th> مقدار center (به معنی «وسط») و برای <td> ها مقدار left (به معنی «چپ») است اما ما می توانیم به راحتی آن را تغییر دهیم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
<!DOCTYPEhtml>
<html>
<head>
<style>
table, td, th {
border:1pxsolidblack;
}
table {
border-collapse:collapse;
width:100%;
}
th {
text-align:left;
}
</style>
</head>
<body>
<h2>The text-align Property</h2>
<p>Thispropertysets the horizontal alignment(like left,right,orcenter)of the content inth ortd:</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در این مثال به راحتی <th> ها را نیز چپ چین کرده ایم.
اما برای هم تراز کردن این داده ها به صورت عمودی باید از دستور vertical-align استفاده کنیم. مقادیر قابل قبول برای این دستور top به معنی «بالا» و bottom به معنی «پایین» و middle به معنی «میانه» یا «وسط» هستند.
حالت پیش فرض جدول ها هم برای <th> و هم برای <td> ها مقدار middle (به معنی «میانه») است. ما در مثال زیر می خواهیم <td> را به صورت bottom قرار دهیم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
<!DOCTYPEhtml>
<html>
<head>
<style>
table, td, th {
border:1pxsolidblack;
}
table {
border-collapse:collapse;
width:100%;
}
td {
height:50px;
vertical-align:bottom;
}
</style>
</head>
<body>
<h2>The vertical-align Property</h2>
<p>Thispropertysets the vertical alignment(like top,bottom,ormiddle)of the content inth ortd.</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
|
مشاهده ی خروجی در JSBin
توجه داشته باشید که این تمرینات جهت یادگیری و آموزش است و هیچکدام از نظر ظاهری برای وب سایت واقعی جذاب نیست. در آخر این مقاله یک یا چند مثال از جدول های بسیار زیبای CSS را برایتان می آوریم.
سوال: داده های جدول ما به حاشیه اش چسبیده اند. آیا راهی برای فاصله انداختن بین آن ها وجود دارد؟
پاسخ: بله! می توانیم از ویژگی padding استفاده کنیم و فاصله ی بین آن ها را افزایش دهیم. به این کد توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<!DOCTYPEhtml>
<html>
<head>
<style>
table, td, th {
border:1pxsolid#ddd;
text-align:left;
}
table {
border-collapse:collapse;
width:100%;
}
th, td {
padding:15px;
}
</style>
</head>
<body>
<h2>The padding Property</h2>
<p>Thispropertyadds space between the border andthe content inatable.</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
|
مشاهده ی خروجی در JSBin
همانطور که میبینید ظاهر جدول ما بسیار زیبا تر شده است.
جدول های مدرن تر
جدول های ساده کم کم دارند بساط خود را از دنیای امروزی وب جمع می کنند و طراحان مطرح دنیا از شیوه های جدیدی برای استایل دهی به جدول ها استفاده می کنند. به طور مثال می توانیم برای ردیف های جدول فقط حاشیه ی زیرین (یعنی border-bottom) قرار دهیم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<!DOCTYPEhtml>
<html>
<head>
<style>
table {
border-collapse:collapse;
width:100%;
}
th, td {
padding:8px;
text-align:left;
border-bottom:1pxsolid#ddd;
}
</style>
</head>
<body>
<h2>Bordered Table Dividers</h2>
<p>Add the border-bottom propertytoth andtd forhorizontal dividers:</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
|
مشاهده ی خروجی در JSBin
همانطور که می بینید طرح جدول ما بسیار زیباتر شده است. اما هنوز هم می توانیم آن را جذاب تر کنیم. نوبت استفاده از خصوصیت hover: است!
به کد زیر نگاه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
<!DOCTYPEhtml>
<html>
<head>
<style>
table {
border-collapse:collapse;
width:100%;
}
th, td {
padding:8px;
text-align:left;
border-bottom:1pxsolid#ddd;
}
tr:hover {background-color:#f5f5f5;}
</style>
</head>
<body>
<h2>Hoverable Table</h2>
<p>Move the mouse over the table rows tosee the effect.</p>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
|
مشاهده ی خروجی در JSBin
اگر موس خود را روی ردیف های این جدول ببرید، این ردیف ها تیره تر می شوند و علاوه بر خوانا تر شدن جدول، کاربر احساس می کند که با جدول و عناصر صفحه ی ما تعامل دارد! به هر حال اگر برای شما تنها خوانایی جدول مهم است اما دوست نداربد از این حالت استفاده کنید می توانید از دستور ()nth-child بهره ببرید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<!DOCTYPEhtml>
<html>
<head>
<style>
table {
border-collapse:collapse;
width:100%;
}
th, td {
text-align:left;
padding:8px;
}
tr:nth-child(even) {background-color:#f2f2f2;}
</style>
</head>
<body>
<h2>Striped Table</h2>
<p>Forzebra-striped tables,usethe nth-child()selector andaddabackground-color toall even(orodd)table rows:</p>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
|
مشاهده ی خروجی در JSBin
ما در این مثال با استفاده از background-color و ترکیب آن با دستور ()nth-child جدول خود را شبیه جداول اداری کرده ایم تا خوانایی آن بیشتر شود. حالا اگر کمی رنگ نیز به این جدول بدهیم، بهتر می شود:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
<!DOCTYPEhtml>
<html>
<head>
<style>
table {
border-collapse:collapse;
width:100%;
}
th, td {
text-align:left;
padding:8px;
}
tr:nth-child(even){background-color:#f2f2f2}
th {
background-color:#4CAF50;
color:white;
}
</style>
</head>
<body>
<h2>Colored Table Header</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
|
مشاهده ی خروجی در JSBin
حالا ظاهر بسیار بهتری پیدا کرد.
جدول های واکنش گرا
این نوع جداول با کم و زیاد شدن عرض صفحه (نمایش در موبایل های هوشمند یا کامپویتر و ….) به هم نمیریزند و از کادر هم خارج نمی شوند. برای ساخت این جدول ها باید به عنصر نگه دارنده ی جدول خصوصیت overflow-x:auto را بدهیم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
<!DOCTYPEhtml>
<html>
<head>
<style>
table {
border-collapse:collapse;
width:100%;
}
th, td {
text-align:left;
padding:8px;
}
tr:nth-child(even) {background-color:#f2f2f2;}
</style>
</head>
<body>
<h2>Responsive Table</h2>
<p>Aresponsive table will displayahorizontal scroll bar ifthe screen istoo
small todisplay the full content.Resize the browser window tosee the effect:</p>
<p>Tocreatearesponsive table,addacontainer element(like div)with<strong>overflow-x:auto</strong>around the table element:</p>
<div style="overflow-x:auto;">
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
</tr>
</table>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
به صفحه ی خروجی کد بالا بروید و سعی کنید اندازه ی قسمت خروجی و یا پنجره ی مرورگر خود را کوچک کنید. متوجه می شوید که جدول به جای به هم ریختن، اسکرول می گیرد و کاربر می تواند به راحتی محتوای آن را مشاهده کند.
نکته: اسکرول ها در OS X (سیستم های مک) مخفی هستند حتی اگر overflow:scroll نیز تعیین شده باشد اما از نظر کارکرد مشکلی ندارند و به خوبی کار می کنند.
اگر خلاقیت بیشتری به خرج دهید می توانید جداولی مانند این جدول نیز بسازید. به هر حال امیدوارم از این قسمت لذت برده باشید.
چطور از فشرده ساز Winrar استفاده کنیم؟