عرض جدول
| الاسم الاول | الكنية | نقاط |
|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
| بو | نيلسون | 50 |
| ميكروفون | روس | 35 |
الجدول الأساسي
| الاسم الاول | الكنية | نقاط |
|---|
| جيل | حداد | 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>
انها محاولة لنفسك »
الجدول يحدها
| الاسم الاول | الكنية | نقاط |
|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
الجدول المخطط
| الاسم الاول | الكنية | نقاط |
|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
تحدها مخطط الجدول
| الاسم الاول | الكنية | نقاط |
|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
الحدود حول طاولة مخطط
| الاسم الاول | الكنية | نقاط |
|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
التقليب المشارب
| الاسم الاول | الكنية | نقاط |
|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
على الوجه المشارب، وأضيف <THEAD> حول رأس الجدول:
مثال
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
انها محاولة لنفسك »
الجدول مع العنوان الملونة
| الاسم الاول | الكنية | نقاط |
|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
مثال
<thead>
<tr class="w3-red">
<th>First Name</th>
<th>Last
Name</th>
<th>Points</th>
</tr>
</thead>
انها محاولة لنفسك »
جدول الألوان
| الاسم الاول | الكنية | نقاط |
|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
الجدول Hoverable
وتضيف فئة W3 hoverable لون خلفية رمادية على الفأرة فوق:
| الاسم الاول | الكنية | نقاط |
|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
مثال
<table class="w3-table w3-bordered w3-striped w3-border
w3-hoverable">
انها محاولة لنفسك » إذا كنت ترغب في لون تحوم محددة، إضافة أي من W3-تحوم الطبقات مع بعضها <tr> العنصر:
| الاسم الاول | الكنية | نقاط |
|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
الجدول كما بطاقة
| الاسم الاول | الكنية | نقاط |
|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
الجدول تستجيب
سيتم عرض جدول تستجيب شريط التمرير الأفقي إذا كانت الشاشة صغيرة جدا لعرض المحتوى الكامل.
محاولة تغيير حجم الشاشة لمعرفة التأثير.
| الاسم الاول | الكنية | نقاط | نقاط | نقاط | نقاط | نقاط | نقاط | نقاط | نقاط | نقاط | نقاط | نقاط | نقاط | نقاط |
|---|
| جيل | حداد | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 |
| حواء | جاكسون | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 |
| آدم | جونسون | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 |
مثال
<div class="w3-responsive">
<table class="w3-table w3-bordered w3-striped">
... table content ...
</table>
</div>
الجدول الصغير
| الاسم الاول | الكنية | نقاط |
|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
طاولة صغيرة
| الاسم الاول | الكنية | نقاط |
|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
الجدول كبير
| الاسم الاول | الكنية | نقاط |
|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
حجم كبير جدا الجدول
| الاسم الاول | الكنية | نقاط |
|---|
| جيل | حداد | 50 |
| حواء | جاكسون | 94 |
| آدم | جونسون | 67 |
XXLarge الجدول
| اسم | نقاط |
|---|
| جيل سميث | 50 |
| عشية جاكسون | 94 |
| آدم جونسون | 67 |
| بو نيلسون | 35 |
XXXLarge الجدول
| اسم | نقاط |
|---|
| حداد | 50 |
| جاكسون | 94 |
| جونسون | 67 |
| نيلسون | 35 |
الجدول جمبو
| اسم | نقاط |
|---|
| حداد | 50 |
| جاكسون | 94 |
| جونسون | 67 |
| نيلسون | 35 |