جداول

جداول HTML داده‌های جدولی را با ردیف‌ها و ستون‌ها نمایش می‌دهند. شما باید بر اساس محتوایی که نمایش می‌دهید و نیازهای کاربرانتان نسبت به آن محتوا، از <table> استفاده کنید. اگر داده‌ها ارائه، مقایسه، مرتب‌سازی، محاسبه یا ارجاع متقابل می‌شوند، احتمالاً <table> انتخاب مناسبی است. اگر به سازماندهی محتوایی غیر جدولی مانند گروه بزرگی از تصاویر کوچک علاقه‌مند هستید، جداول مناسب نیستند. در عوض، فهرستی از تصاویر ایجاد کنید و با CSS به شبکه‌بندی آن سبک دهید.

در این بخش، ما تمام عناصری را که جدول را تشکیل می‌دهند، همراه با برخی از ویژگی‌های دسترسی‌پذیری و قابلیت استفاده که باید هنگام ارائه داده‌های جدولی در نظر گرفته شوند، مورد بحث قرار می‌دهیم. اگرچه یادگیری HTML بر CSS متمرکز نیست، اما برخی از ویژگی‌های CSS مخصوص جدول را پوشش خواهیم داد. برای اطلاعات بیشتر در مورد CSS، به بخش یادگیری CSS مراجعه کنید.

عناصر جدول، به ترتیب

تگ <table> محتوای جدول، شامل تمام عناصر جدول را در بر می‌گیرد. نقش ضمنی ARIA برای <table> ، table است؛ فناوری‌های کمکی می‌دانند که این عنصر یک ساختار جدولی است که شامل داده‌های مرتب شده در ردیف‌ها و ستون‌ها می‌باشد. اگر جدول حالت انتخاب را حفظ می‌کند، پیمایش دوبعدی دارد یا به کاربر اجازه می‌دهد ترتیب سلول‌ها را تغییر دهد، role="grid" را تنظیم کنید. اگر ردیف‌های grid قابل باز و بسته شدن هستند، به جای آن role="treegrid" استفاده کنید.

درون <table> ، سرتیترهای جدول ( <thead> )، بدنه‌های جدول ( <tbody> ) و به صورت اختیاری، پاصفحه‌های جدول ( <tfoot> ) را خواهید یافت. هر یک از این‌ها از ردیف‌های جدول ( <tr> ) تشکیل شده‌اند. ردیف‌ها شامل سلول‌های سرتیتر جدول ( <th> ) و داده‌های جدول ( <td> ) هستند که به نوبه خود، شامل تمام داده‌ها هستند. در DOM، قبل از هر یک از این‌ها، ممکن است دو ویژگی اضافی پیدا کنید: عنوان جدول ( <caption> ) و گروه‌های ستون ( <colgroup> ). بسته به اینکه <colgroup> دارای ویژگی span باشد یا خیر، ممکن است حاوی عناصر ستون جدول ( <col> ) تو در تو باشد.

فرزندان جدول به ترتیب عبارتند از:

1. عنصر <caption>
2. عناصر <colgroup>
3. عناصر <thead>
4. عناصر <tbody>
5. عناصر <tfoot>

ما به عناصر فرزند <table> خواهیم پرداخت که همگی اختیاری هستند اما توصیه می‌شوند، سپس نگاهی به ردیف‌ها، سلول‌های سربرگ جدول و سلول‌های داده‌های جدول خواهیم انداخت. <colgroup> در آخر بررسی خواهد شد.

عنوان جدول

روش ترجیحی برای نامگذاری جدول، عنصر معنایی <caption> است. <caption> یک عنوان جدول توصیفی و مرتبط با برنامه‌نویسی ارائه می‌دهد. این عنوان به طور پیش‌فرض برای همه کاربران قابل مشاهده و در دسترس است.

