شرح انشاء الجداول والاعمدة والصفوف داخل الجدول html table tags
table ترجمتها جدول.
وهذا العنصر يكون بداخلة جميع العناصر التالية 👇
Caption ترجمتها شرح.
المُحتوى بداخل هذا العُنصر يكون هو عنوان الجدول ولكن العنوان اعلى الجدول.
مثال على ذلك:
<!DOCTYPE html>
<html>
<head>
<title>Courses 4 Arab</title>
<!-- css اكواد لغة -->
<style>
table,
th,
td {
border: 1px solid black;
text-align: center;
margin: auto;
}
</style>
</head>
<body>
<table>
<caption>popular Frameworks</caption>
<tr>
<th>front-end frameworks</th>
<th>Back-end frameworks</th>
</tr>
<tr>
<td>React</td>
<td>Laravel</td>
</tr>
<tr>
<td>Angular</td>
<td>Django</td>
</tr>
<tr>
<td>Vue</td>
<td>Flask</td>
</tr>
</table>
</body>
</html>
وهذه الأكواد تُعطىهذه النتيجة :| front-end frameworks | Back-end frameworks |
|---|---|
| React | Laravel |
| Angular | Django |
| Vue | Flask |
<tr> tr اختصار ل table row ومعناها صف داخل الجدول.
<th> th اختصار ل table header وترجمتها عنوان الجدول ولكن العنوان داخل الجدول.
ويكون داخل عنصر ال <tr>
<td> td هي اختصار ل table data ومعناها المعلومات الفرعية اسفل عنوان الجدول <th>
مثال على ذلك فى الأعلى 👆
اذا كان الجدول يتكون من العنوان (head) و الجزء الأساسي من الجدول (body) و الجزء الأسفل من الجدول (footer) فإننا نستخدم هذه العناصر معا لتكون محتوياتهم هي <tr > او <th > حتى يُمكننا التعامل مع الجدول بسهولة اذا كان الجدول يحتوى على الكثير من البيانات.
مثال على ذلك:
<!DOCTYPE html>
<html>
<head>
<title>Courses 4 Arab</title>
<!-- css اكواد لغة -->
<style>
table,
th,
td {
border: 1px solid black;
text-align: center;
margin: auto;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>المصروفات</th>
<th>الشهر</th>
</tr>
</thead>
<tbody>
<tr>
<td>1200</td>
<td>يناير</td>
</tr>
<tr>
<td>1800</td>
<td>فبراير</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>3000</td>
<td>المجموع</td>
</tr>
</tfoot>
</table>
</body>
</html>
وهذه الأكواد تُعطى هذه النتيجة :
| المصروفات | الشهر |
|---|---|
| 1200 | يناير |
| 1800 | فبراير |
| 3000 | المجموع |
هذه العناصر تُستخدم بعد عنصر ال <table> وبعد عنصر ال <caption> وذلك لتنسيق الاعمدة
<col > يكون دائما داخل عنصر <colgroup> ولا يوجد له نهاية وسم (closing tag) ويُمكن كتابته <col> او <col />
وتحتوي على attribute مهم هو span وتكون قيمته عبارة عن عدد الأعمدة المُراد تنسيقها بالترتيب من اليسار الى اليمين.
مثال على ذلك:
<!DOCTYPE html>
<html>
<head>
<title>Courses 4 Arab</title>
<!-- css اكواد لغة -->
<style>
table,
th,
td {
border: 1px solid black;
text-align: center;
margin: auto;
}
</style>
</head>
<body>
<table>
<colgroup>
<col span="2" style="background-color: white" />
<col style="background-color: gray" />
</colgroup>
<thead>
<tr>
<th>المُرتب</th>
<th>المصروفات</th>
<th>الشهر</th>
</tr>
</thead>
<tbody>
<tr>
<td>2000</td>
<td>1200</td>
<td>يناير</td>
</tr>
<tr>
<td>2200</td>
<td>1800</td>
<td>فبراير</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>4200</td>
<td>3000</td>
<td>المجموع</td>
</tr>
</tfoot>
</table>
</body>
</html>
وهذه الأكواد تُعطى هذه النتيجة :| المُرتب | المصروفات | الشهر |
|---|---|---|
| 2000 | 1200 | يناير |
| 2200 | 1800 | فبراير |
| 4200 | 3000 | المجموع |
ياريت تقفله لوسمحت 😊 😊
تنبيه هام ✋
إذا كانت الإعلانات مزعجة بالنسبة لك، فيُمكنك التبرع ب50$ وسيتم إيقاف الإعلانات لمدة شهر لجميع زوار الموقع 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك