جدول واکنشگرا

نام	نام خانوادگی	امتیاز
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

مثال

<table class="w3-table">
<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

مثال

<thead>
<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

مثال

<tr class="w3-red">
  <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

مثال

<div class="w3-responsive">
<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

مثال

خودتان امتحان کنيد »

: نوشته شده توسط زهرا داوودی; بازدید: 4027

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.