HTML جدول مثال
| رقم | الاسم الاول | الكنية | نقاط |
|---|---|---|---|
| 1 | Eve | Jackson | 94 |
| 2 | John | Doe | 80 |
| 3 | Adam | Johnson | 67 |
| 4 | Jill | Smith | 50 |
تحديد جداول HTML
مثال
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table> انها محاولة لنفسك » وأوضح سبيل المثال:
يتم تعريف الجداول مع <table> العلامة.
وتنقسم الجداول في صفوف الجدول مع <tr> العلامة.
وتنقسم صفوف الجدول إلى بيانات الجدول مع <td> العلامة.
كما يمكن تقسيم صف الجدول في عناوين الجدول مع <th> العلامة.
بيانات الجدول <td> هي حاويات البيانات من الجدول.
يمكن أن تحتوي على كل أنواع العناصر HTML مثل النصوص والصور والقوائم والجداول الأخرى، الخ
على جدول HTML مع سمة الحدود
إذا لم يتم تحديد الحدود للجدول، سيتم عرضه بلا حدود.
يمكن إضافة الحدود باستخدام border السمة:
مثال
<table border="1" style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table> انها محاولة لنفسك » على border السمة في طريقها للخروج من معيار HTML! فمن الأفضل لاستخدام CSS.
لإضافة حدود، استخدم خاصية CSS الحدود:
تذكر أن تحديد حدود لكل من الجدول وخلايا الجدول.
على جدول HTML مع حدود منهارة
إذا كنت تريد حدود للانهيار في حدود واحد، إضافة CSS border-collapse :
على جدول HTML مع نطاق الخلية
يحدد الحشو خلية الفضاء بين محتوى الخلية وحدودها.
إذا لم تقم بتحديد الحشو، وسوف يتم عرض خلايا الجدول بدون حشوة.
لضبط الحشو، استخدم CSS padding الملكية:
مثال
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
} انها محاولة لنفسك » HTML جدول العناوين
وتعرف عناوين الجدول مع <th> العلامة.
افتراضيا، جميع المتصفحات الرئيسية عرض عناوين الجدول كما جريئة وتركزت:
مثال
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table> انها محاولة لنفسك » إلى اليسار محاذاة عناوين الجدول، استخدام CSS text-align الملكية:
على جدول HTML مع تباعد الحدود
يحدد تباعد الحدود المسافة بين الخلايا.
لتعيين تباعد الحدود لجدول، استخدام CSS border-spacing الملكية:
إذا كان الجدول انهار الحدود، الحدود تباعد ليس له أي تأثير.
خلايا الجدول التي تمتد العديد من الأعمدة
لجعل فترة أكثر من خلية عمود واحد، استخدم colspan السمة:
مثال
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table> انها محاولة لنفسك » خلايا الجدول التي تمتد العديد من الصفوف
لجعل فترة أكثر من خلية صف واحد، استخدم rowspan السمة:
مثال
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table> انها محاولة لنفسك » على جدول HTML مع تسمية توضيحية
لإضافة تسمية توضيحية إلى جدول، استخدم <caption> العلامة:
مثال
<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> انها محاولة لنفسك » و <caption> يجب إدخال هذا الكود مباشرة بعد <table> العلامة.
نمط خاص لجدول واحد
لتحديد نمط خاص لجدول خاص، إضافة id السمة إلى الجدول:
مثال
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>الآن يمكنك تحديد نمط خاص لهذا الجدول:
table#t01 {
width: 100%;
background-color: #f1f1c1;
} انها محاولة لنفسك » وإضافة المزيد من الأنماط:
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
} انها محاولة لنفسك » ملخص الفصل
- استخدام HTML <table> عنصر لتحديد الجدول
- استخدام HTML <tr> عنصر لتحديد صف الجدول
- استخدام HTML <td> عنصر لتحديد بيانات الجدول
- استخدام HTML <th> عنصر لتحديد عنوان الجدول
- استخدام HTML <caption> عنصر لتحديد شرح الجدول
- استخدام CSS border الخاصية لتحديد الحدود
- استخدام CSS border-collapse الملكية في الانهيار حدود الخلية
- استخدام CSS padding الملكية لإضافة الحشو إلى خلايا
- استخدام CSS text-align الملكية لمحاذاة النص الخلية
- استخدام CSS border-spacing الملكية لضبط التباعد بين الخلايا
- استخدام colspan السمة لجعل فترة خلية العديد من الأعمدة
- استخدام rowspan السمة لجعل فترة خلية العديد من الصفوف
- استخدام id السمة لتعريف فريد طاولة واحدة
اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 » التمرين 4» التمرين 5 » التمرين 6»
HTML جدول الكلمات
| بطاقة | وصف |
|---|---|
| <table> | يحدد الجدول |
| <th> | تعرف خلية رأس في الجدول |
| <tr> | تعرف صف في الجدول |
| <td> | تعرف خلية في جدول |
| <caption> | يعرف شرح الجدول |
| <colgroup> | تحدد مجموعة من عمود واحد أو أكثر في الجدول لتنسيق |
| <col> | تحدد خصائص عمود لكل عمود داخل <colgroup> العنصر |
| <thead> | مجموعة محتوى رأس في الجدول |
| <tbody> | مجموعة محتوى الجسم في جدول |
| <tfoot> | مجموعة محتوى تذييل في جدول |