اشترك ليصلك جديدنا
ليصلك جديد التصاميم المجانية والمدفوعة، ومقالات التسويق الإلكتروني،
اشترك معنا باضافة بريدك الإلكتروني، وكذلك واتساب (اختياري).
الدرس العاشر: الجداول HTML Tables
جميع الدروس
الدرس الاول: ماهي لغة HTML
الدرس الثاني: الدرس الثاني: علامات الترميز HTML Tags
الدرس الثالث: المحرر HTML Editor
الدرس الرابع: العنواين HTML Headings
الدرس الخامس: الفقرات HTML Paragraphs
الدرس السادس: الروابط HTML Links
الدرس السابع: إضافة الصور HTML images
الدرس الثامن: الاستايل HTML Styles
الدرس التاسع: النصوص HTML Texts
الدرس العاشر: الجداول HTML Tables
الدرس الاول: ماهي لغة HTML
الدرس الثاني: الدرس الثاني: علامات الترميز HTML Tags
الدرس الثالث: المحرر HTML Editor
الدرس الرابع: العنواين HTML Headings
الدرس الخامس: الفقرات HTML Paragraphs
الدرس السادس: الروابط HTML Links
الدرس السابع: إضافة الصور HTML images
الدرس الثامن: الاستايل HTML Styles
الدرس التاسع: النصوص HTML Texts
الدرس العاشر: الجداول HTML Tables
الجداول في HTML
طريقة عمل جدول HTML
الجداول في HTML
تعتبر الجداول من أهم العناصر في HTML وتستخدم لترتيب وتنظيم المحتوى داخل صفحات الويب على هيئة صفوف وأعمدة.
بالإمكان استخدام الجداول لترتيب محتوى الموقع الالكتروني أو عرض جداول البيانات وتكمن أهميته في الترتيب والتنسيق.
طريقة عمل جدول HTML
أدناه مثال لجدول يحوي الاسم والوظيفة والدولة
تم عمل الجدول بواسطة الكود التالي:
<html>
<head>
<meta charset="utf-8">
<title>Table Example</title>
<style type="text/css">
table, td {
border: 1px solid black;}
</style>
</head>
<body>
<table>
<tr>
<td>Name</td>
<td>Job</td>
<td>Country</td>
</tr>
<tr>
<td> Yusuf </td>
<td> Web Developer </td>
<td> Yemen </td>
</tr>
<tr>
<td> Ahmed </td>
<td>Doctor</td>
<td>Egypt</td>
</tr>
<tr>
<td> Yasser </td>
<td>Teacher</td>
<td>KSA</td>
</tr>
</table>
</body>
</html>
من سطر 12 وحتى 33 تم عمل الجدول داخل الكود <table> ويتم إغلاقة بـ </table> وكما ذكرنا سالفاً أن الجدول تكون من صفوف وكل صف يتكون من خلايا، يتم عمل الصف بالكود <tr> ويتم إغلاقة بـ </tr>.
داخل الصف تأتي الخلايا أو الأعمدة ويتم عملها بكود <td> ويتم غلق الخلية </td> وادناه الصورة العامة للجدول:
نلاحظ أعلاه أننا قمنا بعمل جدول من صف واحد وبداخله ثلاثة أعمدة أو خلايا، وتم كتابة النص التوضيحي بداخله. بإمكانك عمل صف ثاني وثالث بكود <tr> ولا ننسى أن نغلقه بـ </tr>.
مع ملاحظة من سطر 5 إلى 8 تم عمل ستايل للجدول بأن يكون للخلايا td وأيضا الجدول table حدود وتم تعيين قيمة الحدود ب1.