یک راهنمای کامل برای عنصر جدول

این داده هایی است که در چندین محور مفید است. تصور کنید که انگشت خود را در یک ردیف (افقی) اجرا کنید تا یک شخص مجرد و اطلاعات مربوط به آنها را ببینید. یا بالا و پایین یک ستون (عمودی) برای درک تنوع یا الگوی داده ها در آن نقطه.

که HTML مانند این خواهد بود:

در کنار و برای بسته بندی ردیف های جدول وجود دارد که نشان دهنده پاورقی میز است. مانند ، بهترین ها برای نشان دادن معنایی اینها ردیف های داده نیستند بلکه اطلاعات جانبی هستند.

به عنوان مثال می توان از آن استفاده کرد تا عنوان را در مورد یک میز بصری بسیار بلند/بلند تکرار کند که در آن ممکن است دیدن عناوین ستون در پایین از قسمت بالا آسانتر باشد. اگرچه لزوماً نیازی به استفاده از آن ندارید.

سلول ها: TD و TH

با استفاده از نسخه ی نمایشی ساده موجود ، ردیف بالا همه هدر است. نه داده ها ، فقط عناوین برای داده ها. تمام بقیه ردیف ها داده هستند. بنابراین:

عناصر لزوماً محدود به بودن نیستند. آنها به سادگی اطلاعات هدر را نشان می دهند. بنابراین می توان از آنها استفاده کرد ، به عنوان مثال ، در شروع یک ردیف در صورت مرتبط بودن. بعداً پرونده ای مانند آن را پوشش خواهیم داد.

بیشتر جداول که تاکنون مشاهده خواهید کرد از رنگ ها و خطوط برای تمایز قسمت های مختلف جدول استفاده می کنید. مرزها بسیار متداول هستند. به طور پیش فرض ، تمام سلولهای جدول با 2px (از طریق صفحه شیوه کاربر) از یکدیگر فاصله می گیرند ، مانند این:

به شکاف اضافی جزئی بین ردیف اول و بقیه توجه کنید. این امر ناشی از استفاده از فاصله پیش فرض مرزی در آن است و آنها را کمی اضافی از هم جدا می کند. این حاشیه نیست ، آنها فرو نمی روند. شما می توانید آن فاصله را مانند:

اما بسیار رایج تر این است که آن فضا را حذف کنید. این خاصیت کاملاً نادیده گرفته می شود و اگر این کار را انجام دهید فضا از بین می رود:

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

هنگام شروع کار با سلولهای متصل ، باید کمی ریاضی ذهنی را انجام دهید.colspan نسبتاً آسان است. هر سلول جدول "ارزش" دارد ، مگر اینکه یک ویژگی Colspan داشته باشد و پس از آن ارزش بسیاری را دارد. مقادیر مربوط به هر سلول جدول را در آن ردیف جدول اضافه کنید تا مقدار نهایی دریافت کنید. هر ردیف باید دقیقاً این مقدار را داشته باشد ، وگرنه شما یک طرح جدول ناخوشایند دریافت خواهید کرد که مستطیل درست نمی کند (طولانی ترین ردیف از آن خارج می شود).

Rowspan مشابه است ، فقط کمی سخت تر و بیشتر یک جهش ذهنی است ، زیرا ستون ها مانند ردیف ها گروه بندی نمی شوند. اگر یک عنصر جدول دارای ویژگی ردیف باشد ، به طور عمودی در دو ردیف قرار دارد. این بدان معناست که ردیف زیر آن به تعداد سلول های جدول 1+ می رسد و برای تکمیل ردیف به یک سلول میز کمتر نیاز دارد.

کار کردن در ذهن شما می تواند بی دست و پا باشد ، اما ما در اینجا توسعه دهندگان هستیم ، می توانیم این کار را انجام دهیم =).

اغلب این ویژگی ها به روش های بسیار ساده ای مانند اتصال چند هدر جدول مرتبط استفاده می شوند:

به همان اندازه که نیاز به وجود دارد ... یا ظرف را پر کنید ... یا فراتر از آن

