صفحه اصلی / css / اموزش کار با table در css و طراحی جدول ریسپانسیو

اموزش کار با table در css و طراحی جدول ریسپانسیو

اموزش کار با table در css و طراحی تیبل ریسپانسیو

با سلام خدمت شما همراهان مجله اینترنتی شماسافت در این پست از مبحث توسعه و برنامه نویسی – css قصد اموزش کار با table در css و طراحی جدول ریسپانسیو داریم. در پایان این اموزش شما یاد خواهید گرفت چگونه table هایی با style ها مورد نظر و به صورت شکیل تر طراحی کنید همچنین یک ترفند ساده برای طراحی ریسپانسیو جداول با عرض زیاد یاد خواهیم داد. پس تا اخر این اموزش همراه ما باشید.

 

 

ساخت یک جدول برای استایل دهی:

برای اینکه کار خود را شروع کنیم نیاز داریم تا ابتدا  یک فایل html  و سپس یک جدول با کدهای html ایجاد کنیم این کار بسیار ساده خواهد بود و کافیست از تگ های table / thead / tbody / tr / th / td استفاده کنیم تا جدول مورد نظر خود را داشته باشیم. کد های جدول را در شکل زیر می توانید ببنید.

همان طور که میبیند درون یک تگ div یک تیبل و جدول ایجاد کرده ایم سپس در قسمت thead ان عناوین جدول و در قسمت tbody سطر های جدول ایجاد کرده ایم. حال جدول ما اماده استایل دهی است.

 

استایل دهی به جدول در css table}، css}

حال که جدول خود را ایجاد کرده ایم لازم است به جدول خود استایل هایی از طریق css اعمال کنیم تا جدول مورد نظر به صورت کاربرپسندتر دراوریم و بدین صورت یک UI : تجربه کاربری خوب به سایت خود اضافه کنیم.

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

در استایل های بالا توضیحات لازم اورده شده است تنها نکته مهم استایل   border-collapse:collapse; در قسمت table می باشد که باعث میشود border یا حاشیه سطر ها و عناوین جدول به یک دیگر متصل شوند و جدولی زیبا تر بوجود اید.

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

نتیجه نهایی کار را می توانید در زیر مشاهده کنید.

 

See the Pen responsive table by s,mohamamd hosein abedy (@shomasoft) on CodePen.

طراحی table به صورت responsive

همان طور که در مثال بالا می بینید شما می توانید به راحتی و با گذاشتن  table مورد نظر در یک div و استایل دهی (به صورت کد های زیر) یک جدول واکنش گرا داشته باشید. برای این کار یک div با خاصیت overflow:auto; ایجاد خواهیم کرد کد های نهایی این قسمت به شکل زیر می باشد.

 

ممنون از اینکه تا اخر این مطلب  «اموزش کار با table در css و طراحی جدول ریسپانسیو» همراه ما بودید نظرات و سوالات خود را در قسمت دیدگاه های این بخش می توانید ارسال کنید.

 

یک دیدگاه

  1. محمد اسدپور

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

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *