جداول HTML
تسمح جداول HTML لمطوري الويب بترتيب البيانات في صفوف وأعمدة.
مثال
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
حدد جدول HTML
يتكون الجدول في HTML من خلايا جدول داخل الصفوف والأعمدة
مثال
جدول HTML بسيط:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria
Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro
comercial Moctezuma</td>
<td>Francisco
Chang</td>
<td>Mexico</td>
</tr>
</table>
خلايا الجدول
يتم تحديد كل خلية من خلايا الجدول بواسطة
<td>علامة </td>وعلامة.
td
لتقف على بيانات الجدول.
كل ما بين <td>و </td>هو محتوى خلية الجدول.
مثال
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
ملاحظة: عناصر بيانات الجدول هي حاويات بيانات الجدول.
يمكن أن تحتوي على جميع أنواع عناصر HTML ؛ نص ، صور ، قوائم ، جداول أخرى ، إلخ.
صفوف الجدول
يبدأ كل صف في الجدول
بعلامة <tr>وينتهي بها .</tr>
tr
لتقف على صف الجدول.
مثال
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
يمكن أن يكون لديك العديد من الصفوف كما تريد في الجدول ، فقط تأكد من أن عدد الخلايا هو نفسه في كل صف.
ملاحظة: هناك أوقات يمكن أن يحتوي فيها صف على خلايا أقل أو أكثر من خلايا أخرى. سوف تتعلم عن ذلك في فصل لاحق.
رؤوس الجدول
في بعض الأحيان تريد أن تكون خلاياك رؤوسًا ، وفي هذه الحالات ، استخدم
<th>العلامة بدلاً من
<td>العلامة:
مثال
اجعل الصف الأول عبارة عن رؤوس جدول:
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person
3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
بشكل افتراضي ، يكون النص الموجود في <th>العناصر غامقًا ومتوسطًا ، ولكن يمكنك تغيير ذلك باستخدام CSS.
تمارين HTML
علامات جدول HTML
| Tag | Description |
|---|---|
| <table> | Defines a table |
| <th> | Defines a header cell in a table |
| <tr> | Defines a row in a table |
| <td> | Defines a cell in a table |
| <caption> | Defines a table caption |
| <colgroup> | Specifies a group of one or more columns in a table for formatting |
| <col> | Specifies column properties for each column within a <colgroup> element |
| <thead> | Groups the header content in a table |
| <tbody> | Groups the body content in a table |
| <tfoot> | Groups the footer content in a table |
للحصول على قائمة كاملة بجميع علامات HTML المتاحة ، تفضل بزيارة مرجع علامات HTML الخاص بنا .