الجداول (Tables) في HTML
Nov. 7, 2021 * تيتو 4 تك
تسمح جداول HTML لمبرمجي الويب بترتيب البيانات مثل النصوص والصور والروابط والجداول الأخرى وما إلى ذلك في صفوف وأعمدة من الخلايا.
يتم إنشاء جداول HTML باستخدام علامة <table> حيث يتم استخدام علامة <tr> لإنشاء صفوف الجدول ويتم استخدام علامة <td> لإنشاء خلايا البيانات. العناصر الموجودة أسفل <td> عادية ومحاذاة إلى اليسار افتراضيًا
<!DOCTYPE html>
<html>
<head>
<title> HTML جداول </title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
سيؤدي هذا إلى النتيجة التالية :
| Row 1, Column 1 | Row 1, Column 2 |
| Row 2, Column 1 | Row 2, Column 2 |
هنا ، الحد هو سمة لعلامة <table> ويتم استخدامه لوضع حد عبر جميع الخلايا. إذا لم تكن بحاجة إلى حد ، فيمكنك استخدام border = "0".
عنوان الجدول
يمكن تعريف عنوان الجدول باستخدام علامة <th>. سيتم وضع هذه العلامة لتحل محل علامة <td> ، والتي تستخدم لتمثيل خلية البيانات الفعلية. عادةً ستضع الصف العلوي كعنوان للجدول كما هو موضح أدناه ، وإلا يمكنك استخدام عنصر <th> في أي صف. تتم توسيط العناوين المحددة في علامة <th> وتكون غامقة بشكل افتراضي.
<!DOCTYPE html>
<html>
<head>
<title> HTML عنوان جدول </title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Tito Hussien</td>
<td>5000</td>
</tr>
<tr>
<td>Mido Ahmed</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
سيؤدي هذا إلى النتيجة التالية :
| Name | Salary |
|---|---|
| Tito Hussien | 5000 |
| Mido Ahmed | 7000 |
سمات الحشو والتباعد (Cellpadding and Cellspacing)
هناك نوعان من السمتين هما الحشوة وتباعد الخلايا والتي ستستخدمها لضبط المساحة البيضاء في خلايا الجدول. تحدد خاصية تباعد الخلايا المسافة بين خلايا الجدول ، بينما تمثل الحشوة المسافة بين حدود الخلية والمحتوى داخل الخلية.
<!DOCTYPE html>
<html>
<head>
<title> تباعد خلايا الجدول </title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Tito</td>
<td>5000</td>
</tr>
<tr>
<td>Mido</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
سيؤدي هذا إلى النتيجة التالية :
|
Name
|
Salary |
|
Tito Hussien
|
5000
|
|
Mido Ammed
|
7000 |
سمات Colspan / Rowspan
ستستخدم سمة colspan إذا كنت تريد دمج عمودين أو أكثر في عمود واحد. بنفس الطريقة ستستخدم rowspan إذا كنت تريد دمج صفين أو أكثر.
<!DOCTYPE html>
<html>
<head>
<title> Colspan/Rowspan سمات </title>
</head>
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
سيؤدي هذا إلى النتيجة التالية :
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Row 1 Cell 1 | Row 1 Cell 2 | Row 1 Cell 3 |
| Row 2 Cell 2 | Row 2 Cell 3 | |
| Row 3 Cell 1 | ||
ارتفاع الجدول وعرضه
يمكنك ضبط عرض الجدول وارتفاعه باستخدام سمات العرض والارتفاع. يمكنك تحديد عرض الجدول أو ارتفاعه من حيث البكسل أو من حيث النسبة المئوية لمساحة الشاشة المتاحة.
<!DOCTYPE html>
<html>
<head>
<title> عرض و ارتفاع الجدول </title>
</head>
<body>
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
سيؤدي هذا إلى النتيجة التالية :
| Row 1, Column 1 | Row 1, Column 2 |
| Row 2, Column 1 | Row 2, Column 2 |
رأس الجدول والجسم والتذييل
يمكن تقسيم الجداول إلى ثلاثة أجزاء - رأس وجسم وتذييل. يشبه الرأس والتذييل إلى حد ما الرؤوس والتذييلات في مستند معالج بالكلمات يظلان كما هو لكل صفحة ، في حين أن الجسم أو النص هو حامل المحتوى الرئيسي للجدول.
العناصر الثلاثة لفصل رأس ، وجسم ، و تذييل هي :
<thead> - لإنشاء رأس جدول منفصل.
<tbody> - للإشارة إلى الجسم الرئيسي للجدول.
<tfoot> - لإنشاء تذييل جدول منفصل.
قد يحتوي الجدول على عدة عناصر <tbody> للإشارة إلى صفحات أو مجموعات بيانات مختلفة. ولكن من الملاحظ أن علامتي <thead> و <tfoot> يجب أن تظهر قبل <tbody>
<!DOCTYPE html>
<html>
<head>
<title> HTML جدول </title>
</head>
<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>
سيؤدي هذا إلى النتيجة التالية :
| This is the head of the table | |||
| This is the foot of the table | |||
| Cell 4 | Cell 3 | Cell 2 | Cell 1 |
الجداول المتداخلة (Nested)
يمكنك استخدام جدول واحد داخل جدول آخر. لا يقتصر الأمر على الجداول فحسب ، بل يمكنك استخدام جميع العلامات تقريبًا داخل علامة بيانات الجدول <td>.
مثال
فيما يلي مثال على استخدام جدول آخر وعلامات أخرى داخل خلية جدول.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<tr>
<td>
<table border = "1" width = "100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Tito Hussien</td>
<td>5000</td>
</tr>
<tr>
<td>Mido Ahmed</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>