عنصر <caption> باید اولین عنصری باشد که در عنصر <table> قرار می‌گیرد. گنجاندن آن به همه کاربران این امکان را می‌دهد که هدف جدول را فوراً و بدون نیاز به خواندن متن اطراف آن بدانند. به عنوان یک جایگزین، می‌توانید aria-label یا aria-labelledby در <table> برای ارائه یک نام قابل دسترس به عنوان عنوان استفاده کنید. عنصر <caption> هیچ ویژگی خاص عنصری ندارد.

عنوان در خارج از جدول ظاهر می‌شود. مکان عنوان را می‌توان با ویژگی caption-side در CSS تنظیم کرد، که روش بهتری نسبت به استفاده از ویژگی منسوخ‌شده‌ی align است. این روش می‌تواند عنوان را در بالا و پایین تنظیم کند. موقعیت‌یابی سمت چپ و راست، با inline-start و inline-end ، هنوز به طور کامل پشتیبانی نمی‌شوند. Top نمایش پیش‌فرض مرورگر است.

ترجیحاً، جداول داده‌ها باید سرصفحه‌ها و عنوان واضحی داشته باشند و به اندازه کافی واضح باشند که تقریباً نیازی به توضیح نداشته باشند. به خاطر داشته باشید که همه کاربران توانایی‌های شناختی یکسانی ندارند. وقتی جدول «نکته مهمی را بیان می‌کند» یا به هر دلیلی نیاز به تفسیر دارد، خلاصه‌ای مختصر از نکته اصلی یا عملکرد جدول ارائه دهید. محل قرارگیری این خلاصه به طول و پیچیدگی آن بستگی دارد. اگر مختصر است، از آن به عنوان متن داخلی عنوان استفاده کنید. اگر طولانی‌تر است، آن را در عنوان خلاصه کنید و خلاصه را در پاراگراف قبل از جدول ارائه دهید و این دو را با ویژگی aria-describedby مرتبط کنید. قرار دادن جدول در یک <figure> و قرار دادن خلاصه در <figcaption> گزینه دیگری است.

بخش‌بندی داده‌ها

محتوای جداول از حداکثر سه بخش تشکیل شده است: صفر یا چند سرتیتر جدول ( <thead> )، بدنه جدول ( <tbody> ) و پاصفحه جدول ( <tfoot> ). همه اینها اختیاری هستند و صفر یا چند مورد از هر کدام پشتیبانی می‌شوند.

این عناصر به دسترسی به جدول کمک نمی‌کنند یا مانع آن نمی‌شوند، اما از نظر قابلیت استفاده مفید هستند. آن‌ها قلاب‌های سبک‌دهی را فراهم می‌کنند. به عنوان مثال، محتویات هدر را می‌توان چسبنده کرد ، در حالی که محتویات <tbody> را می‌توان طوری تنظیم کرد که پیمایش شوند. ردیف‌هایی که در یکی از این سه عنصر حاوی تو در تو نیستند، به طور ضمنی در یک <tbody> قرار می‌گیرند. هر سه نقش ضمنی یکسانی به rowgroup دارند. هیچ یک از این سه عنصر هیچ ویژگی خاص عنصری ندارند.

آنچه تاکنون داریم:

<table>
  <caption>MLW Students</caption>
  <thead></thead>
  <tbody></tbody>
  <tfoot></tfoot>
</table>

عنصر <tfoot> در ابتدا به دلایل دسترسی‌پذیری طوری تعیین شده بود که درست بعد از <thead> و قبل از <tbody> قرار گیرد، به همین دلیل است که ممکن است در کدهای قدیمی با این ترتیب غیرشهودی منبع مواجه شوید.

محتوای جدول

جداول را می‌توان به سربرگ، بدنه و پابرگ جدول تقسیم کرد، اما اگر جداول حاوی ردیف‌ها، سلول‌ها و محتوا نباشند، هیچ‌کدام از این‌ها واقعاً کاری انجام نمی‌دهند. هر ردیف جدول، <tr> شامل یک یا چند سلول است. اگر یک سلول، سلول سربرگ باشد، <th> استفاده کنید. در غیر این صورت، از <td> استفاده کنید.

