نموذج جدول HTML: دليل شامل
نموذج جدول HTML هو عنصر أساسي في إنشاء جداول البيانات على صفحات الويب. وهو يوفر طريقة منظمة لعرض المعلومات في صفوف وأعمدة، مما يسهل قراءتها وفهمها. في هذه المقالة، سنستكشف بالتفصيل نموذج جدول HTML، بما في ذلك عناصره وسماته وكيفية استخدامه لإنشاء جداول فعالة.
عناصر نموذج الجدول
يتكون نموذج جدول HTML من العناصر التالية:
“: العنصر الجذر الذي يحدد الجدول بالكامل. “: العنصر الذي يحدد عنوان الجدول. “: العنصر الذي يحدد جسم الجدول حيث توجد البيانات. “: العنصر الذي يحدد تذييل الجدول. “: العنصر الذي يحدد صفًا في الجدول. `
| `: العنصر الذي يحدد خلية عنوان في الجدول. ` |
`: العنصر الذي يحدد خلية بيانات في الجدول.
سمات نموذج الجدول يمكن استخدام السمات التالية لتخصيص نموذج جدول HTML: `border`: تحدد عرض حدود الجدول. استخدام نموذج الجدول لتكوين جدول HTML، استخدم العلامات التالية: “`html
“` التباعد والتعبئة يمكن تعديل المسافة بين الخلايا والمسافة بين المحتوى وخلايا الجدول باستخدام سمات `cellspacing` و`cellpadding`، على التوالي. على سبيل المثال: “`html
“` عنوان الجدول يمكن تحديد عنوان الجدول باستخدام عنصر ` |
|---|
| رقم الموظف | الاسم | الراتب |
|---|---|---|
| 1 | جاسم | 1000$ |
| 2 | مريم | 1200$ |
“`
استخدام CSS
يمكن استخدام CSS لتصميم وتخصيص جدول HTML. على سبيل المثال، يمكن تغيير لون الخلفية ونمط الخط والأبعاد باستخدام CSS.
“`css
table
background-color: #FFF;
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
th
background-color: #000;
color: #FFF;
padding: 5px;
td
padding: 5px;
“`
التنسيق الديناميكي باستخدام JavaScript
يمكن استخدام JavaScript لإنشاء جداول HTML ديناميكيًا وإضافة صفوف وأعمدة وإزالتها والتلاعب بها. على سبيل المثال، يمكن إضافة صف جديد إلى الجدول باستخدام JavaScript:
“`javascript
var table = document.getElementById(“myTable”);
var row = table.insertRow(table.rows.length);
row.insertCell(0).innerHTML = “3”;
row.insertCell(1).innerHTML = “علي”;
row.insertCell(2).innerHTML = “1500$”;
“`
نموذج جدول HTML هو أداة قوية لإنشاء جداول بيانات منظمة على صفحات الويب. من خلال فهم عناصره وسماته واستخدام CSS وJavaScript، يمكنك إنشاء جداول فعالة وسهلة القراءة لتقديم المعلومات بوضوح وفعالية.
