همانطور که می دانید، معمولاً برای ساخت جدول در html از تگ table استفاده می شود. استفاده از تگ table در خیلی اوقات مشکلات استایل دهی و رسپانسیو زیادی دارد و کلاً دست برنامه نویس برای ایجاد تغییرات دلخواه خیلی باز نیست.
برای غلبه بر این مشکل، تنها کافیست به جای تگ table و تگ های فرزندش از تگ های div و اعمال یک سری css استفاده کنیم.
برای اینکار با استفاده از ویژگی های display و width، یک جدول را با استفاده از div ها ایجاد می کنیم. در جدول زیر css هایی که برای تگ های table به صورت پیش فرض در مرورگر استفاده می شود را مشاهده می کنید. تنها کاری که باید بکنید این است که به جای تگ های زیر از تگ div استفاده کنید و استایل متناسب با آن تگ را به تگ div جایگزین آن بدهید.
| table | {display:table} |
| tr | {display: table-row} |
| thead | {display: table-header-group} |
| tbody | {display: table-row-group} |
| tfoot | {display: table-footer-group} |
| col | {display: table-column} |
| colgroup | {display: table-column-group} |
| td, th | {display: table-cell} |
| caption | {display: table-caption} |
اساساً یک جدول از سه بخش thead، tbody و tfoot تشکیل می شود. خب اول از همه تگ div اصلی که متناسب با تگ اصلی table است را ایجاد می کنیم.
- ایجاد تگ div اصلی
| HTML code | CSS code |
| <div id=“resp-table”> </div> | #resp-table { width: 100%; display: table; } |
2. افزودن کپشن به جدول
| HTML code | CSS code |
| <div id=“resp-table-caption”> Responsive Table without Table tag </div> | #resp-table-caption{ display: table-caption; text-align: center; font-size: 30px; font-weight: bold; } |
3. ایجاد هدر جدول
| HTML code | CSS code |
| <div id=“resp-table-header”></div> | #resp-table-header{ display: table-header-group; background-color: gray; font-weight: bold; font-size: 25px; } |
4. افزودن خانه های هدر
| HTML code | CSS code |
| <div class=“table-header-cell”> Header 1 </div> <div class=“table-header-cell”> Header 2 </div> <div class=“table-header-cell”> Header 3 </div> <div class=“table-header-cell”> Header 4 </div> <div class=“table-header-cell”> Header 5 </div> | .table-header-cell{ display: table-cell; padding: 10px; text-align: justify; border-bottom: 1px solid black; } |
5. ساخت tbody
| HTML code | CSS code |
| <div id=“resp-table-body”> </div> | #resp-table-body{ display: table-row-group; } |
6. ساخت ردیف ها
| HTML code | CSS code |
| <div class=“resp-table-row”> </div> | .resp-table-row{ display: table-row; } |
7. ساخت خانه های هر ردیف
| HTML code | CSS code |
| <div class=“table-body-cell”> Cell 1–1 </div> <div class=“table-body-cell”> Cell 1–2 </div> <div class=“table-body-cell”> Cell 1–3 </div> <div class=“table-body-cell”> Cell 1–4 </div> <div class=“table-body-cell”> Cell 1–5 </div> | .table-body-cell{ display: table-cell; } |
8. ساخت tfoot
| HTML code | CSS code |
| <div id=“resp-table-footer”> </div> | #resp-table-footer { display: table-footer-group; background-color: gray; font-weight: bold; font-size: 25px; color: rgba(255, 255, 255, 0.45); } |
9. ساخت خانه های tfoot
| HTML code | CSS code |
| <div class=“table-footer-cell”> Footer 1 </div> <div class=“table-footer-cell”> Footer 2 </div> <div class=“table-footer-cell”> Footer 3 </div> <div class=“table-footer-cell”> Footer 4 </div> <div class=“table-footer-cell”> Footer 5 </div> | .table-footer-cell{ display: table-cell; padding: 10px; text-align: justify; border-bottom: 1px solid black; } |
خب جدول شما آماده است! هر تعداد ردیف مورد نیاز را در tbody و هر تعداد خانه مورد نیاز را در هر ردیف ایجاد کنید.
در مورد رسپانسیو
شاید هنوز متوجه نشده باشید، اما جدول ساخته شده رسپانسیو هم هست! کافیست در بخش developer tools مرورگر خود، رسپانسیو بودن جدول را در سایز های متفاوت صفحه نمایش تست کنید. این اتفاق به دلیل استفاده درست از ویژگی display رخ داده است.
دیدگاه‌ها