جداول W3.CSS
| الاسم الاول | اسم العائلة | نقاط |
|---|---|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
| بو | نيلسون | 50 |
| مايك | روس | 35 |
فئات جدول W3.CSS
يوفر W3.CSS الفئات التالية للجداول:
| فصل | يعرّف |
|---|---|
| w3 الجدول | حاوية لجدول HTML |
| w3 مخطط | طاولة مخططة |
| w3- الحدود | جدول بحدود |
| w3 يحدها | الخطوط المتاخمة |
| مركز w3 | محتوى الجدول المركزي |
| w3- تحوم | طاولة تحوم |
| w3- الجدول- جميع | تعيين كافة الخصائص |
الجدول الأساسي
يتم استخدام فئة w3-table لعرض جدول أساسي:
| الاسم الاول | اسم العائلة | نقاط |
|---|---|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 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 لإضافة خطوط حمار وحشي إلى الجدول:
| الاسم الاول | اسم العائلة | نقاط |
|---|---|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
مثال
<table class="w3-table w3-striped">
جدول يحد
تضيف الفئة ذات الحد w3 حدًا سفليًا لكل صف جدول:
| الاسم الاول | اسم العائلة | نقاط |
|---|---|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
مثال
<table class="w3-table w3-bordered">
طاولة ذات حدود مخططة
اجمع بين فئة w3-striped وفئة w3-border لإنشاء جدول مقلم:
| الاسم الاول | اسم العائلة | نقاط |
|---|---|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
مثال
<table class="w3-table w3-striped w3-bordered">
حدود حول طاولة
تُستخدم فئة w3-border لعرض حد حول جدول:
| الاسم الاول | اسم العائلة | نقاط |
|---|---|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
مثال
<table class="w3-table w3-striped w3-border">
تلميح: فئة w3-border ليست للجداول فقط. يمكن استخدامه على أي عنصر HTML!
عرض كل شيء
تجمع فئة w3-table-all بين جميع الفئات المذكورة أعلاه:
| الاسم الاول | اسم العائلة | نقاط |
|---|---|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
مثال
<table class="w3-table-all">
تقليب الخطوط
لقلب الخطوط (ابدأ باللون الرمادي الفاتح) ، أضف عنصر <thead> حول صف رأس الجدول. يجب عليك أيضًا تحديد لون لاستخدامه في صف رأس الجدول:
| الاسم الاول | اسم العائلة | نقاط |
|---|---|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
| بو | نيلسون | 35 |
مثال
<thead>
<tr class="w3-light-grey">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
توسيط كل المحتوى
يركز الفصل الذي يركز على w3 على محتوى الجدول:
| الاسم الاول | اسم العائلة | نقاط |
|---|---|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
مثال
<table class="w3-table-all w3-centered">
توسيط عمود واحد
تركز فئة w3-center على محتوى العمود:
| الاسم الاول | اسم العائلة | نقاط |
|---|---|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
مثال
<table class="w3-table-all">
<tr>
<th>First
Name</th>
<th>Last Name</th>
<th class="w3-center">Points</th>
</tr>
لليمين محاذاة عمود واحد
تقوم فئة w3-right-align إلى اليمين بمحاذاة محتوى العمود:
| الاسم الاول | اسم العائلة | نقاط |
|---|---|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
مثال
<table class="w3-table-all">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="w3-right-align">Points</th>
</tr>
طاولة تحوم
تضيف فئة w3-hoverable لون خلفية رمادي عند تمرير الماوس فوقها:
| الاسم الاول | اسم العائلة | نقاط |
|---|---|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
مثال
<table class="w3-table-all
w3-hoverable">
تحوم الألوان
إذا كنت تريد لون تحوم محدد ، أضف أيًا من فئات ألوان w3-hover- لكل عنصر <tr>:
| الاسم الاول | اسم العائلة | نقاط |
|---|---|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
مثال
<tr class="w3-hover-green">
الجمع بين فئات W3.CSS
يمكن استخدام العديد من فئات W3.CSS في جميع عناصر HTML.
على سبيل المثال: فئات الحدود وفئات الألوان وفئات الخطوط وفئات البطاقات والمزيد.
رأس الجدول الملون
استخدم أيًا من فئات الألوان w3- لعرض صف ملون:
| الاسم الاول | اسم العائلة | نقاط |
|---|---|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
مثال
<tr class="w3-red">
<th>First Name</th>
<th>Last
Name</th>
<th>Points</th>
</tr>
طاولة ملونة
استخدم أيًا من فئات الألوان w3- لعرض جدول ملون:
| الاسم الاول | اسم العائلة | نقاط |
|---|---|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
مثال
<table class="w3-table w3-blue">
جدول مستجيب
تنشئ فئة w3-response جدولاً سريع الاستجابة. ثم يتم تمرير الجدول أفقيًا على الشاشات الصغيرة. عند المشاهدة على الشاشات الكبيرة ، لا فرق.
قم بتغيير حجم الشاشة لرؤية التأثير على الجدول أدناه:
| الاسم الاول | اسم العائلة | نقاط | نقاط | نقاط | نقاط | نقاط | نقاط | نقاط | نقاط | نقاط | نقاط | نقاط |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| جيل | حداد | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 |
| حواء | جاكسون | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 |
| آدم | جونسون | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 |
مثال
<div class="w3-responsive">
<table class="w3-table-all">
... table content ...
</table>
</div>
الجدول كبطاقة
استخدم فئة w3-card لعرض جدول كبطاقة:
| الاسم الاول | اسم العائلة | نقاط |
|---|---|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
مثال
<table class="w3-table-all w3-card-4">
طاولة صغيرة
استخدم فئة w3-tiny لعرض جدول صغير:
| الاسم الاول | اسم العائلة | نقاط |
|---|---|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
مثال
<table class="w3-table-all w3-tiny">
طاولة صغيرة
استخدم فئة w3-small لعرض طاولة صغيرة:
| الاسم الاول | اسم العائلة | نقاط |
|---|---|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
مثال
<table class="w3-table-all w3-small">
طاولة كبيرة
استخدم الفئة w3-large لعرض طاولة كبيرة:
| الاسم الاول | اسم العائلة | نقاط |
|---|---|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
مثال
<table class="w3-table-all w3-large">
جدول XLarge
استخدم فئة w3-xlarge لعرض جدول xlarge:
| الاسم الاول | اسم العائلة | نقاط |
|---|---|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
مثال
<table class="w3-table-all w3-xlarge">
جدول كبير الحجم
استخدم فئة w3-xxlarge لعرض جدول xxlarge:
| الاسم الاول | اسم العائلة | نقاط |
|---|---|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
مثال
<table class="w3-table-all w3-xxlarge">
XXXLarge الجدول
استخدم فئة w3-xxxlarge لعرض جدول xxxlarge:
| الاسم الاول | اسم العائلة | نقاط |
|---|---|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
مثال
<table class="w3-table-all w3-xxxlarge">
طاولة جامبو
Use the w3-jumbo class to display a jumbo large table:
| First Name | Last Name |
|---|---|
| Jill | Smith |
| Eve | Jackson |
| Adam | Johnson |
Example
<table class="w3-table-all w3-jumbo">