كيفية إنشاء جدول فقط باستخدام Tag و CSS

'بداخله.

---

---

مثال
ضع في اعتبارك مثال كود HTML التالي لإنشاء جدول:

< شعبة فصل = 'divTable' >
< شعبة فصل = 'مقدمة الصف' >
< شعبة فصل = 'divCell' > < ب > بطاقة تعريف < / ب > < / شعبة >
< شعبة فصل = 'divCell' > < ب > اسم < / ب > < / شعبة >
< شعبة فصل = 'divCell' > < ب > عمر < / ب > < / شعبة >
< / شعبة >
< شعبة فصل = 'divRow' >
< شعبة فصل = 'divCell' > 001 < / شعبة >
< شعبة فصل = 'divCell' > حداد < / شعبة >
< شعبة فصل = 'divCell' > 25 < / شعبة >
< / شعبة >
< شعبة فصل = 'divRow' >
< شعبة فصل = 'divCell' > 002 < / شعبة >
< شعبة فصل = 'divCell' > جون < / شعبة >
< شعبة فصل = 'divCell' > 31 < / شعبة >
< / شعبة >
< شعبة فصل = 'divRow' >
< شعبة فصل = 'divCell' > 003 < / شعبة >
< شعبة فصل = 'divCell' > تشارلز < / شعبة >
< شعبة فصل = 'divCell' > 28 < / شعبة >
< / شعبة >
< / شعبة >

في مقتطف الشفرة أعلاه:

• أ '
  'العلامة مع الفئة المسماة' divTable '.
• داخل “ شعبة 'عنصر الحاوية ، أضف آخر' شعبة 'عنصر الحاوية بالفئة المعلنة كـ' مقدمة الصف '.
• مرة أخرى ، أضف ثلاثة ' شعبة 'العناصر التي تحتوي على الفئات المسماة' divRow 'بثلاث حاويات فرعية مع' divCell ' فصل.
• ثم أضف ثلاثة عناصر div وأضف ' بطاقة تعريف '،' اسم ' و ' عمر 'في صف رأس الجدول.
• بعد ذلك ، حدد قيم 'المعرف' و 'الاسم' و 'العمر' لكل عنصر من عناصر div.

كان هذا كله يتعلق بكيفية استخدام ' شعبة 'لإنشاء جدول. الآن ، دعنا نطبق خصائص CSS عليها:

---

---

.divTable
{
جدول العرض؛
عرض :آلي؛
خلفية- لون :#إيييي؛
حدود : 1 بكسل صلب # 666666 ؛
تباعد الحدود: 5 بكسل ؛
}
.divRow
{
عرض :آلي؛
عرض: صف الجدول.
}
.divCell
{
عرض : 150 بكسل ؛
تعويم: اليسار؛
عرض: عمود الجدول.
خلفية- لون : rgb ( 212 و 209 و 209 ) ؛
}

في عنصر نمط CSS أعلاه:

• أضف محددًا يشير إلى ' divTable '(الذي يحتوي على جميع قيم الجدول) وحدد خصائص CSS المطلوبة (على سبيل المثال ،' عرض '،' عرض '،' لون الخلفية '،' حدود ' و ' تباعد الحدود ”) لمحتوى الجدول.
• بعد ذلك ، أضف محدد فئة يحدد عناصر ' divRow 'فئة لإضافة CSS' عرض ' و ' عرض 'خصائص العناصر.
• أخيرًا ، أضف خصائص نمط CSS إلى العناصر الموجودة في ' .divCell 'محدد الفئة.

سيؤدي هذا إلى إنشاء جدول في الإخراج وسيعرض النتائج التالية:

كان هذا كله يتعلق بإنشاء جدول في HTML باستخدام علامات