نموذج التمهيد
يوفر التمهيد تخطيط خلق جدولا واضحا. يسرد الجدول التالي بعض عناصر الجدول دعم التمهيد:
| ملصق | وصف |
|---|
| <جدول> | إضافة إلى تشكيل أساس النمط. |
| <THEAD> | حاوية الجدول صف الرأس العنصر (<tr>)، وتستخدم لتحديد أعمدة الجدول. |
| <TBODY> | الجدول عنصر حاوية في الجسم من صف الجدول (<tr>). |
| <tr> | تظهر مجموعة على سطر واحد في العنصر الحاوية خلية الجدول (<td> أو <ال>). |
| <td> | خلية الجدول الافتراضي. |
| <ث> | خلية الجدول الخاصة، وتستخدم لتحديد عمود أو صف (اعتمادا على مدى ومكان). يجب عليك استخدام <THEAD> في الداخل. |
| <توضيحية> | حول متجر يرد وصف المحتوى أو موجز. |
فئة النموذج
الجداول نمط الجدول التالية يمكن استخدامها:
| فئة | وصف | أمثلة |
|---|
| .table | التعسفي <جدول> إضافة نمط قاعدة (الفاصل الأفقي فقط) | محاولة |
| .table-مخطط | في <TBODY> داخل النموذج لإضافة خطوط حمار وحشي (IE8 لا يدعم) | محاولة |
| .table-يحدها | إضافة حد لجميع خلايا الجدول | محاولة |
| .table-تحوم | في <TBODY> في أي صف تمكين الدولة تحوم | محاولة |
| .table-مكثف | كسب المزيد من شكل مدمج | محاولة |
| الاستخدام المشترك لجميع الطبقات أشكال | محاولة |
الطبقة <tr> <ال> و <td>
دروس يمكن استخدام الجدول التالي لتشكيل صف أو خلية:
| فئة | وصف | أمثلة |
|---|
| .active | تطبيق تحوم اللون على خط أو خلية | محاولة |
| .success | لأنه يدل على نجاح العملية | محاولة |
| INFO. | المعلومات التي تمثل متفاوتة التشغيل | محاولة |
| .warning | وهو يمثل عملية التحذير | محاولة |
| .danger | وهو يمثل عملية خطيرة | محاولة |
إذا كنت ترغب فقط مع الحشو (الحشو) والانقسام الأساسي على مستوى الجدول، إضافةالطبقة.table، كما هو مبين في الأمثلة التالية:
أمثلة
<الجدول الطبقة = "الجدول">
<توضيحية> تخطيط الجدول الأساسي </ عنوان>
<THEAD>
<tr>
<ث> اسم </ تشرين>
<ث> المدينة </ تشرين>
</ tr>
</ THEAD>
<TBODY>
<tr>
<td> Tanmay </ td>
<td> بنغالور </ td>
</ tr>
<tr>
<td> ساشين </ td>
<td> مومباي </ td>
</ tr>
</ TBODY>
</ الجدول>
وكانت النتائج على النحو التالي:
وبالإضافة إلى العلامات الجدول الأساسية والطبقة .table، وبعضها يمكن أن تستخدم كعلامة لتحديد فئات نمط. وفيما يلي سوف أعرض لكم لهذه الفئات.
الجدول المخطط
عن طريق إضافةطبقة .table شريطية،سترى الشرائط على خط <TBODY> في غضون ذلك، كما يوضح المثال التالي:
أمثلة
<الجدول الطبقة = "الجدول مخطط الجدول" >
<توضيحية> المشارب تخطيط الجدول </ عنوان>
<THEAD>
<tr>
<ث> اسم </ تشرين>
<ث> المدينة </ تشرين>
<ث> كلمة المرور </ تشرين>
</ tr>
</ THEAD>
<TBODY>
<tr>
<td> Tanmay </ td>
<td> بنغالور </ td>
<td> 560001 </ td>
</ tr>
<tr>
<td> ساشين </ td>
<td> مومباي </ td>
<td> 400003 </ td>
</ tr>
<tr>
<td> أوما </ td>
<td> بيون </ td>
<td> 411027 </ td>
</ tr>
</ TBODY>
</ الجدول>
وكانت النتائج على النحو التالي:
الحدود الجدول
عن طريق إضافةطبقة .table-يحدها،سترى أن كل عنصر له حدود حول، ومجموع تقريب شكل من الأشكال، كما هو موضح في المثال التالي:
أمثلة
<الجدول الطبقة = "الجدول تحدها الجدول" >
<توضيحية> جدول إطار تخطيط </ عنوان>
<THEAD>
<tr>
<ث> اسم </ تشرين>
<ث> المدينة </ تشرين> عشر> كلمة المرور </> عشر
</ tr>
</ THEAD> TBODY> <tr >
<td> Tanmay </ td>
<td> بنغالور </ td>
<td> 560001 </ td>
</ tr>
<tr>
<td> ساشين </ td>
<td> مومباي </ td>
<td> 400003 </ td>
</ tr>
<tr>
<td> أوما </ td>
<td> بيون </ td>
<td> 411027 </ td>
</ tr>
</ TBODY>
</ الجدول>
وكانت النتائج على النحو التالي:
الجدول تحوم
عن طريق إضافةطبقة .table-تحوم،عندما يكون المؤشر فوق الصف عندما يكون هناك خلفية رمادية فاتحة، كما هو مبين في الأمثلة التالية:
أمثلة
<الجدول الطبقة = "الجدول الجدول تحوم" >
<توضيحية> تحوم تخطيط الجدول </ عنوان>
<THEAD>
<tr>
<ث> اسم </ تشرين>
<ث> المدينة </ تشرين>
<ث> كلمة المرور </ تشرين>
</ tr>
</ THEAD>
<TBODY>
<tr>
<td> Tanmay </ td>
<td> بنغالور </ td>
<td> 560001 </ td>
</ tr>
<tr>
<td> ساشين </ td>
<td> مومباي </ td>
<td> 400003 </ td>
</ tr>
<tr>
<td> أوما </ td>
<td> بيون </ td>
<td> 411027 </ td>
</ tr>
</ TBODY>
</ الجدول>
وكانت النتائج على النحو التالي:
نموذج مضغوط
عن طريق إضافةطبقة .table-مكثف،يتم قطع مضمنة الحشو (الحشو) في النصف، بحيث يبدو الجدول أكثر إحكاما، كما هو موضح في المثال التالي. هذه المعلومات مفيدة عندما كنت تريد أن تبدو أكثر إحكاما.
أمثلة
<الجدول الطبقة = "جدول مكثف الجدول" >
<توضيحية> تبسيط تصميم النموذج </ عنوان>
<THEAD>
<tr>
<ث> اسم </ تشرين>
<ث> المدينة </ تشرين>
<ث> كلمة المرور </ تشرين> </ tr>
</ THEAD>
<TBODY>
<tr>
<td> Tanmay </ td>
<td> بنغالور </ td>
<td> 560001 </ td> </ tr>
<tr>
<td> ساشين </ td>
<td> مومباي </ td>
<td> 400003 </ td> </ tr>
<tr>
<td> أوما </ td>
<td> بيون </ td>
<td> 411027 </ td> </ tr>
</ TBODY>
</ الجدول>
وكانت النتائج على النحو التالي:
الطبقة السياق المدرجة في الجدول التالي يسمح لك بتغيير لون الخلفية من صفوف الجدول أو الخلايا الفردية.
| 类 | 描述 |
|---|
| .active | 对某一特定的行或单元格应用悬停颜色 |
| .success | 表示一个成功的或积极的动作 |
| .warning | 表示一个需要注意的警告 |
| .danger | 表示一个危险的或潜在的负面动作 |
هذه الفئات يمكن تطبيقها على <tr> <td> أو <ال>.
أمثلة
<الجدول الطبقة = "الجدول">
<توضيحية> سياق تخطيط الجدول </ عنوان>
<THEAD>
<tr>
<ث> المنتجات </ تشرين>
<ث> تاريخ الدفع </ تشرين>
<ث> الحالة </ تشرين> </ tr>
</ THEAD>
<TBODY>
<tr الطبقة = "نشطة">
<td> المنتجات 1 </ td>
<td> 23/11/2013 </ td>
<td> ليتم شحنها </ td> </ tr>
<tr الطبقة = "نجاح">
<td> المنتجات 2 </ td>
<td> 2013/10/11 </ td>
<td> تسليم </ td> </ tr>
<tr الطبقة = "تحذير">
<td> المنتجات 3 </ td>
<td> 20/10/2013 </ td>
<td> لتأكيد </ td> </ tr>
<tr الطبقة = "خطر">
<td> المنتجات 4 </ td>
<td> 20/10/2013 </ td>
<td> عاد </ td> </ tr>
</ TBODY>
</ الجدول>
وكانت النتائج على النحو التالي:
قبل أي.tableملفوفة فيالطبقة .table متجاوبة،هل يمكن أن يكون الجدول للتمرير أفقيا لاستيعاب الأجهزة الصغيرة (أقل من 768px). عندما ينظر اليها على المعدات على نطاق واسع أكبر من 768px واسعة، فإنك لن ترى أي فرق.
أمثلة
<div الطبقة = "الجدول استجابة">
<الجدول الطبقة = "الجدول">
<توضيحية> تخطيط الجدول استجابة </ عنوان>
<THEAD>
<tr>
<ث> المنتجات </ تشرين>
<ث> تاريخ الدفع </ تشرين>
<ث> الحالة </ تشرين> </ tr>
</ THEAD>
<TBODY>
<tr>
<td> المنتجات 1 </ td>
<td> 23/11/2013 </ td>
<td> ليتم شحنها </ td> </ tr>
<tr>
<td> المنتجات 2 </ td>
<td> 2013/10/11 </ td>
<td> تسليم </ td> </ tr>
<tr>
<td> المنتجات 3 </ td>
<td> 20/10/2013 </ td>
<td> لتأكيد </ td> </ tr>
<tr>
<td> المنتجات 4 </ td>
<td> 20/10/2013 </ td>
<td> عاد </ td> </ tr>
</ TBODY>
</ الجدول>
</ div>
وكانت النتائج على النحو التالي:
