بکندباز

ساخت جدول در html فقط با استفاده از تگ div

همانطور که می دانید، معمولاً برای ساخت جدول در 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 است را ایجاد می کنیم.

  1. ایجاد تگ div اصلی
HTML codeCSS code
<div id=“resp-table”>
</div>
#resp-table {
width: 100%;
display: table;
}

2. افزودن کپشن به جدول

HTML codeCSS 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 codeCSS 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 codeCSS 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 codeCSS code
<div id=“resp-table-body”>
</div>
#resp-table-body{
display: table-row-group;
}

6. ساخت ردیف ها

HTML codeCSS code
<div class=“resp-table-row”>
</div>
.resp-table-row{
display: table-row;
}

7. ساخت خانه های هر ردیف

HTML codeCSS 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 codeCSS code
<div id=“resp-table-footer”>
</div>
#resp-table-footer {
display: table-footer-group;
background-color: gray;
font-weight: bold;
font-size: 25px;
colorrgba(255, 255, 255, 0.45);
}

9. ساخت خانه های tfoot

HTML codeCSS 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 رخ داده است.

دیدگاه‌ها

*
*

question