شامل في تعلم HTML الجداول

تم تحميل الصفحة في 1,7621918 ثانية
شامل في تعلم HTML الجداول
إنضم
10 يناير 2018
المشاركات
550
الإعجابات
523
النقاط
93
الإقامة
Morocco

الجداول أو Tables
الجداول عنصر مهم جدا في تصميم الصفحات عن طريقها يمكننا تقسيم الصفحة
وجعلها
قائمة يمين وقائمة يسار
والكتير من الأشياء المفيدة التي لا غنا لك عنها

كما توظح الصورة جميع الجداول في العالم هيا عبارة عن صفوف وأعمدة

rows and columns



في html نفس الشيئ في البداية نقوم بفتح الإطار العام الأي جدول وهوا المربع الخارجي عن طريق

HTML:
<table>

هدا هوا الإطار الخارجي


</table>

الأن داخل الإطار توجد صفوف وأعمدة في html نقوم بإنشائها بهدا عن طريق

الصفوف = <tr>
الأعمدة = <td>
لكل جدول عناوين في أول الجدول تشير الى نوعية الصف نقوم بوضعها عن طريق <th>

متال :
HTML:
    <table style="width:100%">
  <tr >
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
ملاحظة هامة : <td> يمكن أن تحتوي على كافة أنواع العناصر الموجودة في HTML متل النص والصور والقوائم والجداول الأخرى ، إلخ.

النتيجة :



أعرف أن شكله بشع لايظهر كالجداول مشوهة :biggrin:
 
إنضم
10 يناير 2018
المشاركات
550
الإعجابات
523
النقاط
93
الإقامة
Morocco
العناصر المهمة مع الجداول :

هاته العناصر يمكن وظعها داخل tag أو يمكنك إضافتها عن طريق CSS حسب ما تم دكره في الموضوع سابق

شامل في تعلمCSS , HTML داخل وتيقة html

عنصر width هوا عنصر الدي يتحكم في حجم الجدول كم يشغل من الصفحة

ويكون بالنسبة المئوية


متال :
HTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body style="background-color: powderblue;">
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr style="text-align: center;">
    <td>Cyber</td>
    <td>Code</td>
    <td>10</td>
</table>
</table>
</body>
</html>

النتيجة :

عند تطبيق width=100%






 
إنضم
10 يناير 2018
المشاركات
550
الإعجابات
523
النقاط
93
الإقامة
Morocco
Adding a Border

HTML:
table, th, td {
  border: 1px solid black;
}
Collapsed Borders
HTML:
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
Adding Cell Padding

HTML:
th, td {
  padding: 15px;
}
Left-align Headings

HTML:
th {
  text-align: left;
}
Adding Border Spacing

HTML:
table {
  border-spacing: 5px;
}
Cells that Span Many Columns

وهيا تعني أن هدا الصف يشغل عمودين او أكتر

متال :

HTML:
<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>
Cells that Span Many Rows
وهيا تعني أن هدا العمود يشغل صفين او أكتر

متال :


HTML:
<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>
Adding a Caption

هوا عنوان الجدول

HTML:
<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>
 

الأعضاء النشطين حاليآ الذين يشاهدون هذا الموضوع (1 عضو و 0 ضيف)

خيارات الاستايل

نوع الخط
مودك
اخفاء السايدر بار OFF
توسيط المنتدى OFF
فصل الأقسام OFF
الأقسام الفرعية OFF
عرض المشاركات
حجم الخط
معلومات العضو OFF
إخفاء التوقيع OFF

إرجاع خيارات الإستايل