جداول

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

در این بخش، می‌خواهیم تمام عناصر تشکیل‌دهنده جدول را به همراه برخی ویژگی‌های دسترسی و قابلیت استفاده که باید هنگام ارائه داده‌های جدولی در نظر بگیرید، مورد بحث قرار دهیم. در حالی که Learn HTML اساساً در مورد 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> هیچ ویژگی خاص عنصر ندارد.

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

ترجیحاً، جداول داده‌ها باید دارای سرصفحه‌های واضح و شرح باشند و به اندازه کافی ساده باشند که تقریباً خود توضیح دهند. به خاطر داشته باشید که همه کاربران توانایی های شناختی یکسانی ندارند. هنگامی که جدول در حال "نقطه یابی" است، یا در غیر این صورت نیاز به تفسیر دارد، خلاصه مختصری از نکته اصلی یا عملکرد جدول ارائه دهید. جایی که آن خلاصه قرار می گیرد به طول و پیچیدگی آن بستگی دارد. اگر مختصر است، از آن به عنوان متن درونی کپشن استفاده کنید. اگر طولانی تر بود، آن را در عنوان خلاصه کنید، و خلاصه را در پاراگراف قبل از جدول ارائه دهید، و این دو را با ویژگی 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> به صورت وسط و پررنگ نمایش می دهند. این سبک‌های پیش‌فرض، و تمام استایل‌ها، به‌جای ویژگی‌های منسوخ شده‌ای که در سلول‌ها، ردیف‌ها و حتی <table> در دسترس بودند، به بهترین وجه با CSS کنترل می‌شوند.

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

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

در این مثال، ما یک عنوان، یک هدر جدول و یک بدنه جدول داریم. سرصفحه دارای یک ردیف است که شامل سه سلول <th> سرصفحه است که در نتیجه سه ستون ایجاد می کند. بدنه شامل سه ردیف داده است: سلول اول یک سلول سرصفحه برای سطر است، بنابراین به جای <td> <th> می کنیم.

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

ادغام سلول ها

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

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

ردیف دوم در سرصفحه جدول شامل دو سلول است. اینها سلولهای ستون دوم و سوم در ردیف دوم هستند. هیچ سلولی برای ستون اول یا آخر اعلان نمی شود زیرا سلول در اولین و آخرین ستون در سطر اول دو ردیف است.

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

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

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

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

میزهای شیک

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

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

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

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

نه <colgroup> و نه <col> از نظر کمک به در دسترس‌تر کردن جدول، معنای معنایی ندارند، اما امکان استایل ستون محدود، از جمله تعیین عرض برای ستون با CSS را فراهم می‌کنند.

تا زمانی که هیچ سبک <td> یا <th> وجود نداشته باشد که این استایل را لغو کند، سبک‌های <col> به یک ستون استایل می‌دهند. به عنوان مثال، وقتی <colspan> برای ادغام سلول‌ها در برخی از ردیف‌های جدول استفاده می‌شود، اما نه همه آنها، نمی‌توانید مطمئن باشید که انتخاب‌کننده‌ای مانند tr > *:nth-child(8) که فرزند هشتم جدول را انتخاب می‌کند. هر سطر، ستون 8 را به طور کامل برجسته می کند یا ستون 8 را برای چندین ردیف برجسته می کند، اما با تعداد سلول های ستون 9 و 10، بسته به اینکه سلول های ردیف یا ستونی ادغام شده اند.

متأسفانه، تنها چند ویژگی پشتیبانی می‌شوند، سبک‌ها به سلول‌ها به ارث نمی‌رسند، و تنها راه استفاده از عنصر <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> show through تنظیم شده اند.

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

ارائه داده ها

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

در حالی که مرتب‌سازی ستون‌های جدول در حیطه کاری جاوا اسکریپت است، علامت‌گذاری سرصفحه‌ها برای اینکه کاربران بدانند ستون قابل مرتب‌سازی است، در حیطه ی HTML است. به کاربران خود اطلاع دهید که ستون‌های جدول با نمادهای صعودی، نزولی یا مرتب نشده قابل مرتب‌سازی هستند. ستونی که در حال حاضر مرتب شده است باید دارای ویژگی aria-sort با مقدار شمارش شده جهت مرتب سازی باشد. <caption> می‌تواند مودبانه به‌روزرسانی‌ها را برای مرتب‌سازی ترتیب از طریق aria-live و دامنه‌ای که به‌صورت پویا به‌روزرسانی می‌شود و برای کاربران صفحه‌خوان قابل مشاهده است، اعلام کند. از آنجایی که ستون با کلیک کردن روی محتوای سرصفحه قابل مرتب‌سازی است، محتوای سرصفحه باید یک <button> باشد.

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

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

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

دانش خود را از جداول تست کنید.