66 lines
1.4 KiB
Markdown
66 lines
1.4 KiB
Markdown
---
|
|
title: Tables
|
|
localeTitle: الجداول
|
|
---
|
|
### HTML إنشاء جدول في
|
|
|
|
ينقسم الجدول إلى صفوف و أعمدة
|
|
|
|
`<tr>` يتم تعريف كل صف الجدول بـ
|
|
|
|
`<td>` يتم تعريف كل عمود الجدول بـ
|
|
|
|
عناصر أكثر تعقيدًا كـ HTML أيضًا قد يتضمن جدول
|
|
|
|
`<caption>` و `<col>` و `<colgroup>` و `<thead>` و `<tfoot>` و `<tbody>`
|
|
|
|
### مثال بسيط على الجدول
|
|
|
|
<table border=1 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>
|
|
`
|
|
|
|
[DEMO](https://codepen.io/arachid/pen/jeeLoO)
|
|
|
|
### مثال آخر بسيط على الجدول
|
|
|
|
<table border=1 style="width:100%">
|
|
<tr>
|
|
<th>Item</th>
|
|
<th>Item</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Apple</td>
|
|
<td>10</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Peach</td>
|
|
<td>15</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Watermelon</td>
|
|
<td>3</td>
|
|
</tr>
|
|
</table>
|
|
|
|
[DEMO](https://codepen.io/arachid/pen/jeeLgO)
|
|
|
|
#### معلومات اكثر:
|
|
|
|
[المادة MDN على HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) [بطاقة](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table)
|