كورس HTML | تصميم موقع باستخدام جدول| المحاضرة السادسة



النموذج التعليمي
في هذا الدرس ستتعلم انشاء جدول باستخدام <table> .

ترتيب المحاضرة
المحاضرة السادسة
مدة المحاضرة
18:50
نوع الكورس
HTML
نوع الدورة
دورة تصميم مواقع

كيفية عمل جدول table .

يجب ان تكتب الوسم <table> </table> في البداية لكي يتم انشاء الجدول و من ثم قم بكتابة <tr></tr>
داخل ال <table> </table> بهذه الطريقة <table> <tr></tr> </table>
و من ثم تكتب <td> او <th> "للعناوين" داخلهم انظر الى النماذج لكي تفهم بسهولة .

الطريقة

<table> <tr><td>ضع نص داخل الجدول</td></tr> </table>

التأثير

ضع نص داخل الجدول







لاحظ انه لن يتم ظهور الجدول لانك لم تحدد حدود له من خلال العنصر border انظر الى المثال التالي .


الطريقة

<table border="1"> <tr><td>ضع نص داخل الجدول</td></tr> </table>

التأثير

ضع نص داخل الجدول





اذا اردت ان تصنع جدول له اكثر من عمود ف كل ما عليك هو زيادة عنصر اخر او اكثر حسب ما تريد من العنصر <td> و تضع داخلة ما تريد .


الطريقة

<table border="1">
<tr><td>النص الاول</td>
<td>النص الثاني</td>
<td>النص الثالث</td>
<td>النص الرابع</td>
<td>النص الخامس</td>
</tr>

</table>

التأثير

النص الاولالنص الثانيالنص الثالثالنص الرابعالنص الخامس





ان اردت ان تصنع صفوف و عواميد فكل ما عليك هو اضافة <tr> للصفوف و <td> للعمدان .



الطريقة

<table border="1">
<tr><td>النص الاول</td>
<td>النص الثاني</td>
<td>النص الثالث</td>
<td>النص الرابع</td>
<td>النص الخامس</td>
</tr>
<tr><td>النص الاول</td>
<td>النص الثاني</td>
<td>النص الثالث</td>
<td>النص الرابع</td>
<td>النص الخامس</td>
</tr>
<tr><td>النص الاول</td>
<td>النص الثاني</td>
<td>النص الثالث</td>
<td>النص الرابع</td>
<td>النص الخامس</td>
</tr>
<tr><td>النص الاول</td>
<td>النص الثاني</td>
<td>النص الثالث</td>
<td>النص الرابع</td>
<td>النص الخامس</td>
</tr>
</table>

التأثير

النص الاولالنص الثانيالنص الثالثالنص الرابعالنص الخامس
النص الاولالنص الثانيالنص الثالثالنص الرابعالنص الخامس
النص الاولالنص الثانيالنص الثالثالنص الرابعالنص الخامس
النص الاولالنص الثانيالنص الثالثالنص الرابعالنص الخامس





ان اردت تلوين الجدول كل ما عليك هو ان تستخدم

 style="background-color:ضع لون;" 

داخل الوسم table انظر الى المثال .



الطريقة

<table style="background-color: #FF6D70;" border="1">
<tr><td>النص الاول</td>
<td>النص الثاني</td>
<td>النص الثالث</td>
<td>النص الرابع</td>
<td>النص الخامس</td>
</tr>
<tr><td>النص الاول</td>
<td>النص الثاني</td>
<td>النص الثالث</td>
<td>النص الرابع</td>
<td>النص الخامس</td>
</tr>
<tr><td>النص الاول</td>
<td>النص الثاني</td>
<td>النص الثالث</td>
<td>النص الرابع</td>
<td>النص الخامس</td>
</tr>
<tr><td>النص الاول</td>
<td>النص الثاني</td>
<td>النص الثالث</td>
<td>النص الرابع</td>
<td>النص الخامس</td>
</tr>
</table>

التأثير

النص الاولالنص الثانيالنص الثالثالنص الرابعالنص الخامس
النص الاولالنص الثانيالنص الثالثالنص الرابعالنص الخامس
النص الاولالنص الثانيالنص الثالثالنص الرابعالنص الخامس
النص الاولالنص الثانيالنص الثالثالنص الرابعالنص الخامس





ان اردت تلوين صف او عمود واحد في الجدول كل ما عليك هو ان تستخدم

 style="background-color:ضع لون;" 

داخل الوسم tr ان اردت تلوين صف و td ان اردت تلوين عمود انظر الى المثال .

لتلوين العواميد في الجدول

الطريقة

<table style="background-color: #FF6D70;" border="1">
<tr  style="background-color: #74E8FB"><td>النص الاول</td>
<td>النص الثاني</td>
<td>النص الثالث</td>
<td>النص الرابع</td>
<td>النص الخامس</td>
</tr>
<tr><td>النص الاول</td>
<td>النص الثاني</td>
<td>النص الثالث</td>
<td>النص الرابع</td>
<td>النص الخامس</td>
</tr>
<tr><td>النص الاول</td>
<td>النص الثاني</td>
<td>النص الثالث</td>
<td>النص الرابع</td>
<td>النص الخامس</td>
</tr>
<tr><td>النص الاول</td>
<td>النص الثاني</td>
<td>النص الثالث</td>
<td>النص الرابع</td>
<td>النص الخامس</td>
</tr>
</table>

التأثير

النص الاولالنص الثانيالنص الثالثالنص الرابعالنص الخامس
النص الاولالنص الثانيالنص الثالثالنص الرابعالنص الخامس
النص الاولالنص الثانيالنص الثالثالنص الرابعالنص الخامس
النص الاولالنص الثانيالنص الثالثالنص الرابعالنص الخامس





ان اردت تلوين صف او عمود واحد في الجدول كل ما عليك هو ان تستخدم

 style="background-color:ضع لون;" 

داخل الوسم tr ان اردت تلوين صف و td ان اردت تلوين عمود انظر الى المثال .

لتلوين الصفوف في الجدول

الطريقة

<table style="background-color: #FF6D70;" border="1">
<tr><td style="background-color: #74E8FB">النص الاول</td>
<td>النص الثاني</td>
<td>النص الثالث</td>
<td>النص الرابع</td>
<td>النص الخامس</td>
</tr>
<tr><td style="background-color: #74E8FB">النص الاول</td>
<td>النص الثاني</td>
<td>النص الثالث</td>
<td>النص الرابع</td>
<td>النص الخامس</td>
</tr>
<tr><td style="background-color: #74E8FB">النص الاول</td>
<td>النص الثاني</td>
<td>النص الثالث</td>
<td>النص الرابع</td>
<td>النص الخامس</td>
</tr>
<tr><td style="background-color: #74E8FB">النص الاول</td>
<td>النص الثاني</td>
<td>النص الثالث</td>
<td>النص الرابع</td>
<td>النص الخامس</td>
</tr>
</table>

التأثير

النص الاولالنص الثانيالنص الثالثالنص الرابعالنص الخامس
النص الاولالنص الثانيالنص الثالثالنص الرابعالنص الخامس
النص الاولالنص الثانيالنص الثالثالنص الرابعالنص الخامس
النص الاولالنص الثانيالنص الثالثالنص الرابعالنص الخامس

No comments:

Post a Comment