شیوه‌نامه‌های کاربر-عامل معمولاً محتوای موجود در سلول سربرگ جدول <th> را به صورت وسط‌چین و پررنگ نمایش می‌دهند. این شیوه‌نامه‌های پیش‌فرض، و تمام شیوه‌نامه‌ها، بهتر است با CSS کنترل شوند، نه با ویژگی‌های منسوخ‌شده‌ای که قبلاً در سلول‌ها، ردیف‌ها و حتی <table> به صورت جداگانه در دسترس بودند.

ویژگی‌هایی برای افزودن فاصله بین سلول‌ها و درون سلول‌ها، برای حاشیه‌ها و برای ترازبندی متن وجود داشت. فاصله‌گذاری سلولی و فاصله‌گذاری سلولی که فضای بین محتوای یک سلول و حاشیه آن و بین حاشیه سلول‌های مجاور را تعریف می‌کنند، باید به ترتیب با ویژگی‌های border-collapse و border-spacing در CSS تنظیم شوند. اگر border-collapse: collapse تنظیم شده باشد، Border-spacing هیچ تاثیری نخواهد داشت. اگر border-collapse: separate; تنظیم شده باشد، می‌توان سلول‌های خالی را با empty-cells: hide; کاملاً پنهان کرد. برای کسب اطلاعات بیشتر در مورد استایل‌بندی جداول، در اینجا یک اسلایدشو تعاملی از سبک‌های CSS مرتبط با جدول ارائه شده است.

در مثال‌ها، ما با استفاده از CSS به جدول و هر سلول جداگانه حاشیه اضافه کرده‌ایم تا برخی از ویژگی‌ها را آشکارتر کنیم:

در این مثال، ما یک عنوان، یک سربرگ جدول و یک بدنه جدول داریم. سربرگ دارای یک ردیف است که شامل سه سلول <th> سربرگ است و در نتیجه سه ستون ایجاد می‌کند. بدنه شامل سه ردیف داده است: سلول اول، سلول سربرگ برای آن ردیف است، بنابراین از <th> به جای <td> استفاده می‌کنیم.

سلول <th> دارای معنای معنایی است و نقش‌های ARIA ضمنی columnheader یا rowheader را دارد. این سلول، بسته به مقدار ویژگی scope شمارشی، به عنوان سربرگ برای ستون یا ردیف سلول‌های جدول تعریف می‌شود. اگر scope به طور صریح تنظیم نشده باشد، مرورگر به طور پیش‌فرض از col یا row استفاده می‌کند. از آنجا که ما از نشانه‌گذاری معنایی استفاده کرده‌ایم، سلول 1956 دارای دو سربرگ است: Year و Lou Minious. این ارتباط به ما می‌گوید که "1956" "سال" فارغ‌التحصیلی "Lou Minious" است. در این مثال، همانطور که می‌توانیم کل جدول را ببینیم، این ارتباط از نظر بصری آشکار است. استفاده از <th> این ارتباط را حتی زمانی که ستون یا ردیف هدر از دید خارج شده است، فراهم می‌کند. ما می‌توانستیم به طور صریح <th scope="col">Year</th> و <th scope="row">Lou Minious</th> را تنظیم کنیم، اما با جدولی مانند این، مقادیر پیش‌فرض شمارشی کار می‌کنند. مقادیر دیگر برای scope شامل rowgroup و colgroup هستند که برای جداول پیچیده مفید هستند.

ادغام سلول‌ها

مشابه MS Excel، Google Sheets و Numbers، می‌توان چندین سلول را در یک سلول واحد ادغام کرد. این کار را می‌توان با ویژگی‌های colspan و rowspan در HTML انجام داد:

• colspan دو یا چند سلول مجاور را در یک ردیف ادغام می‌کند.
• rowspan وقتی به سلول اول ردیف‌های ادغام‌شده اضافه شود، سلول‌های بین ردیف‌ها را ادغام می‌کند.

