جدول واکنشگرا
| نام | نام خانوادگی | امتیاز |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
| Bo | Nilsson | 50 |
| Mike | Ross | 35 |
کلاس های جدول W3.CSS
W3.CSS برای جداول کلاس های زیر را آماده میکند:
| کلاس | تعریف |
|---|---|
| w3-table | نگهدارنده برای یک جدول HTML |
| w3-striped | جدول راه راه |
| w3-border | جدول border دار |
| w3-border ed | خطوط border |
| w3-centered | محتوای جدول وسط چین می کند |
| w3-hoverable | حرکت موس در جدول |
| w3-table-all | اعمال تمام خواص جدول |
جداول پایه
کلاس w3-table برای نمایش جداول پایه مورد استفاده قرار میگیرد:
| نام | نام خانوادگی | امتیاز |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
مثال
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
جداول راه راه
کلاس w3-striped برای رنگ کردن ردیف های جدول به صورت یک درمیان (راه راه) استفاده میشود:
| نام | نام خانوادگی | امتیاز |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
جداول border دار
کلاس w3-border ed ،border پایین برای هر ردیف جدول ایجاد میکند:
| نام | نام خانوادگی | امتیاز |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
جدول border دار راه راه
کلاسهای w3-striped و w3-border ed برای ایجاد جداول border دار راه راه ترکیب میشوند:
| نام | نام خانوادگی | امتیاز |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
border اطراف جدول
کلاس w3-border ، برای نمایش border اطراف جدول استفاده میشود:
| نام | نام خانوادگی | امتیاز |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
نکته: کلاس w3-border تنها برای جداول نیست وبرای تمامی عناصر HTML استفاده میشود.
نمایش همه
کلاس w3-table-all تمامی کلاس های فوق را با هم ترکیب میکند :
| نام | نام خانوادگی | امتیاز |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
تغییر جداول راه راه
برای تغییر رنگ سطر های جدول( با یک خاکستری روشن شروع میشود)، عنصر <thead> را اطراف سطر اول جدول قرار دهید. همچنین باید یک رنگ برای استفاده در سطر اول جدول تعریف کنید:
| نام | نام خانوادگی | امتیاز |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
| Bo | Nilson | 35 |
مثال
<tr class="w3-light-grey">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
محتوای وسط چین
کلاس w3-centered محتوای جدول را وسط چین میکند:
| نام | نام خانوادگی | امتیاز |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
جدول قابل Hover
کلاس w3-hoverable ، زمینه خاکستری هنگام حرکت موس برروی سطر جدول می دهد.
| نام | نام خانوادگی | امتیاز |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
رنگ های Hover
اگر شما بخواهید یک رنگ خاص قابل تغییر با حرکت موس داشته باشید ، می توانید هرکدام از کلاس های w3-hover-color رابه عنصر <tr> بیافزایید:
| نام | نام خانوادگی | امتیاز |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
کلاس های ترکیبی W3.CSS
بسیاری از کلاس های w3.css روی همه عناصر html استفاده میشود .
برای مثال ،کلاس های border ی ،کلاس های رنگی ،کلاس های فونت ،کلاس های کارت و غیره
سربرگ رنگی جدول
کلاس های w3-color برای نمایش ردیف رنگی استفاده میشوند :
| نام | نام خانوادگی | امتیاز |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
مثال
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
جدول رنگی
از کلاس w3-color برای نمایش جدول رنگی استفاده میشود.
| نام | نام خانوادگی | امتیاز |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
جدول واکنش گرا
کلاس w3-responsive یک جدول واکنشگرا ایجاد میکند.جدول به صورت افقی در اسکرین های کوچک پیمایش میشود اما در اسکرین های بزرگ تفاوتی وجود ندارد.
تغییر اندازه اسکرین برای نمایش افکت در جدول زیرین آمده است :
| نام | نام خانوادگی | امتیاز | امتیاز | امتیاز | امتیاز | امتیاز | امتیاز | امتیاز | امتیاز | امتیاز | امتیاز | امتیاز |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Jill | Smith | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 |
| Eve | Jackson | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 |
| Adam | Johnson | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 |
مثال
<table class="reference">
... table content ...
</table>
</div>
جدول کارت مانند
کلاس w3-card برای نمایش جدول مانند کارت استفاده میشود:
| نام | نام خانوادگی | امتیاز |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
جدول خیلی کوچک
کلاس w3-tiny برای نمایش جدول خیلی کوچک استفاده میشود :
| نام | نام خانوادگی | امتیاز |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
جدول کوچک
برای نمایش جدول کوچک ، از کلاس w3-small استفاده کنید:
| نام | نام خانوادگی | امتیاز |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
جدول بزرگ
از کلاس w3-large برای نمایش جدول بزرگ استفاده میشود:
| نام | نام خانوادگی امتیاز | |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
جدول یک برابر بزرگ شده ( xlarge)
از کلاس w3-xlarge برای نمایش جدول یک برابر بزرگ شده ، استفاده میشود.
| نام | نام خانوادگی | امتیاز |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
جدول دو برابر بزرگ شده (xx-large)
از کلاس w3-xxlarge برای نمایش جدول دو برابر بزرگ شده ، استفاده میشود:
| نام | نام خانوادگی | امتیاز |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
جدول سه برابر بزرگ شده (xxx-large)
از کلاس w3-xxxlarge برای نمایش جدول سه برابر بزرگ شده ،استفاده میشود.
| نام | نام خانوادگی | امتیاز |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
جدولJumbo
از کلاس w3-jumbo برای نمایش جدول بزرگ jumbo ، استفاده میشود:
| نام | نام خانوادگی |
|---|---|
| Jill | Smith |
| Eve | Jackson |
| Adam | Johnson |
- نوشته شده توسط زهرا داوودی
- بازدید: 3566
