فرادرسقابلیت های پیشرفته جداول HTML — راهنمای کاربردی
در بخش قبلی این سری مقالات به بررسی جداول HTML پرداختیم. در این بخش برخی از قابلیت‌های پیشرفته‌تر جداول HTML مانند کپشن، جمع‌بندی و گروه‌بندی ردیف‌ها در عنوان جدول یا بخش‌های بدنه و فوتر را بررسی می‌کنیم. همچنین بحث دسترس پذیری جداول HTML برای کاربران دچار نقص بینایی را بیشتر مورد بررسی قرار می‌دهیم. برای مطالعه بخش قبلی این مجموعه مطلب آموزشی، روی لینک زیر کلیک کنید:
پیش‌نیاز مطالعه این مقاله آشنایی با مبانی HTML است. انتظار می‌رود با مطالعه این مطلب با قابلیت‌های پیشرفته‌تر جداول HTML و دسترس‌پذیری جداول آشنا شوید.
ارائه توضیح مختصر راجع به جدول با <caption>
با قرار دادن عنصر <caption> و تعریف تودرتوی آن در عنصر <HTML> می‌توان یک کپشن (توصیف کوتاه راجع به محتوای جدول) برای جدول تعریف کرد.
این عنصر باید درست پس از تگ باز <table> قرار گیرد.
1<table>
2 <caption>Dinosaurs in the Jurassic period</caption>
3
4 ...
5</table>چنان که از مثال کوتاه فوق مشخص است، کپشن به منظور ارائه توصیفی کوتاه از محتوای جدول ارائه می‌شود. این وضعیت برای همه خوانندگانی که قصد دارند ایده سریعی از فایده جدول داشته باشند، مفید خواهد بود و می‌توانند به سرعت با محتوای جدول آشنا شوند. همچنین افراد نابینا نیز می‌توانند از محتوای جدول آگاه شوند. به جای این که یک ابزار قرائت صفحه محتوای سلول‌های مختلف را بخواند تا این افراد بتوانند در مورد جدول کسب اطلاع بکنند، می‌توانند از کپشن استفاده کنند و تصمیم بگیرند که می‌خواهند جزییات بیشتری از راجع به آن بخوانند یا نه. مجدداً تأکید می‌کنیم که یک کپشن مستقیماً زیر تگ <table> قرار می‌گیرد.
نکته: خصوصیت summary روی عنصر <table> نیز می‌تواند مفید باشد و توصیفی از جدول ارائه کند. این خصوصیت نیز از سوی ابزارهای قرائت صفحه خوانده می‌شود، اما ما توصیه می‌کنیم از <caption> استفاده کنید. summary در HTML5 منسوخ شده و کاربران بینا نمی‌توانند آن را بخوانند، چون روی صفحه نمایش پیدا نمی‌کند.
مثال کاربردی: افزودن <caption>
در این بخش به بررسی مجدد مثالی می‌پردازیم که در بخش قبلی این مقاله ملاحظه کردیم. جدول زمانی مدرسه معلم زبان را از کد زیر کپی کرده و روی سیستم خود در فایلی به نام timetable-fixed.html بچسبانید:
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <title>School timetable</title>
6 <style>
7 html {
8 font-family: sans-serif;
9 }
10 table {
11 border-collapse: collapse;
12 border: 2px solid rgb(200,200,200);
13 letter-spacing: 1px;
14 font-size: 0.8rem;
15 }
16 td, th {
17 border: 1px solid rgb(190,190,190);
18 padding: 10px 20px;
19 }
20 td {
21 text-align: center;
22 }
23 caption {
24 padding: 10px;
25 }
26 </style>
27 </head>
28 <body>
29 <h1>School timetable</h1>
30
31 <table>
32 <colgroup>
33 <col span="2">
34 <col style="background-color:#97DB9A;">
35 <col style="width:42px;">
36 <col style="background-color:#97DB9A;">
37 <col style="background-color:#DCC48E; border:4px solid #C1437A;">
38 <col span="2" style="width:42px;">
39 </colgroup>
40 <tr>
41 <td> </td>
42 <th>Mon</th>
43 <th>Tues</th>
44 <th>Wed</th>
45 <th>Thurs</th>
46 <th>Fri</th>
47 <th>Sat</th>
48 <th>Sun</th>
49 </tr>
50 <tr>
51 <th>1st period</th>
52 <td>English</td>
53 <td> </td>
54 <td> </td>
55 <td>German</td>
56 <td>Dutch</td>
57 <td> </td>
58 <td> </td>
59 </tr>
60 <tr>
61 <th>2nd period</th>
62 <td>English</td>
63 <td>English</td>
64 <td> </td>
65 <td>German</td>
66 <td>Dutch</td>
67 <td> </td>
68 <td> </td>
69 </tr>
70 <tr>
71 <th>3rd period</th>
72 <td> </td>
73 <td>German</td>
74 <td> </td>
75 <td>German</td>
76 <td>Dutch</td>
77 <td> </td>
78 <td> </td>
79 </tr>
80 <tr>
81 <th>4th period</th>
82 <td> </td>
83 <td>English</td>
84 <td> </td>
85 <td>English</td>
86 <td>Dutch</td>
87 <td> </td>
88 <td> </td>
89 </tr>
90 </table>
91
92
93 </body>
94</html>یک کپشن مناسب برای جدول درج کنید. کد را ذخیره کرده و آن را در یک مرورگر باز کنید تا تغییرات حاصل شده را مشاهده کنید.
افزودن ساختار با <thead> ،<tfoot> و <tbody>
زمانی که جدول‌ها ساختار پیچیده‌تری می‌یابند، بهتر است از تعاریف ساختاری بیشتری در ایجاد آن‌ها بهره بگریم. یک روش مشخص استفاده از عناصر <thead> ،<tfoot> و <tbody> است که امکان نشانه‌گذاری بخش‌های هدر، فوتر و بدنه جدول را فراهم می‌سازد.
این عناصر موجب نمی‌شوند که جداول دسترس‌پذیری بیشتری برای ابزارهای قرائت صفحه پیدا کنند و از این نظر ذاتاً ارزش چندانی برای بهبود دیداری ندارند. با این حال، برای استایل‌دهی و طرح‌بندی جداول کاملاً مفید هستند و به عنوان قلاب‌هایی برای افزودن CSS به جدول عمل می‌کنند. برای این که برخی مثال‌های جالب در اختیار شما قرار دهیم، باید بگوییم که وقتی جدولی بسیار طولانی می‌شود، می‌توانید در هر بازه نمایشی از جدول یک هدر و یک فوتر قرار دهید. همچنین می‌توانید بدنه جدول را در یک صفحه منفرد نمایش دهید و محتوای یکسانی را با اسکرول به سمت بالا و پایین داشته باشید.
برای استفاده از آن‌ها به صورت زیر می‌توان عمل کرد:
- عنصر <thead> باید بخشی از جدول را که هدر نام دارد در بربگیرد. این بخش به طور معمول نخستین ردیفی است که عناوین ستون‌ها را شامل می‌شود، اما لزوماً همیشه چنین نیست. اگر از عنصر استفاده کنید، هدر جدول باید درست زیر آن‌ها قرار گیرد.
- عنصر <tfoot> باید بخشی از جدول را که فوتر نام دارد در بر بگیرد. برای نمونه این بخش می‌تواند ردیف نهایی باشد که جمع‌بندی ردیف‌های قبلی محسوب می‌شود. می‌توان فوتر جدول را درست در انتهای جدول یا آن را دقیقاً زیر هدر قرار دارد. در هر حال مرورگر آن را در انتهای جدول رندر خواهند کرد.
- عنصر <tbody> باید بخش‌هایی از جدول را در بر بگیرد که در هدر یا فوتر جدول قرار ندرند. این بخش دقیقاً زیر هدر یا گاهی اوقات زیر فوتر قرار می‌گیرد و این حالت به تصمیم شما در مورد ساختاربندی جدول بستگی دارد.
نکته: <tbody> همواره و در همه جدول‌ها وجود دارد، هرچند آن را در کد خود به صراحت نیاورده باشید. برای بررسی این موضوع یکی از مثال‌های قبلی را که شامل <tbody> نیست باز کنید و به کد HTML در بخش ابزارهای توسعه‌دهنده مرورگر نگاه کنید. در این حالت مشاهده خواهید کرد که مرورگر این عنصر را به جای شما اضافه می‌کند. ممکن است کنجکاو باشید که چه لزومی برای گنجاندن این عنصر وجود دارد، دلیل آن این است که بدین ترتیب کنترل بیشتری روی ساختاربندی و استایل‌دهی جدول خواهید داشت.
مثال کاربردی: افزودن ساختار جدول
در این بخش عناصری جدیدی را که بررسی کردیم، در عمل مورد استفاده قرار می‌دهیم. قبل از هر چیز یک کپی از کدهای زیر برداشته و روی سیستم خود در فایل‌هایی با نام‌های spending-record.html و minimal-table.css بچسبانید:
فایل spending-record.html
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <title>My spending record</title>
6 <link href="minimal-table.css" rel="stylesheet" type="text/css">
7 <style>
8 </style>
9 </head>
10 <body>
11 <h1>My spending record</h1>
12
13 <table>
14 <caption>How I chose to spend my money</caption>
15 <tr>
16 <th>Purchase</th>
17 <th>Location</th>
18 <th>Date</th>
19 <th>Evaluation</th>
20 <th>Cost (€)</th>
21 </tr>
22 <tr>
23 <td>SUM</td>
24 <td>118</td>
25 </tr>
26 <tr>
27 <td>Haircut</td>
28 <td>Hairdresser</td>
29 <td>12/09</td>
30 <td>Great idea</td>
31 <td>30</td>
32 </tr>
33 <tr>
34 <td>Lasagna</td>
35 <td>Restaurant</td>
36 <td>12/09</td>
37 <td>Regrets</td>
38 <td>18</td>
39 </tr>
40 <tr>
41 <td>Shoes</td>
42 <td>Shoeshop</td>
43 <td>13/09</td>
44 <td>Big regrets</td>
45 <td>65</td>
46 </tr>
47 <tr>
48 <td>Toothpaste</td>
49 <td>Supermarket</td>
50 <td>13/09</td>
51 <td>Good</td>
52 <td>5</td>
53 </tr>
54 </table>
55
56 </body>
57</html>فایل minimal-table.css
1html {
2 font-family: sans-serif;
3}
4
5table {
6 border-collapse: collapse;
7 border: 2px solid rgb(200,200,200);
8 letter-spacing: 1px;
9 font-size: 0.8rem;
10}
11
12td, th {
13 border: 1px solid rgb(190,190,190);
14 padding: 10px 20px;
15}
16
17th {
18 background-color: rgb(235,235,235);
19}
20
21td {
22 text-align: center;
23}
24
25tr:nth-child(even) td {
26 background-color: rgb(250,250,250);
27}
28
29tr:nth-child(odd) td {
30 background-color: rgb(245,245,245);
31}
32
33caption {
34 padding: 10px;
35}این فایل HTML را در مرورگر باز کنید. چنان که می‌بینید ظاهر مناسبی دارد، اما همچنان نیاز به بهبود دارد. ردیف SUM شامل جمع‌بندی مقادیر صرف شده است و به نظر می‌رسد در مکان نامناسبی قرار گرفته است. برخی جزییات کد نیز مفقود هستند.
ردیف هدرها را در یک عنصر <thead> قرار دهید و ردیف SUM را نیز درون عنصر <tfoot> قرار دهید و بقیه کد درون عنصر <tbody> قرار می‌گیرد. کد را ذخیره و صفحه را رفرش کنید. در ادامه می‌بینید که افزودن عنصر <tfoot> موجب می‌شود که ردیف SUM به انتهای جدول برود. سپس خصوصیت colspan را اضافه کنید تا سلول SUM روی چهار ستون نخست گسترش یابد، بنابراین تعداد واقعی در انتهای ستون Cost ظاهر می‌شود.
در ادامه استایل‌دهی اضافی ساده‌ای به جدول اضافه می‌کنیم تا ایده‌ای از میزان مفید بودن این عناصر برای به‌کارگیری کد CSS به دست آوریم. درون بخش عنوان سند HTML یک عنصر <style> خالی می‌بینیم. درون این عنصر خطوط کد CSS زیر را اضافه کنید:
1tbody {
2 font-size: 90%;
3 font-style: italic;
4}
5
6tfoot {
7 font-weight: bold;
8}کد را ذخیره و صفحه را رفرش کنید و نگاهی به نتیجه بیندازید. اگر عناصر <tbody> و <tfoot> در مکان خود نباشند باید سلکتورها و قواعد پیچیده‌ای برای اعمال استایل ها بنویسید.
جدول تکمیل‌شده شما چیزی مانند زیر خواهد بود:
کد جدول فوق به صورت زیر است:
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <title>My spending record</title>
6 <link href="minimal-table.css" rel="stylesheet" type="text/css">
7 <style>
8 tbody {
9 font-size: 90%;
10 font-style: italic;
11 }
12 tfoot {
13 font-weight: bold;
14 }
15 </style>
16 </head>
17 <body>
18 <h1>My spending record</h1>
19
20 <table>
21 <caption>How I chose to spend my money</caption>
22 <thead>
23 <tr>
24 <th>Purchase</th>
25 <th>Location</th>
26 <th>Date</th>
27 <th>Evaluation</th>
28 <th>Cost (€)</th>
29 </tr>
30 </thead>
31 <tfoot>
32 <tr>
33 <td colspan="4">SUM</td>
34 <td>118</td>
35 </tr>
36 </tfoot>
37 <tbody>
38 <tr>
39 <td>Haircut</td>
40 <td>Hairdresser</td>
41 <td>12/09</td>
42 <td>Great idea</td>
43 <td>30</td>
44 </tr>
45 <tr>
46 <td>Lasagna</td>
47 <td>Restaurant</td>
48 <td>12/09</td>
49 <td>Regrets</td>
50 <td>18</td>
51 </tr>
52 <tr>
53 <td>Shoes</td>
54 <td>Shoeshop</td>
55 <td>13/09</td>
56 <td>Big regrets</td>
57 <td>65</td>
58 </tr>
59 <tr>
60 <td>Toothpaste</td>
61 <td>Supermarket</td>
62 <td>13/09</td>
63 <td>Good</td>
64 <td>5</td>
65 </tr>
66 </tbody>
67 </table>
68
69 </body>
70</html>جداول تودرتو
امکان تعریف تودرتوی یک جدول درون جدول دیگر وجود دارد و به این منظور کافی است که ساختار کامل را شامل عنصر <html> تعریف کنید. البته این روش چندان توصیه نمی‌شود، چون موجب خواهد شد که نشانه‌گذاری پیچیده‌تر شود و ابزارهای قرائت صفحه دسترس‌پذیری کمتری به جدول داشته باشند. در موارد زیادی می‌توان سلول/ردیف/ستون‌های بیشتری در همان جدول موجود درج کرد. با این حال در پاره‌ای موارد برای نمونه در صورتی که بخواهید محتوا را به سادگی از منابع دیگر ایمپورت کنید، این وضعیت ناگزیر خواهد بود.
در ادامه کد نشانه‌گذاری یک جدول تودرتوی ساده را ملاحظه می‌کنید:
1<table id="table1">
2 <tr>
3 <th>title1</th>
4 <th>title2</th>
5 <th>title3</th>
6 </tr>
7 <tr>
8 <td id="nested">
9 <table id="table2">
10 <tr>
11 <td>cell1</td>
12 <td>cell2</td>
13 <td>cell3</td>
14 </tr>
15 </table>
16 </td>
17 <td>cell2</td>
18 <td>cell3</td>
19 </tr>
20 <tr>
21 <td>cell4</td>
22 <td>cell5</td>
23 <td>cell6</td>
24 </tr>
25</table>خروجی کد فوق چیزی مانند زیر خواهد بود:
| title1 | title2 | title3 | |||
|---|---|---|---|---|---|
| cell2 | cell3 | |||
| cell4 | cell5 | cell6 |
جداول HTML برای کاربران دچار نقص بینایی
در این بخش شیوه استفاده از جدول‌های داده را جمع‌بندی می‌کنیم. یک جدول می‌تواند ابزار کارآمدی باشد و دسترسی سریعی به داده‌ها بدهد. همچنین امکان بررسی و مقایسه مقادیر مختلف را فراهم می‌سازد. با صرفاً یک نگاه گذرا به جدول زیر می‌توان دریافت که چند عدد حلقه در ماه آگوست اخیر در Gent فروخته شده است. برای درک این اطلاعات باید اتصال دیداری بین داده‌های این و هدرهای ردیف و / یا ستون‌های آن برقرار کنیم.
| Clothes | Accessories | |||||
|---|---|---|---|---|---|---|
| Trousers | Skirts | Dresses | Bracelets | Rings | ||
| Belgium | Antwerp | 56 | 22 | 43 | 72 | 23 |
| Gent | 46 | 18 | 50 | 61 | 15 | |
| Brussels | 51 | 27 | 38 | 69 | 28 | |
| The Netherlands | Amsterdam | 89 | 34 | 69 | 85 | 38 |
| Utrecht | 80 | 12 | 43 | 36 | 19 | |
اما اگر شما نتوانید آن ارتباط‌های دیداری را ایجاد کنید چطور؟ در این صورت چگونه می‌توانید یک جدول مانند جدول فوق را بخوانید؟ افراد دچار نقص بینایی غالباً از یک ابزار قرائت صفحه استفاده می‌کنند که اطلاعات روی صفحه وب را برای آن‌ها می‌خواند. این وضعیت زمانی که متن ساده باشد هیچ مشکلی ایجاد نمی‌کند، اما تفسیر یک جدول برای فرد نابینا می‌تواند چالشی جدی محسوب شود. در هر حال، نشانه‌گذاری صحیح می‌تواند آن ارتباط‌های دیداری را با ارتباط‌های برنامه‌نویسی شده جایگزین کند.
نکته: بر اساس آمار سازمان بهداشت جهانی در سال 2017، حدود 235 میلیون فرد در دنیا با نوعی نقص بینایی زندگی می‌کرده‌اند. در همین راستا در این بخش از مقاله تکنیک‌های بیشتری معرفی می‌کنیم که به کمک آن‌ها می‌توانید جدول‌ها را تا بیشترین حد ممکن دسترس‌پذیر کنید.
استفاده از هدرهای ردیف و ستون
ابزارهای قرائت صفحه همه هدرها را شناسایی می‌کنند و از آن‌ها برای ایجاد ارتباط برنامه‌نویسی شده بین هدرها و سلول‌هایی که با آن‌ها ارتباط دارند کمک می‌گیرند. ترکیب هدرهای ردیف و ستون می‌تواند جدول را مانند روشی که فرد بینا جدول را تفسیر می‌کند، ارائه دهد.
در بخش قبلی (+) این مقاله با روش درج هدر در جدول آشنا شدیم.
خصوصیت scope
مبحث جدیدی که در این مقاله بررسی می‌کنیم خصوصیت scope است که می‌توان با استفاده از عنصر <th> به جدول اضافه کرد. این خصوصیت به ابزارهای قرائت صفحه اعلام می‌کند که هدر مربوط به کدام سلول‌ها است و آیا هدری برای ردیف یا ستون خاص محسوب می‌شود یا نه. اگر به مثال سوابق مصارف خود بازگردیم بدین ترتیب می‌توانیم بدون هیچ ابهامی هدرهای ستون را به صورت زیر تعریف کنیم:
1<thead>
2 <tr>
3 <th scope="col">Purchase</th>
4 <th scope="col">Location</th>
5 <th scope="col">Date</th>
6 <th scope="col">Evaluation</th>
7 <th scope="col">Cost (€)</th>
8 </tr>
9</thead>هر ردیف یک هدر دارد که به صورت زیر تعریف می‌شود (در صورتی که خواسته باشیم علاوه بر هدر ستون، هدر ردیف نیز اضافه کنیم):
1<tr>
2 <th scope="row">Haircut</th>
3 <td>Hairdresser</td>
4 <td>12/09</td>
5 <td>Great idea</td>
6 <td>30</td>
7</tr>ابزارهای قرائت صفحه نشانه‌گذاری‌هایی که به این صورت ساختاربندی شده باشند را شناسایی می‌کنند و برای نمونه به کاربران خود اجازه می‌دهند که کل ستون یا ردیف را به صورت یک‌باره بخوانند.
scope دو مقدار ممکن دیگر نیز دارد که colgroup و rowgroup نام دارند. این مقادیر برای عناوینی استفاده می‌شوند که روی چندین ستون یا ردیف قرار می‌گیرند. اگر نگاهی دوباره به جدول Items Sold August 2016 در آغاز این بخش از جدول داشته باشیم، می‌بینیم که سلول Clothes روی سلول‌های rousers ،Skirts و Dresses قرار می‌گیرند. همه این سلول‌ها باید به صورت هدر <th> نشانه‌گذاری شوند. از این رو Clothes عنوانی است که در ابتدای جدول قرار می‌گیرد و سه زیرعنوان دیگر را تعریف می‌کند. بدین ترتیب Clothes می‌تواند یک خصوصیت بگیرد، در حالی که سلول‌های دیگر دارای خصوصیت scope="col"هستند.
خصوصیت‌های id و headers
یک جایگزین برای استفاده از خصوصیت scope استفاده از خصوصیت‌های id و headers برای ایجاد ارتباط بین هدرها و سلول‌ها است. این روش به صورت زیر مورد استفاده قرار می‌گیرد:
- یک id یکتا به هر عنصر <th> اضافه می‌شود.
- یک خصوصیت headers به هر عنصر <td> اضافه شود. هر خصوصیت headers باید شامل فهرستی از id-ها برای همه عناصر <th> باشد که به عنوان یک هدر برای سلول عمل می‌کنند و با فاصله از هم جدا می‌شوند.
- بدین ترتیب جدول HTML یک تعریف صریح از موقعیت هر سلول در جدول پیدا می‌کند که به وسیله هدر (های) هر ستون و ردیف که بخشی از آن هستند تعریف می‌شود و تا حدودی شبیه به یک «صفحه گسترده» (Spreadsheet) است. برای این که این تکنیک به درستی کار کند، جدول باید واقعاً به هر دو هدر ردیف و ستون نیاز داشته باشد.
اگر به مثال «هزینه‌های مصرفی» بازگردیم، دو قطعه کد قبلی را می‌توان به صورت زیر بازنویسی کرد:
1<thead>
2 <tr>
3 <th id="purchase">Purchase</th>
4 <th id="location">Location</th>
5 <th id="date">Date</th>
6 <th id="evaluation">Evaluation</th>
7 <th id="cost">Cost (€)</th>
8 </tr>
9</thead>
10<tbody>
11<tr>
12 <th id="haircut">Haircut</th>
13 <td headers="location haircut">Hairdresser</td>
14 <td headers="date haircut">12/09</td>
15 <td headers="evaluation haircut">Great idea</td>
16 <td headers="cost haircut">30</td>
17</tr>
18
19 ...
20
21</tbody>نکته: این روش ارتباط بسیار دقیقی بین سلول‌های هدر و داده برقرار می‌کند، اما از نشانه‌گذاری بسیار زیادی استفاده شده است و هیچ پیش‌بینی برای خطا وجود ندارد. رویکرد scope برای اغلب جدول‌ها کافی به نظر می‌رسد.
مثال کاربردی: کار کردن با scope و headers
در این تمرین نهایی ابتدا یک کپی از فایل زیر برداشته و در سیستم خود در فایلی با نام items-sold.html درج کنید.
فایل items-sold.html
1<!DOCTYPE html>
2<html>
3
4<head>
5 <meta charset="utf-8">
6 <title>Items sold summary</title>
7 <link href="minimal-table.css" rel="stylesheet" type="text/css">
8</head>
9
10<body>
11 <h1>Items sold summary</h1>
12
13 <table>
14 <caption>Items Sold August 2016</caption>
15 <thead>
16 <tr>
17 <td> </td>
18 <td> </td>
19 <th colspan="3">Clothes</th>
20 <th colspan="2">Accessories</th>
21 </tr>
22 <tr>
23 <td> </td>
24 <td> </td>
25 <th>Trousers</th>
26 <th>Skirts</th>
27 <th>Dresses</th>
28 <th>Bracelets</th>
29 <th>Rings</th>
30 </tr>
31 </thead>
32 <tbody>
33 <tr>
34 <th rowspan="3">Belgium</th>
35 <th>Antwerp</th>
36 <td>56</td>
37 <td>22</td>
38 <td>43</td>
39 <td>72</td>
40 <td>23</td>
41 </tr>
42 <tr>
43 <th>Gent</th>
44 <td>46</td>
45 <td>18</td>
46 <td>50</td>
47 <td>61</td>
48 <td>15</td>
49 </tr>
50 <tr>
51 <th>Brussels</th>
52 <td>51</td>
53 <td>27</td>
54 <td>38</td>
55 <td>69</td>
56 <td>28</td>
57 </tr>
58 <tr>
59 <th rowspan="2">The Netherlands</th>
60 <th>Amsterdam</th>
61 <td>89</td>
62 <td>34</td>
63 <td>69</td>
64 <td>85</td>
65 <td>38</td>
66 </tr>
67 <tr>
68 <th>Utrecht</th>
69 <td>80</td>
70 <td>12</td>
71 <td>43</td>
72 <td>36</td>
73 <td>19</td>
74 </tr>
75 </tbody>
76 </table>
77
78</body>
79
80</html>همچنین کد زیر را در فایلی با نام minimal-table.css ذخیره کنید:
1html {
2 font-family: sans-serif;
3}
4
5table {
6 border-collapse: collapse;
7 border: 2px solid rgb(200,200,200);
8 letter-spacing: 1px;
9 font-size: 0.8rem;
10}
11
12td, th {
13 border: 1px solid rgb(190,190,190);
14 padding: 10px 20px;
15}
16
17th {
18 background-color: rgb(235,235,235);
19}
20
21td {
22 text-align: center;
23}
24
25tr:nth-child(even) td {
26 background-color: rgb(250,250,250);
27}
28
29tr:nth-child(odd) td {
30 background-color: rgb(245,245,245);
31}
32
33caption {
34 padding: 10px;
35}اکنون تلاش کنید، خصوصیت scope مناسب را اضافه کنید تا جدول به شکل صحیح‌تری نمایش پیدا کند. در نهایت کپی دیگری از فایل‌های اولیه ایجاد کنید و این بار با استفاده از خصوصیت‌های id و headers جدول را دسترس‌پذیر تر بسازید.
نکته: در نهایت کار خود را با دو کد زیر مقایسه کنید:
فایل کامل شده مثال هزینه‌های مصرفی با استفاده از scope
1<!DOCTYPE html>
2<html>
3
4<head>
5 <meta charset="utf-8">
6 <title>Items sold summary</title>
7 <link href="minimal-table.css" rel="stylesheet" type="text/css">
8</head>
9
10<body>
11 <h1>Items sold summary</h1>
12
13 <table>
14 <caption>Items Sold August 2016</caption>
15 <thead>
16 <tr>
17 <td> </td>
18 <td> </td>
19 <th colspan="3" scope="colgroup">Clothes</th>
20 <th colspan="2" scope="colgroup">Accessories</th>
21 </tr>
22 <tr>
23 <td> </td>
24 <td> </td>
25 <th scope="col">Trousers</th>
26 <th scope="col">Skirts</th>
27 <th scope="col">Dresses</th>
28 <th scope="col">Bracelets</th>
29 <th scope="col">Rings</th>
30 </tr>
31 </thead>
32 <tbody>
33 <tr>
34 <th rowspan="3" scope="rowgroup">Belgium</th>
35 <th scope="row">Antwerp</th>
36 <td>56</td>
37 <td>22</td>
38 <td>43</td>
39 <td>72</td>
40 <td>23</td>
41 </tr>
42 <tr>
43 <th scope="row">Gent</th>
44 <td>46</td>
45 <td>18</td>
46 <td>50</td>
47 <td>61</td>
48 <td>15</td>
49 </tr>
50 <tr>
51 <th scope="row">Brussels</th>
52 <td>51</td>
53 <td>27</td>
54 <td>38</td>
55 <td>69</td>
56 <td>28</td>
57 </tr>
58 <tr>
59 <th rowspan="2" scope="rowgroup">The Netherlands</th>
60 <th scope="row">Amsterdam</th>
61 <td>89</td>
62 <td>34</td>
63 <td>69</td>
64 <td>85</td>
65 <td>38</td>
66 </tr>
67 <tr>
68 <th scope="row">Utrecht</th>
69 <td>80</td>
70 <td>12</td>
71 <td>43</td>
72 <td>36</td>
73 <td>19</td>
74 </tr>
75 </tbody>
76 </table>
77
78</body>
79
80</html>فایل کامل شده مثال هزینه‌های مصرفی با استفاده از headers
1<!DOCTYPE html>
2<html>
3
4<head>
5 <meta charset="utf-8">
6 <title>Items sold summary</title>
7 <link href="minimal-table.css" rel="stylesheet" type="text/css">
8</head>
9
10<body>
11 <h1>Items sold summary</h1>
12
13 <table>
14 <caption>Items Sold August 2016</caption>
15 <thead>
16 <tr>
17 <td> </td>
18 <td> </td>
19 <th colspan="3" id="clothes">Clothes</th>
20 <th colspan="2" id="accessories">Accessories</th>
21 </tr>
22 <tr>
23 <td> </td>
24 <td> </td>
25 <th id="trousers">Trousers</th>
26 <th id="skirts">Skirts</th>
27 <th id="dresses">Dresses</th>
28 <th id="bracelets">Bracelets</th>
29 <th id="rings">Rings</th>
30 </tr>
31 </thead>
32 <tbody>
33 <tr>
34 <th rowspan="3" id="belgium">Belgium</th>
35 <th id="antwerp">Antwerp</th>
36 <td headers="clothes trousers belgium antwerp">56</td>
37 <td headers="clothes skirts belgium antwerp">22</td>
38 <td headers="clothes dresses belgium antwerp">43</td>
39 <td headers="accessories bracelets belgium antwerp">72</td>
40 <td headers="accessories rings belgium antwerp">23</td>
41 </tr>
42 <tr>
43 <th id="gent">Gent</th>
44 <td headers="clothes trousers belgium gent">46</td>
45 <td headers="clothes skirts belgium gent">18</td>
46 <td headers="clothes dresses belgium gent">50</td>
47 <td headers="accessories bracelets belgium gent">61</td>
48 <td headers="accessories rings belgium gent">15</td>
49 </tr>
50 <tr>
51 <th id="brussels">Brussels</th>
52 <td headers="clothes trousers belgium brussels">51</td>
53 <td headers="clothes skirts belgium brussels">27</td>
54 <td headers="clothes dresses belgium brussels">38</td>
55 <td headers="accessories bracelets belgium brussels">69</td>
56 <td headers="accessories rings belgium brussels">28</td>
57 </tr>
58 <tr>
59 <th rowspan="2" id="netherlands">The Netherlands</th>
60 <th id="amsterdam">Amsterdam</th>
61 <td headers="clothes trousers netherlands amsterdam">89</td>
62 <td headers="clothes skirts netherlands amsterdam">34</td>
63 <td headers="clothes dresses netherlands amsterdam">69</td>
64 <td headers="accessories bracelets netherlands amsterdam">85</td>
65 <td headers="accessories rings netherlands amsterdam">38</td>
66 </tr>
67 <tr>
68 <th id="utrecht">Utrecht</th>
69 <td headers="clothes trousers netherlands utrecht">80</td>
70 <td headers="clothes skirts netherlands utrecht">12</td>
71 <td headers="clothes dresses netherlands utrecht">43</td>
72 <td headers="accessories bracelets netherlands utrecht">36</td>
73 <td headers="accessories rings netherlands utrecht">19</td>
74 </tr>
75 </tbody>
76 </table>
77
78</body>
79
80</html>جمع‌بندی
چند نکته دیگر نیز وجود دارند که باید در مورد جداول HTML بدانید، اما همه موارد مهمی که تا به این جا واقعاً باید می‌دانستید در این مقاله ارائه کرده‌ایم. در بخش بعدی این سری مقالات به بررسی روش‌های استایل‌دهی جداول خواهیم پرداخت.
برای مطالعه قسمت بعدی این مجموعه مطلب آموزشی می‌توانید روی لینک زیر کلیک کنید:
اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:
- مجموعه آموزش‌های طراحی سایت با HTML و CSS
- آموزش پروژه محور HTML و CSS
- مجموعه آموزش‌های برنامه‌نویسی
- ۸ افکت HTML برای زیباتر شدن وبسایت
- HTML و هر آنچه باید پیش از شروع یادگیری آن بدانید — راهنمای مقدماتی و کاربردی
==