خود عنصر جدول در میزان گسترده بودن آن غیر معمول است. مانند یک عنصر سطح بلوک رفتار می کند (به عنوان مثال) به این دلیل که اگر یک جدول را بعد از دیگری قرار دهید ، هر یک بر روی خط خاص خود قرار می گیرند. اما عرض واقعی جدول فقط به همان اندازه که لازم باشد ، گسترده است.

اگر مقدار متن در جداول وسیع ترین ردیف فقط 100px عرض باشد ، جدول عرض 100px خواهد بود. اگر مقدار متن (در صورت قرار دادن یک خط) از ظرف گسترده تر باشد ، بسته می شود.

اما اگر به متن گفته می شود که بسته بندی نشود (یعنی فضای سفید: NowRap ؛) جدول خوشحال است که از ظرف بیرون می رود و گسترده تر می شود. سلولهای جدول نیز بسته نمی شوند ، بنابراین اگر تعداد زیادی از آنها برای جا مناسب باشد ، جدول نیز گسترده تر خواهد شد.

دو میز محور

بعضی اوقات منطقی است که داده های جدولی دو محور داشته باشند. مانند یک وضعیت مرجع متقابل. جدول ضرب نمونه ای از این است:

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

چه موقع از جداول استفاده کنید

زمان مناسبی برای استراحت و بحث در مورد جداول است. شاید شما توصیه های عمومی را شنیده باشید: جداول برای داده های جدولی است (به اولین جمله این پست وبلاگ مراجعه کنید)."آیا این در یک صفحه گسترده معنی دارد؟"آزمایش معمولاً مناسب است.

چه نوع مواردی در جداول مناسب است؟در اینجا برخی از آنها وجود دارد: یک برنامه/قیمت گذاری/مقایسه ویژگی ها ، نمرات بولینگ ، یک شبکه داخلی داده های کارمندان ، داده های مالی ، تقویم ، پنل اطلاعات حقایق تغذیه ، یک حل کننده معما منطق و غیره.

ممکن است گاهی اوقات بشنوید: جداول غیر مهمی هستند. این درست نیست - آنها از نظر معنایی داده های جدولی را نشان می دهند. جداول انتخاب مناسبی در این مورد است.

هنگام استفاده از جداول

استفاده نامناسب برای جداول برای چیدمان است. این ممکن است ضد شهود به نظر برسد. با نگاهی به چگونگی کار جداول ممکن است آنها را برای طرح ایده آل به نظر برساند. کنترل آسان ، بسیار منطقی ، قابل پیش بینی و نه همه شکننده است.

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

صحبت کردن در مورد معناشناسی گاهی اوقات کمی دشوار است (برخی از آنها می خواند: 1 ، 2 ، 3 ، 4 ، 5) ، بنابراین بیایید در مورد چیزی که همه ما به طور کلی با آن موافق هستیم صحبت کنیم (حتی اگر ما آنقدر خوب نباشیم که می خواهیم): وب سایت ها باید در دسترس باشند. یک بخش از دسترسی خوانندگان صفحه نمایش است. خوانندگان صفحه نمایش جداول از بالا به پایین ، از چپ به راست را می خوانند. این بدان معناست که ترتیب نحوه ارائه سایت شما توسط ساختار جدول دیکته می شود ، که توسط انتخاب های بصری انتخاب نمی شود که انتخاب های دسترسی ندارند. لازم به ذکر نیست که یک خواننده صفحه نمایش حتی ممکن است شروع داده های جدولی را اعلام کند که بدتر از بی فایده است.

صحبت از نظم منبع ، این بیش از دسترسی را تحت تأثیر قرار می دهد. یک طرح "جانبی در سمت چپ" را تصور کنید. یک جدول نشان می دهد که جدول برای اولین بار در سفارش منبع قرار می گیرد ، که در حالی که برای دسترسی نیز بد است ، احتمالاً برای سئو نیز بد است ، به طور بالقوه محتوای جانبی شما را بالاتر از محتوای اولیه ارزیابی می کند.

آیا می توانید با استفاده از برچسب های معنایی در برچسب های جدول ، مشکلات SEO را برطرف کنید؟احتمالاً تا حدودی ، اما اکنون شما از HTML دو برابر استفاده می کنید. اگر واقعاً به توانایی طرح یک جدول نیاز دارید اما می خواهید از برچسب های معنایی استفاده کنید ، به بخش بعدی مراجعه کنید. اگر به نوعی با استفاده از برچسب های جدول برای چیدمان کاملاً گیر کرده اید ، از ARIA نقش = "ارائه" روی جدول استفاده کنید تا آن را به این ترتیب نشان دهید.

همانطور که من این را در نیمه دوم سال 2013 می نویسم ، جداول به عنوان یک انتخاب طرح به مراتب کمتر و حتی جذاب تر شده اند. ما شاهد استفاده بسیار بیشتری از موقعیت یابی مطلق هستیم که نمی توانید در داخل یک میز انجام دهید. ما می بینیم که Flexbox بسیار جذاب است و در حاشیه قابلیت استفاده اصلی قرار دارد. ما شاهد طرح بندی شبکه هستیم. ما می بینیم که از بلوک درون خطی استفاده می شود. ما شاهد شکنندگی شناورها در روزهای قدیمی هستیم.

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

ساختن عناصر معنایی مانند یک میز رفتار می کنند

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

از سبک های درون خطی استفاده نکنید ، بلکه فقط برای درک این مسئله در اینجا آمده است:

یک ترفند مفید در اینجا این است که اگر نمی خواهید ، حتی به عنصر ردیف جدول در آنجا احتیاج ندارید. مجموعه ای از نمایشگر: سلول جدول ؛عناصری که کودکان یک نمایشگر هستند: جدول ؛عنصر مانند همه در یک ردیف رفتار خواهد کرد.

شما همیشه ویژگی نمایشگر عنصر را تغییر می دهید تا رفتار سبک را بدست آورید. در اینجا مقادیر وجود دارد:

همچنین نمایشگر وجود دارد: جدول درون خط ؛که بسیار جالب استبه یاد داشته باشید که ما در مورد چگونگی عرض عناصر جدول عجیب و غریب در بالا صحبت کردیم. آنها فقط به همان اندازه که نیاز دارند گسترده هستند ، اما در خطوط جدید شکسته می شوند. این تقریباً مثل این است که آنها عناصر بلوک درون خطی هستند که اتفاق می افتد. این باعث می شود آنها به معنای واقعی کلمه مانند عناصر درون خطی ، بدون شکستن باشند.

اگر می خواهید در مورد استفاده از عناصر معنایی و همچنین چیدمان به سبک جدول چیزهای بیشتری بیاموزید ، هر آنچه را که درباره CSS می دانید اشتباه است!

من هرگز طرفدار عظیمی از این عنوان نبوده ام ، زیرا نشان می دهد که استفاده از این طرح سبک به روش صحیح است و هر تکنیک طرح دیگر که استفاده می کنید به روشی اشتباه است. اما همانطور که گفتم ، این می تواند بسیار مفید باشد و خوشحالم که در CSS است. فقط کاملاً آگاه باشید که مهم نیست از چه نوع عناصری برای ایجاد یک طرح مبتنی بر جدول استفاده می کنید ، هنوز هم در معرض همان مشکلات (عمدتا وابستگی به سفارش منبع) است.

همه عناصر مرتبط با جدول

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

تمام ویژگی های مربوط به جدول

ویژگی های بسیار کمی وجود دارد که مخصوص جداول است. البته می توانید از کلاس و شناسه و تمام ویژگی های معمولی جهانی استفاده کنید. قبلاً تعداد کمی وجود داشت ، اما بیشتر آنها مخصوص یک ظاهر طراحی شده و به این ترتیب مستهلک بودند (همانطور که این کار CSS است).

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

پشته میز

There is an implied vertical stacking of table elements, just like there is in any HTML parent>سناریوی فرزندان. درک در جداول بسیار مهم است زیرا به خصوص وسوسه انگیز است که مواردی مانند پس زمینه را روی میز یا ردیف های جدول اعمال کنید ، فقط این که پس زمینه روی یک سلول میز "آن را نادیده بگیرید" (در واقع فقط در بالای آن نشسته است).

