كيفية إنشاء الجداول في HTML
الجداول هي وسيلة هامة لعرض البيانات في تنسيق منظم في صفحات الويب. في HTML، يمكن إنشاء الجداول باستخدام عناصر خاصة تسمح لك بتحديد الصفوف والأعمدة بسهولة. في هذا المقال، سنتعلم كيفية إنشاء الجداول في HTML وكيفية تنسيقها بشكل جيد.
ما هي الجداول في HTML؟
الجداول في HTML عبارة عن هيكل مكون من صفوف وأعمدة لعرض البيانات بطريقة منظمة. يتم تحديد هيكل الجدول باستخدام العنصر <table>. يمكن إضافة صفوف وأعمدة باستخدام العناصر <tr> و <td>.
كيفية إنشاء جدول بسيط في HTML
في HTML، يتم استخدام العنصر <table> لإنشاء الجدول، والعنصر <tr> لإنشاء صف جديد، والعنصر <td> لإنشاء خلية داخل الصف. إذا أردت إضافة رؤوس للجدول، يمكنك استخدام العنصر <th>.
مثال على جدول بسيط:
<table border="1">
<tr>
<th>اسم الطالب</th>
<th>العلامة</th>
</tr>
<tr>
<td>محمد</td>
<td>95</td>
</tr>
<tr>
<td>أحمد</td>
<td>88</td>
</tr>
<tr>
<td>سارة</td>
<td>92</td>
</tr>
</table>إضافة تنسيق للجدول باستخدام CSS
يمكنك تحسين مظهر الجدول باستخدام CSS. على سبيل المثال، يمكنك إضافة ألوان، مسافات بين الخلايا، وحواف.
<style>
table {
width: 50%;
border-collapse: collapse;
margin: 25px 0;
font-size: 18px;
text-align: center;
}
th, td {
padding: 10px;
border: 1px solid #ddd;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>نموذج الكود:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>إنشاء الجداول في HTML</title>
<style>
table {
width: 50%;
border-collapse: collapse;
margin: 25px 0;
font-size: 18px;
text-align: center;
}
th, td {
padding: 10px;
border: 1px solid #ddd;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>تعلم كيفية إنشاء الجداول في HTML</h1>
<p>الجداول هي وسيلة رائعة لعرض البيانات في صفحة الويب. سنعرض لك الآن كيفية إنشاء جدول بسيط مع مثال عملي.</p>
<h2>مثال على جدول بسيط:</h2>
<table border="1">
<tr>
<th>اسم الطالب</th>
<th>العلامة</th>
</tr>
<tr>
<td>محمد</td>
<td>95</td>
</tr>
<tr>
<td>أحمد</td>
<td>88</td>
</tr>
<tr>
<td>سارة</td>
<td>92</td>
</tr>
</table>
<footer>
<p>© 2024 تعلم HTML. جميع الحقوق محفوظة.</p>
</footer>
</body>
</html>
تعليقات
إرسال تعليق
أترك بصمتك بتعليق على مدونة التربية و التعليم