در این مثال، سربرگ جدول شامل دو ردیف است. اولین ردیف سربرگ شامل سه سلول است که چهار ستون را در بر می‌گیرد: سلول میانی دارای colspan="2" است. این دو سلول مجاور را ادغام می‌کند. سلول‌های اول و آخر شامل rowspan="2" هستند. این کار سلول را با سلول ردیف مجاور، بلافاصله زیر آن، ادغام می‌کند.

ردیف دوم در سربرگ جدول شامل دو سلول است؛ این سلول‌ها برای ستون‌های دوم و سوم در ردیف دوم هستند. هیچ سلولی برای ستون اول یا آخر تعریف نشده است زیرا سلول ستون‌های اول و آخر در ردیف اول، دو ردیف را در بر می‌گیرد.

در مواردی که یک سلول توسط چندین سلول سربرگ با ارتباطاتی تعریف شده است که نمی‌توان آنها را به تنهایی با ویژگی‌های scope تنظیم کرد، ویژگی headers را به همراه لیستی از سربرگ‌های مرتبط که با فاصله از هم جدا شده‌اند، اضافه کنید. از آنجایی که این مثال یک جدول پیچیده‌تر است، ما به طور صریح دامنه سربرگ‌ها را با ویژگی scope تعریف می‌کنیم. برای روشن‌تر شدن موضوع، ویژگی headers را به هر سلول اضافه کردیم.

ممکن است در این مورد ویژگی‌های headers ضروری نبوده باشند، اما با پیچیده‌تر شدن جداول شما، به خاطر سپردن آنها مهم است. جداولی با ساختارهای پیچیده، مانند جداولی که هدرها یا سلول‌ها در هم ادغام شده‌اند یا بیش از دو سطح هدر ستون یا ردیف دارند، نیاز به شناسایی صریح سلول‌های هدر مرتبط دارند. در چنین جداول پیچیده‌ای، هر سلول داده را به طور صریح با هر سلول هدر مربوطه، با لیستی از مقادیر id تمام هدرهای مرتبط که با فاصله از هم جدا شده‌اند، به عنوان مقدار ویژگی headers مرتبط کنید.

ویژگی headers بیشتر در عناصر <td> یافت می‌شود، اما در <th> نیز معتبر است.

با این اوصاف، درک ساختارهای پیچیده جدول می‌تواند برای همه کاربران، نه فقط کاربران صفحه‌خوان، دشوار باشد. از نظر شناختی و از نظر پشتیبانی صفحه‌خوان، جداول ساده‌تر، با تعداد کم یا بدون سلول‌های spanned، حتی بدون اضافه کردن scope و header، بهتر درک می‌شوند. همچنین مدیریت آنها آسان‌تر است!

جداول سبک

دو عنصر نسبتاً مبهم وجود دارد که به طور خلاصه به آنها اشاره شد: گروه ستون، <colgroup> ، عنصر و تنها زیرمجموعه آن، عنصر ستون خالی <col> . عنصر <colgroup> برای تعریف گروه‌های ستون‌ها یا عناصر <col> در یک جدول استفاده می‌شود.

در صورت استفاده، گروه‌بندی ستون‌ها باید در <table> ، بلافاصله پس از <caption> و قبل از هرگونه داده جدول، به صورت تو در تو قرار گیرد. اگر بیش از یک ستون را در بر می‌گیرند، از ویژگی span استفاده کنید.

ترتیب طرح کلی محتوا برای یک جدول عموماً به شرح زیر است، که <table> و <caption> دو عنصری هستند که باید در آن گنجانده شوند:

<table>
  <caption>Table Caption</caption>
  <colgroup>
    <col/>
  </colgroup>
  <thead>...

<colgroup> و <col> هیچ معنای معنایی ندارند، که این امر بر دسترسی به جدول تأثیر می‌گذارد. با این حال، آنها به شما در استایل‌دهی ستون‌ها با CSS، مانند تنظیم عرض، کمک می‌کنند.