در اینجا چگونه به نظر می رسد (با استفاده از ویژگی 3D Firefox در ابزارهای DEV خود):

قوانین مهم سبک برای جداول

می توانید از بیشتر خواص CSS در عناصر جدول استفاده کنید. به عنوان مثال ، فونت خانواده درست مانند هر عنصر دیگری روی میزها کار می کند. و قوانین آبشار اعمال می شود. فونت خانواده را روی جدول بمالید ، اما یک خانواده فونت متفاوت روی سلول جدول ، سلول جدول برنده می شود زیرا این عنصر واقعی با متن داخل است.

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

این لیست جامع نیست. سایر موارد CSS وجود دارد که مربوط به جداول است. به عنوان مثال ، شما نمی توانید یک سلول جدول را نسبتاً قرار دهید که در آن می توانید آن را در اطراف خود قرار دهید یا موارد را کاملاً در آن قرار دهید. هرچند روش هایی وجود دارد.

اگر می توانید با جداول به عجیب و غریب CSS فکر کنید ، در نظرات زیر به اشتراک بگذارید.

سبک های پیش فرض / صفحه سبک عامل کاربر

من هر عنصر را در Tools Chrome Dev نیز مورد بازرسی قرار دادم ، که اکنون در Blink است ، و هنوز هم یکسان است.

هر چند خنده دار استمطمئناً ، متن موجود در S به طور پیش فرض متمرکز است (متن-آنالا: مرکز ؛). اما این در برگه UA نیست. یک معامله بزرگ نیست بلکه مرموز است و باعث می شود تعجب کنید که سایر اتفاقات مرموز در ارائه چه اتفاقی می افتد.

برگه UA برای جداول با مرورگر تا مرورگر متفاوت است. به عنوان مثال ، در Firefox (در اینجا صفحه نمایش UA 3. 6 وجود دارد ، اما این در V23 نیز صادق است) سلولهای جدول این موارد را دارند:

مهمتر از همه ، 1 عدد از بالشتک که WebKit ندارد. مطمئناً در بیشتر موارد معامله بزرگی نیست ، اما متفاوت است. این همان چیزی است که CSS (و پروژه های مرتبط با آن) تنظیم می کند: حذف تفاوت ها. بنابراین اجازه دهید این موارد را بررسی کنیم.

تنظیم مجدد سبک های جدول پیش فرض

محبوب ترین تنظیم مجدد CSS در جهان ، Meyer Reset ، این کار را به جداول انجام می دهد:

یک جایگزین برای تنظیم مجدد CSS وجود دارد ، هرچند ، normalize. css. فلسفه کمی متفاوت است. به جای صفر از همه سبک ها ، به طور خاص سبک های متناقض شناخته شده را به یک پیش فرض معقول تبدیل می کند. مشاوره کلی من در مورد استفاده از normalize. css این است: چیزی را از آن حذف نکنید. اگر در آنجا باشد ، باید برای قوام باشد. اما احساس راحتی کنید که هر چیزی را در آنجا تغییر دهید.

عادی کردن این کار فقط به جداول:

من باید در اینجا کمی عمیق تر به این استدلال بپردازم زیرا به نظر غیر معمول است ...

1. من طرفدار سقوط مرزی هستم: فروپاشی زیرا فاصله بین سلول ها معمولاً بی دست و پا است ، اما ، پیش فرض در هر مرورگر که من از آن می دانم ، سقوط مرزی است: جداگانه. بنابراین نیازی به عادی سازی نیست.
2. اگر سقوط مرزی فروپاشی است ، فاصله مرزی مهم نیست.
3. عناصر سلولی جدول نیاز به عادی سازی دارند (به عنوان مثال تفاوت بالشتک Firefox) اما این در آنجا نیست.

یک معامله بسیار بزرگ نیست.

این نوع کاری است که احتمالاً معمولاً انجام می دهم:

عناصر "ضمنی" و برچسب های بدون بسته

این بیت نسبتاً ناخوشایند HTML را بررسی کنید:

این ممکن است عجیب باشد ، اما معتبر است. اینجا چه خبره؟

