سبد (0)

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

نامنام خانوادگیامتیاز
JillSmith50
EveJackson94
AdamJohnson67
BoNilsson50
MikeRoss35

کلاس های جدول 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 برای نمایش جداول پایه مورد استفاده قرار میگیرد:

نامنام خانوادگیامتیاز
JillSmith50
EveJackson94
AdamJohnson67

مثال

<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 برای رنگ کردن ردیف های جدول به صورت یک درمیان (راه راه) استفاده میشود:

نامنام خانوادگیامتیاز
JillSmith50
EveJackson94
AdamJohnson67

مثال

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

جداول border دار

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

نامنام خانوادگیامتیاز
JillSmith50
EveJackson94
AdamJohnson67

مثال

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

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

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

نامنام خانوادگیامتیاز
JillSmith50
EveJackson94
AdamJohnson67

مثال

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

border اطراف جدول

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

نامنام خانوادگیامتیاز
JillSmith50
EveJackson94
AdamJohnson67

مثال

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

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


نمایش همه

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

نامنام خانوادگیامتیاز
JillSmith50
EveJackson94
AdamJohnson67

مثال

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

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

برای تغییر رنگ سطر های جدول( با یک خاکستری روشن شروع میشود)، عنصر <thead>  را اطراف سطر اول جدول قرار دهید. همچنین باید یک رنگ برای استفاده در سطر اول جدول تعریف کنید:

نامنام خانوادگیامتیاز
JillSmith50
EveJackson94
AdamJohnson67
BoNilson35

مثال

<thead>
  <tr class="w3-light-grey">
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
</thead>
خودتان امتحان کنيد »

محتوای وسط چین

کلاس  w3-centered محتوای جدول را وسط چین میکند:

نامنام خانوادگیامتیاز
JillSmith50
EveJackson94
AdamJohnson67

مثال

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

جدول قابل Hover

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

نامنام خانوادگیامتیاز
JillSmith50
EveJackson94
AdamJohnson67

مثال

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

رنگ های Hover

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

نامنام خانوادگیامتیاز
JillSmith50
EveJackson94
AdamJohnson67

مثال

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

کلاس های ترکیبی  W3.CSS

بسیاری از کلاس های w3.css روی همه عناصر html  استفاده میشود .

برای مثال ،کلاس های border ی ،کلاس های رنگی ،کلاس های فونت ،کلاس های کارت و غیره


 سربرگ رنگی جدول

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

نامنام خانوادگیامتیاز
JillSmith50
EveJackson94
AdamJohnson67

مثال

<tr class="w3-red">
  <th>First Name</th>
  <th>Last Name</th>
  <th>Points</th>
</tr>
خودتان امتحان کنيد »

جدول رنگی

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

نامنام خانوادگیامتیاز
JillSmith50
EveJackson94
AdamJohnson67

مثال

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

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

کلاس w3-responsive یک جدول واکنشگرا ایجاد میکند.جدول به صورت افقی در اسکرین های کوچک پیمایش میشود اما در اسکرین های بزرگ تفاوتی وجود ندارد.

تغییر اندازه اسکرین برای نمایش افکت در جدول زیرین  آمده است :

نامنام خانوادگیامتیازامتیازامتیازامتیازامتیازامتیازامتیازامتیازامتیازامتیازامتیاز
JillSmith50005000500050005000500050005000500050005000
EveJackson94009400940094009400940094009400940094009400
AdamJohnson67006700670067006700670067006700670067006700

مثال

<div class="w3-responsive">
  <table class="reference">
    ... table content ...
  </table>
</div>
خودتان امتحان کنيد »

جدول کارت مانند

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

نامنام خانوادگیامتیاز
JillSmith50
EveJackson94
AdamJohnson67

مثال

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

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

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

نامنام خانوادگیامتیاز
JillSmith50
EveJackson94
AdamJohnson67

مثال

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

جدول کوچک

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

نامنام خانوادگیامتیاز
JillSmith50
EveJackson94
AdamJohnson67

مثال

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

جدول بزرگ

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

نامنام خانوادگی امتیاز 
JillSmith50
EveJackson94
AdamJohnson67

مثال

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

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

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

نامنام خانوادگیامتیاز
JillSmith50
EveJackson94
AdamJohnson67

مثال

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

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

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

نامنام خانوادگیامتیاز
JillSmith50
EveJackson94
AdamJohnson67

مثال

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

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

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

نامنام خانوادگیامتیاز
JillSmith50
EveJackson94
AdamJohnson67

مثال

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

 جدولJumbo

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

نامنام خانوادگی
JillSmith
EveJackson
AdamJohnson

مثال

<table class="w3-table-all w3-jumbo">
خودتان امتحان کنيد »
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehiمجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامیپرداخت آنلاین -  بانک ملتمعرفی بیاموز در شبکه سهپرداخت آنلاین - بانک اقتصاد نوینپرداخت آنلاین - بانک سامان