سبک‌های مرتبط با <td> و <th> سبک‌های <col> را نادیده می‌گیرند. در CodePen، ما colspan طوری تنظیم می‌کنیم که برخی از ردیف‌های جدول را ادغام کند، اما نه همه آنها را. اگر انتخابگر CSS مربوط به nth-child روی <tr> اعمال شود، بسته به اینکه کدام ردیف یا ستون ادغام شده است، می‌تواند بر سبک تأثیر بگذارد.

متأسفانه، فقط تعداد کمی از ویژگی‌ها پشتیبانی می‌شوند. استایل‌ها به سلول‌ها ارث‌بری نمی‌شوند و تنها راه برای هدف قرار دادن سلول‌ها با <col> استفاده از یک انتخابگر پیچیده مانند انتخابگر رابطه‌ای :has() است.

اگر هر دو عنصر <table> و <colgroup> رنگ پس‌زمینه داشته باشند، background-color <colgroup> در بالا قرار می‌گیرد. ترتیب ترسیم به این صورت است: جدول، گروه‌های ستون، ستون‌ها، گروه‌های ردیف، ردیف‌ها، که سلول‌ها در آخر و در بالا قرار می‌گیرند، همانطور که در طرح لایه‌های جدول نشان داده شده است. عناصر <td> و <th> از عناصر <colgroup> یا <col> مشتق نمی‌شوند و سبک آنها را به ارث نمی‌برند.

برای خط‌دار کردن یک جدول، انتخابگرهای ساختاری CSS مفید هستند. برای مثال، tbody tr:nth-of-type(odd) {background-color: rgba(0 0 0 / 0.1);} به هر سطر فرد در بدنه جدول، رنگ مشکی شفاف اضافه می‌کند، در حالی که به جلوه‌های پس‌زمینه تنظیم شده روی <colgroup> اجازه می‌دهد تا از میان سطرها نمایش داده شوند.

جداول به طور پیش‌فرض واکنش‌گرا نیستند. در عوض، اندازه آنها به طور پیش‌فرض بر اساس محتوایشان تنظیم می‌شود. برای اینکه سبک‌بندی طرح‌بندی جدول به طور مؤثر در دستگاه‌های مختلف کار کند، اقدامات اضافی لازم است. اگر ویژگی نمایش CSS را برای عناصر جدول تغییر می‌دهید، ویژگی‌های role ARIA را نیز در نظر بگیرید. اگرچه ممکن است این کار اضافی به نظر برسد، ویژگی display CSS می‌تواند بر درخت دسترسی در برخی مرورگرها تأثیر بگذارد.

داده‌های فعلی

عناصر جدول دارای معانی معنایی هستند که توسط فناوری‌های کمکی برای کمک به کاربران در پیمایش سطرها و ستون‌ها بدون گم شدن استفاده می‌شوند. عنصر <table> نباید برای ارائه استفاده شود. اگر به یک عنوان روی یک لیست نیاز دارید، از یک سربرگ و یک لیست استفاده کنید. اگر می‌خواهید محتوا را در ستون‌های زیادی چیدمان کنید، از چیدمان چند ستونی استفاده کنید. اگر می‌خواهید محتوا را در یک شبکه چیدمان کنید، از CSS grid استفاده کنید.

فقط از جدول برای داده‌ها استفاده کنید.

به این شکل به آن فکر کنید: اگر داده‌های شما برای ارائه در یک جلسه به یک صفحه گسترده نیاز دارند، از <table> استفاده کنید. اگر می‌خواهید از ویژگی‌های موجود در نرم‌افزارهای ارائه، مانند Google Slides یا PowerPoint استفاده کنید، احتمالاً به یک فهرست توضیحات نیاز دارید.

به طور خلاصه: اگر داده‌های جدولی ارائه نمی‌دهید، از <table> استفاده نکنید. اگر از جدول برای ارائه استفاده می‌کنید، role="none" را تنظیم کنید.

بسیاری از توسعه‌دهندگان از جداول برای طرح‌بندی فرم‌ها استفاده می‌کنند، اما این کار غیرضروری است. شما باید در مورد فرم‌های HTML اطلاعات داشته باشید.

درک خود را بررسی کنید

دانش خود را در مورد جداول آزمایش کنید.