اگر جدول ارائه شده را در مرورگر بازرسی کنیم ، می بینیم که برچسب هایی که برچسب های بسته شده آنها را از دست نمی دهند با برچسب های بسته شده نشان داده می شوند. اینها به طور خودکار برای ما اضافه می شوند. اما برخی از عناصر کاملاً جدید در آنجا نیز وجود دارد:

نکته ای که باید توجه کنیم این است که به طور خودکار در یک بسته بندی شده است. حتی اگر قرار بود انجام دهیم:

شما فکر می کنید سلول دوم قرمز خواهد بود ، نه اولین ، زیرا Colgroup "اول" فقط بر سلول دوم تأثیر می گذارد. اما هنگام ارائه ، هر دو ستون در یک گروه جمع می شوند ، بنابراین انتخاب کننده CSS اولین مورد را انتخاب می کند.

این عنصر نیز دلالت دارد. اگر از هیچ یک از tbody ، thead یا tfoot استفاده نمی کنید ، کل روده های جدول در tbody پیچیده می شود. اگر از گلدان استفاده می کنید ، کل جدول در آن پیچیده می شود تا زمانی که یک tbody پیدا کند ، در صورت عدم استفاده ، آن را به صورت خودکار خرد می کند و بقیه را در Tbody می پیچید (همچنین اختیاری برای بسته شدن). اگر اگر یک tfoot پیدا کنید ، می توانید تصور کنید که چه اتفاقی می افتد (اگرچه به یاد داشته باشید که باید قبل از TBody بیاید).

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

ایجاد یک میز نه یک میز

ممکن است یک وضعیت در جایی ایجاد شود که شما باید یک عنصر جدول را مجبور کنید تا رفتار طرح بندی جدول خود را به نمایش نگذارید و بیشتر شبیه یک عنصر معمولی باشد.

این ترفند در اصل برای تنظیم مجدد خاصیت نمایش سلولهای جدول است:

ما می توانیم خیلی سریع یک جدول را بدون جدول قرار دهیم:

فقط برای ایمن بودن ، من کل او را مجدداً تنظیم می کنم. فقط باعث می شود احساس بهتری داشته باشم که می دانم عناصر والدین نیز برای سوار شدن در کنار هم هستند و دلهره آور نخواهند شد.

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

ما قبلاً در مورد مشکلات استفاده از جداول برای چیدمان و دسترسی صحبت کردیم. اما با فرض اینکه جدول به درستی برای داده های جدولی مورد استفاده قرار می گیرد ، هنوز نگرانی های قابل دسترسی کاملاً کمی وجود دارد.

مقالات عالی در این مورد وجود دارد:

• Webaim: ایجاد جداول در دسترس
• کالج جامعه پورتلند: نمونه هایی از طرح جدول خوب و بد برای خوانندگان صفحه نمایش
• قابلیت استفاده وب: جداول داده های قابل دسترسی

میزهای نواری گورخر

اگر رنگ پس زمینه را روی عناصر سلول جدول تنظیم نکنید ، می توانید آنها را روی ردیف های جدول قرار دهید. بنابراین در ابتدایی ترین ، می توانید انجام دهید:

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

اگر نیاز به پشتیبانی از مرورگرهایی دارید که درک نمی کنند: کودک نهم () (بسیار لعنتی قدیمی) می توانید از jQuery برای انجام این کار استفاده کنید.

به نظر می رسد مطالعات نشان می دهد که گورخر به طور کلی ایده خوبی است.

برجسته کردن ردیف ها و ستون ها

روشن کردن یک ردیف خاص بسیار آسان است. برای آن می توانید یک نام کلاس را به یک ردیف اضافه کنید:

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

یک جدول با چهار ستون در هر ردیف چهار عنصر خواهد داشت:

سپس می توانید یک مورد خاص را برجسته کنید ، مانند:

با این حال این به ندرت مفید است. اگر زمینه یک عنصر ردیف یا عنصر سلول جدول را تنظیم کنید ، همیشه یک پس زمینه یک عنصر ستون را ضرب می کند. صرف نظر از ویژگی

