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

مثال

<table class="w3-table w3-striped">
خودتان امتحان کنيد »

جداول border دار

کلاس  w3-border ed ،border پایین برای هر ردیف جدول ایجاد میکند:

نام نام خانوادگی امتیاز
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

مثال

<table class="w3-table w3-border ed">
خودتان امتحان کنيد »

جدول border دار راه راه

کلاسهای w3-striped و w3-border ed برای ایجاد جداول  border دار راه راه ترکیب میشوند:

نام نام خانوادگی امتیاز
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

مثال

<table class="w3-table w3-striped w3-border ed">
خودتان امتحان کنيد »

border اطراف جدول

کلاس w3-border ، برای نمایش border اطراف جدول استفاده میشود:

نام نام خانوادگی امتیاز
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

مثال

<table class="w3-table w3-striped w3-border ">
خودتان امتحان کنيد »

نکته: کلاس w3-border تنها برای جداول نیست  وبرای تمامی عناصر HTML استفاده میشود.

نمایش همه

کلاس w3-table-all تمامی کلاس های فوق را با هم ترکیب میکند :

نام نام خانوادگی امتیاز
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

مثال

<table class="w3-table-all">
خودتان امتحان کنيد »

تغییر جداول راه راه

برای تغییر رنگ سطر های جدول( با یک خاکستری روشن شروع میشود)، عنصر <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

مثال

<table class="w3-table-all w3-centered">
خودتان امتحان کنيد »

جدول قابل Hover

کلاس w3-hoverable  ، زمینه خاکستری هنگام حرکت موس برروی سطر جدول می دهد.

نام نام خانوادگی امتیاز
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

مثال

<table class="w3-table-all w3-hoverable">
خودتان امتحان کنيد »

رنگ های Hover

اگر شما بخواهید یک رنگ خاص قابل تغییر با حرکت موس داشته باشید ، می توانید هرکدام از کلاس های w3-hover-color رابه عنصر <tr>  بیافزایید:

نام نام خانوادگی امتیاز
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

مثال

<tr class="w3-hover-green">
خودتان امتحان کنيد »

کلاس های ترکیبی  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

مثال

<table class="w3-table w3-blue">
خودتان امتحان کنيد »

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

کلاس 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

مثال

<table class="w3-table-all w3-card-4">
خودتان امتحان کنيد »

جدول خیلی کوچک

کلاس w3-tiny برای نمایش جدول خیلی کوچک استفاده میشود :

نام نام خانوادگی امتیاز
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

مثال

<table class="w3-table-all w3-tiny">
خودتان امتحان کنيد »

جدول کوچک

برای نمایش جدول کوچک ، از کلاس w3-small استفاده کنید:

نام نام خانوادگی امتیاز
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

مثال

<table class="w3-table-all w3-small">
خودتان امتحان کنيد »

جدول بزرگ

از کلاس w3-large برای نمایش جدول بزرگ  استفاده میشود:

نام نام خانوادگی امتیاز  
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

مثال

<table class="w3-table-all w3-large">
خودتان امتحان کنيد »

جدول یک برابر بزرگ شده ( xlarge)

از کلاس w3-xlarge برای نمایش جدول یک برابر بزرگ شده ، استفاده میشود.

نام نام خانوادگی امتیاز
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

مثال

<table class="w3-table-all w3-xlarge">
خودتان امتحان کنيد »

جدول دو برابر بزرگ  شده (xx-large)

از کلاس w3-xxlarge برای نمایش جدول دو برابر بزرگ شده ، استفاده میشود:

نام نام خانوادگی امتیاز
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

مثال

<table class="w3-table-all w3-xxlarge">
خودتان امتحان کنيد »

 جدول سه برابر بزرگ شده (xxx-large)

از کلاس w3-xxxlarge برای نمایش جدول  سه برابر بزرگ شده ،استفاده میشود.

نام نام خانوادگی امتیاز
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

مثال

<table class="w3-table-all w3-xxxlarge">
خودتان امتحان کنيد »

 جدولJumbo

از کلاس w3-jumbo برای نمایش جدول بزرگ jumbo ، استفاده میشود:

نام نام خانوادگی
Jill Smith
Eve Jackson
Adam Johnson

مثال

<table class="w3-table-all w3-jumbo">
خودتان امتحان کنيد »