احتمالاً بهتر است نام کلاس را در هر عنصر سلول جدول جداگانه تنظیم کنید که اتفاق می افتد با آن موقعیت ستون در ردیف مطابقت داشته باشد. پسندیدن:

برجسته کردن ستون/ردیف/سلول در شناور

برجسته سازی سلول بسیار آسان است. شما می توانید آن را درست در CSS انجام دهید:

برجسته کردن ردیف به همان راحتی است. می توانید زمینه را روی ردیف های جدول تنظیم کنید و تا زمانی که پس زمینه را روی سلولهای جدول تنظیم نکنید ، نشان داده می شود.

اگر زمینه ای را روی سلولهای جدول تنظیم کنید ، همیشه می توانید فقط به TR: hover td ، tr: hover th<>بنابراین هنوز هم بسیار آسان است.

برجسته کردن ستون ترفندر است. شما نمی توانید از Col: Hover استفاده کنید زیرا این ستون ها عناصر واقعی نیستند که فضای پیکسل را روی صفحه نمایش می دهند که می توانید از آن استفاده کنید. تنها گزینه JavaScript است.

من آن را در جاوا اسکریپت وانیل در اینجا نوشتم ، فقط برای سرگرمی:

اینگونه کار می کند:

1. مجموعه ای از همه سلول ها را دریافت کنید
2. یک رویداد ماوس و ماوس را به تمام آن سلول ها متصل کنید
3. هنگامی که رویداد ماوسور آتش می گیرد ، موقعیت را در ردیف آن سلول قرار دهید
4. در تمام ردیف ها حلقه کنید و یک کلاس برجسته را به هر سلول در آن ردیف اضافه کنید که با آن موقعیت مطابقت داشته باشد
5. هنگامی که رویداد ماوسوت آتش می گیرد ، کلاس برجسته را از همه سلول ها خارج کنید

و در اینجا من هم برجسته ردیف و ستون را با هم ترکیب کرده ام. من از jQuery برای ساخت همه 12 خط کد استفاده کردم (JavaScript خام بسیار خسته کننده بود).

این همان مفهوم است ، تهیه مجموعه های عناصر بسیار ساده تر است ، و با استفاده از فهرست در jQuery ، پیدا و انتخاب و انتخاب می شود.

میزهای زیبا و زیبا

برخی از عمق ، هدرهای بصری متمایز و یک ترمینال مطابق با هدر.

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

در اینجا یکی دیگر از مواردی است که ردیف های غیر مشتق شده به معنای واقعی کلمه تاری است:

بوت استرپ توییتر دارای یک ظاهر طراحی شده بسیار حداقل جدول است:

این یکی ، به عنوان یک جایزه ، دارای کنترل صفحه کلید است!

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

جایی که مرتب سازی جدول می تواند کاملاً پیچیده باشد ، جستجوی جدول می تواند بسیار آسان باشد. یک ورودی جستجو اضافه کنید ، و اگر مقدار موجود در آنجا با متن در هر نقطه ای ردیف مطابقت دارد ، آن را نشان دهید و دیگران را پنهان کنید. با jQuery که ممکن است به آسانی باشد:

در اینجا یک مورد با Regexp است:

و در اینجا در JavaScript RAW روشن است:

جداول در طرح های سیال/پاسخگو می تواند دشوار باشد

من در گذشته در مورد این موضوع نوشتم ، و فکر می کنم این نوع گرافیک تجربه یک جدول داده را در یک صفحه کوچک خلاصه می کند:

من در نهایت یک بار یک گردهمایی ایجاد کردم که انواع مختلفی از راه حل های جالب به وجود آمد.

هر چند سریع واقعی:

• ردیف ها را به بلوک (1) (2) تبدیل کنید - افزونه jQuery که ردیف ها را پنهان می کند و داده ها را از طریق یک نماد ضامن در دسترس قرار می دهد.
• سلولهای خرد شده و به آنها اجازه دهید تا بسته شوند (پیوند مرده :()
• یک هدر را برطرف کنید و به بدن اجازه دهید تا پیمایش کند (1) (2) (3)

در اینجا یک زن و شوهر از نسخه های نمایشی سبک با سبک های مختلف وجود دارد:

جداول هدر ثابت

این چیز دیگری است که من در گذشته در مورد آن نوشتم و همچنین یک صفحه کوچک انجام داده ام. اینها نسبتاً قدیمی هستند ، اما نسخه ی نمایشی هنوز هم کار می کند.

مدرن ترین روش برای دستیابی به هدرهای ثابت موقعیت است: چسبنده ؛در اینجا مقاله ای در مورد آن آورده شده است. من صادقانه کاملاً مطمئن نیستم که روش توصیه شده برای استفاده از آن با جداول. در شرایط عادی کار نمی کند. این نوع حس می کند زیرا شما نمی توانید کاملاً جدول جدول را قرار دهید. اما این کار را انجام می دهد. به هر حال اگر کسی بخواهد این موضوع را بفهمد ، این به روزرسانی خوبی برای این مقاله (یا چیز دیگری) خواهد بود.

در اینجا یک نسخه ی نمایشی زنده یک افزونه jQuery است که این ترفند را انجام می دهد. من احتمالاً این روزها به دنبال چنین چیزی هستم تا اینکه چسبناک بیشتر از آن لرزید.

استفاده از EMMET برای ایجاد نشانه گذاری جدول

Emmet ابزاری عالی به دلایل است. یکی از آنها نوشتن اختصارات HTML و گسترش آنها به HTML واقعی است. از آنجا که جداول بسیار تکراری و کلامی هستند ، Emmet برای آنها مناسب است. Emmet روی Codepen نیز کار می کند =)

چهار ردیف ساده و چهار ستون

پنج ردیف با هدر سمت چپ

یک ردیف هدر در بالا

کارمندان با شناسه های افزایشی

جدول با هدر ، پاورقی و محتوا

همان اما با محتوای سلول در هر سلول

جداول تولید شده JavaScript

JavaScript روشهای بسیار خاصی را برای مقابله با جداول از طریق API HTMLTableElement ارائه می دهد. لوئیس لازیریس اخیراً کمی در مورد آن نوشت. شما می توانید از آن برای ایجاد جداول با JavaScript ، دسترسی به زیر عناصر و تغییر خصوصیات به روش های بسیار خاص استفاده کنید. در اینجا صفحه MDN با Scoop است.

اینجا در محل کار است:

یک جدول با دو ستون تصور کنید. یکی برای شناسه کارمندان و دیگری برای آدرس ایمیل کارمندان. هدر برای هر ستون وجود دارد. این مفید خواهد بود که بتوانیم روی آن هدر ها کلیک کرده و جدول را بر اساس داده های داخل مرتب کنید. به عنوان مثال ، نظم عددی ، متناوب بین صعود و نزولی ، برای شناسه و الفبایی برای آدرس های ایمیل. این نوع مرتب سازی جدول است. مفیدتر کردن داده ها.

این یک نیاز متداول و عمومی است ، که در واقع مشخصات آن برای آن آماده است. کافی است ویژگی Sortable را روی جدول قرار دهید و تا زمانی که چند قانون مندرج در مشخصات را دنبال کنید ، به طور خودکار این کار را انجام می دهد.

در زمان این نوشتار ، من از هیچ مرورگرهایی که از جدول پشتیبانی می کنند به صورت بومی پشتیبانی نمی کنم. اما گزینه های شخص ثالث زیادی وجود دارد!

• -jQuery مبتنی بر "مرتب سازی جدول مشتری انعطاف پذیر"-Raw JavaScript-"یک مؤلفه مرتب سازی کوچک و ساده برای جداول. نوشته شده در JavaScript و وابستگی رایگان "

با اسکریپت های مرتب سازی بر روی جدول و حروف کوچک چیست؟به هر حال ، در اینجا نسخه ی نمایشی از TableSorter وجود دارد:

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

و اینها همه راه حل های JavaScript هستند. مطمئناً می توان داده ها را در قسمت پشتی مرتب کرد و جدول را که قبلاً در HTML مرتب شده است ، نمایش دهید. این ممکن است در مورد جداول صفحه بندی شده که تمام داده ها در DOM در دسترس نیستند ، لازم باشد.