You are on page 1of 6

‫انذرس انعاشر‪ :‬انجذاول‬

‫انجذاول تستخذو نعرض بٍاناث يجذونت ِثً اٌّعٍ‪ِٛ‬اخ اٌر‪ ٟ‬ذعشع تشىً ِٕطم‪ ِٓ ٟ‬خالي أعّذج ‪ٚ‬طف‪ٛ‬ف‪.‬‬

‫هم هي صعبة؟‬
‫إٔشاء اٌجذا‪ٚ‬ي ف‪ HTML ٟ‬لذ ‪٠‬ى‪ ْٛ‬ف‪ ٟ‬اٌثذا‪٠‬ح ِعمذاً‪ٌ ،‬ىٓ إرا تم‪١‬د ٘ادئاً ‪ٚ‬سالثد ِا ذم‪ َٛ‬تٗ ج‪١‬ذاً سرش‪ ٜ‬أْ‬
‫اٌجذا‪ٚ‬ي تس‪١‬طح ‪ِٕٚ‬طم‪١‬ح‪ ،‬ذّاِاً وّا ٘‪ ٛ‬وً ش‪ٟ‬ء ف‪HTML.ٟ‬‬

‫يثال ‪:1‬‬

‫س‪١‬ظ‪ٙ‬ش ت‪ٙ‬زا اٌشىً ف‪ِ ٟ‬رظفذه‬

‫ما انفرق بيه >‪ <tr‬و>‪<td‬؟‬


‫وّا ذش‪ ٜ‬ف‪ ٟ‬اٌّثاي أعالٖ‪٘ ،‬زا ٘‪ ٛ‬أوثش أِثٍح ‪ HTML‬ذعم‪١‬ذاً لّٕا تعشػٗ ف‪٘ ٟ‬زا اٌذسس در‪ ٝ‬ا‪ٌٕ ،ْ٢‬مُ ترفى‪١‬ه‬
‫اٌّثاي ‪ٚ‬ششح وً ‪ٚ‬سُ‪:‬‬

‫هناك ثالث عناصر تستخذو إلنشاء أي جذول‪:‬‬

‫وسم انبذاٌت >‪ <table‬ووسم اإلغالق >‪ٌ </table‬بذأ من بٍنهما انجذول وٌنتهً‪ ،‬منطقً‪.‬‬ ‫‪‬‬
‫>‪<tr‬تعنً "‪ "table row‬وهً انعنصش انزي تبذأ من خالنه انصفىف وتنتهً‪ ،‬ال صال األمش منطقٍاً‪.‬‬ ‫‪‬‬
‫>‪ <td‬هً اختصاس ‪ "table data".‬هزا انىسم ٌبذأ وٌنهً كم خهٍت فً صفىف انجذول‪ ،‬كم هزا بسٍط‬ ‫‪‬‬
‫ومنطقً‪.‬‬

‫٘زا ِا ‪٠‬ذذز ف‪ ٟ‬اٌّثاي األ‪ٚ‬ي‪ ،‬اٌجذ‪ٚ‬ي ‪٠‬ثذأ ت‪ٛ‬سُ>‪٠ ، <table‬رثعٗ ‪ٚ‬سُ >‪ <tr‬اٌز‪٠ ٞ‬ذي عٍ‪ ٝ‬تذا‪٠‬ح طف‬
‫جذ‪٠‬ذ‪ٕ٘ٚ ،‬ان خٍ‪١‬راْ ف‪٘ ٟ‬زا اٌسطش>‪: <td‬خٍ‪١‬ح ‪<td>ٚ</td> 1‬خٍ‪١‬ح ‪ ، </td>2‬ثُ ٔغٍك اٌظف ت‪ٛ‬سُ‬
‫اإلغالق >‪ٔٚ </tr‬ثذأ آخش >‪ <tr‬اٌز‪٠ ٞ‬ذ‪ ٞٛ‬أ‪٠‬ؼاً خٍ‪١‬ر‪ ،ٓ١‬ثُ ٔغٍك اٌجذ‪ٚ‬ي‪</table>.‬‬

‫فمط ٌٕ‪ٛ‬ػخ األِش أوثش ‪ :‬انصفىف تظهر بشكم خط أفقً ين انخالٌا‪ ،‬واألعًذة عهى شكم خط رأسً ين انخالٌا‬
‫خٍ‪١‬ح ‪ ٚ 1‬خٍ‪١‬ح ‪ 2‬ذشىالْ طفاً‪ ،‬خٍ‪١‬ح ‪ٚ 1‬خٍ‪١‬ح ‪ 3‬ذشىالْ عّ‪ٛ‬داً‬

‫ف‪ ٟ‬اٌّثاي أعالٖ ايجد‪ٚ‬ي ‪٠‬ذ‪ ٞٛ‬طف‪ٚ ٓ١‬عّ‪ٛ‬د‪ّ٠ٚ ،ٓ٠‬ىٓ ٌٍجذ‪ٚ‬ي أْ ‪٠‬ذ‪ ٞٛ‬عذداً ال ٔ‪ٙ‬ائ‪١‬اً ِٓ اٌظف‪ٛ‬ف ‪ٚ‬األعّذج‪.‬‬

‫يثال ‪:2‬‬

‫س‪١‬ظ‪ٙ‬ش ت‪ٙ‬زا اٌشىً ف‪ِ ٟ‬رظفذه‬

‫هم هناك أية خصائص نهجداول؟‬


‫تاٌطثع ٕ٘ان خظائض ٌٍجذا‪ٚ‬ي‪ٕ٘ ،‬ان ِثالً خاط‪١‬ح اإلطاس اٌر‪ ٟ‬ذسرخذَ ٌرذذ‪٠‬ذ سّه اإلطاس د‪ٛ‬ي اٌجذ‪ٚ‬ي ‪:‬‬

‫يثال ‪:3‬‬
‫س‪١‬ظ‪ٙ‬ش ت‪ٙ‬زا اٌشىً ف‪ِ ٟ‬رظفذه‬

‫سّه إطاس اٌجذ‪ٚ‬ي ‪٠‬ذذد تّم‪١‬اس اٌثىسً ‪ٚ‬وّا ٘‪ ٛ‬اٌذاي ِع اٌظ‪ٛ‬س‪ّ٠ ،‬ىٕه أْ ذذذد عشع اٌجذ‪ٚ‬ي تايبوسً أ‪ٚ‬‬
‫تإٌسثح اٌّؤ‪٠‬ح ٌّم‪١‬اس اٌشاشح‪:‬‬

‫يثال ‪:4‬‬

‫٘زا اٌّثاي س‪١‬عشع ف‪ ٟ‬اٌّرظفخ جذ‪ٚ‬الً تعشع ‪ِ ِٓ %30‬م‪١‬اس اٌشاشح‪ ،‬جشب رٌه تٕفسه‪.‬‬

‫انمزيد مه انخصائص‬
‫ٕ٘ان خظائض وث‪١‬شج ٌٍجذا‪ٚ‬ي‪٘ ،‬زاْ اثٕاْ ِٕ‪ٙ‬ا‪:‬‬

‫‪ٌ align:‬حذد انمحاراة نمحتىٌاث انجذول‪ ،‬أو انصف أو فً انخهٍت‪ ،‬فمثالً ٌمكن محاراة اننص إنى انٍمٍن أو‬ ‫‪‬‬
‫انٍساس أو فً انمنتصف‪.‬‬
‫انمنتصف‬
‫‪.‬‬ ‫ٌحذد انمحاراة انشأسٍت نمحتىٌاث انخهٍت‪ ،‬فٍمكن محاراة اننص فً األعهى أو األسفم أو‬ ‫‪‬‬

‫يثال ‪:5‬‬
‫ماذا يمكه أن أضع في انجداول؟‬
‫ٔظش‪٠‬اً ‪ّ٠‬ىٓ أْ ذؼع أ‪ ٞ‬ش‪ٟ‬ء ف‪ ٟ‬اٌجذا‪ٚ‬ي‪ ،‬إٌظ‪ٛ‬ص ‪ٚ‬اٌظ‪ٛ‬س ‪ٚ‬اٌش‪ٚ‬اتط‪ ،‬نكن انجذاول يخصصت نعرض‬
‫انبٍاناث يجذونت‪ٌ ،،‬زٌه ال ذسرخذِ‪ٙ‬ا ٌ‪ٛ‬ػع أ‪ ٞ‬ش‪ٟ‬ء ألٔه ذش‪٠‬ذ تثساطح أْ ذجعً األش‪١‬اء ذظ‪ٙ‬ش تجأة تعؼ‪ٙ‬ا‬
‫اٌثعغ‪.،‬‬

‫لثً سٕ‪ٛ‬اخ ِعذ‪ٚ‬دج وأد اٌجذا‪ٚ‬ي ذسرخذَ غاٌثاً وأداج ٌٍرظّ‪ٌ ،ُ١‬ىٓ إرا أسدخ أْ ذرذىُ تطش‪٠‬مح عشع‬
‫إٌظ‪ٛ‬ص ‪ٚ‬اٌجذا‪ٚ‬ي ٕ٘ان طش‪٠‬مح أفؼً تىث‪١‬ش (ذٍّ‪١‬خ )‪ٌ: CSS‬ىٓ ٘زا سٕٕالشٗ الدماً‪.‬‬

‫ا‪ ْ٢‬لُ ترطث‪١‬ك ِا ذعٍّرٗ ‪ٚ‬طُّ عذداً ِٓ اٌجذا‪ٚ‬ي تّخرٍف اٌم‪١‬اساخ ‪ِٚ‬خرٍف اٌخظائض ‪ٚ‬اٌّذر‪٠ٛ‬اخ‪٘ ،‬زا ‪ّ٠‬ىٓ‬
‫أْ ‪٠‬ثم‪١‬ه ِشغ‪ٛ‬الً ٌساعاخ‪.‬‬

‫ماذا بقي إذاً؟‬


‫خاط‪١‬راْ ّ٘ا ‪ rowspan ٚ colspan‬ذسرخذِاْ إلٔشاء جذا‪ٚ‬ي سائعح ‪ِٚ‬رمٕح‪.‬‬

‫‪ ٟ٘ Colspan‬اخرظاس "‪ Colspan ، "column span‬تستخذو فً انىسى >‪ <td‬نتحذد عذد األعًذة انتً‬
‫ستتًذد نها انخهٍت‪:‬‬

‫يثال ‪:1‬‬

‫س‪١‬ظ‪ٙ‬ش ت‪ٙ‬زا اٌشىً ف‪ِ ٟ‬رظفذه‬

‫ترذذ‪٠‬ذ ‪ colspan‬تاٌم‪ّ١‬ح "‪ "3‬لاِد اٌخٍ‪١‬ح ف‪ ٟ‬اٌظف األ‪ٚ‬ي تاٌرّذد ٌثالثح أعّذج‪ ٌٛٚ ،‬لّٕا ت‪ٛ‬ػع " ‪ٌ "2‬م‪ّ١‬ح‬
‫‪ colspan‬سررّذد ٌعّ‪ٛ‬د‪ ٓ٠‬اثٕ‪ٚ ،ٓ١‬س‪١‬رع‪ ٓ١‬عٍ‪ٕ١‬ا إػافح خٍ‪١‬ح أخش‪ٌٍ ٜ‬ظف األ‪ٚ‬ي در‪ ٝ‬ذظثخ األعّذج ِرسا‪٠ٚ‬ح‬

‫يثال ‪:2‬‬
‫س‪١‬ظ‪ٙ‬ش ت‪ٙ‬زا اٌشىً‬

‫ما هي خاصية‪ rowspan‬؟‬


‫وّا ستّا خّٕد‪ rowspan ،‬تحذد عذد انصفىف انتً ستقىو انخهٍت بانتًذد فىقها‪:‬‬

‫يثال ‪:3‬‬

‫س‪١‬ظ‪ٙ‬ش ت‪ٙ‬زا اٌشىً ف‪ِ ٟ‬رظفذه‬

‫ف‪ ٟ‬اٌّثاي أعالٖ أعط‪ٕ١‬ا‬


‫اٌخاط‪١‬ح ‪ rowspan‬اٌم‪ّ١‬ح "‪ٌٍ" 3‬خٍ‪١‬ح ‪٘ ، 1‬زا ‪٠‬عٕ‪ ٟ‬أْ اٌخٍ‪١‬ح ‪٠‬جة أْ ذرّذد ف‪ٛ‬ق ثالز طف‪ٛ‬ف‪ ،‬اٌظف اٌز‪ٞ‬‬
‫ذمع ف‪ ٗ١‬اٌخٍ‪١‬ح ِع طف‪ ٓ١‬آخش‪ ٓ٠‬أسفٍ‪ٙ‬ا‪ ،‬اٌخٍ‪١‬ح ‪ٚ 1‬اٌخٍ‪١‬ح‪ 2‬اٌراْ ذمعاْ ف‪ٔ ٟ‬فس اٌظف‪ ،‬ت‪ّٕ١‬ا اٌخٍ‪١‬ح ‪ٚ 3‬اٌخٍ‪١‬ح‬
‫أستع ذشىالْ طف‪ِٕ ٓ١‬فظٍ‪.ٓ١‬‬

‫ً٘ ذشعش تاٌذ‪١‬شج؟ دسٕاً‪ ،‬األِش ٌ‪١‬س ِعمذاً ٌىٓ ِٓ اٌس‪ ًٙ‬أْ ذؼ‪١‬ع ف‪ ٟ‬اٌرفاط‪ ً١‬ف‪ ٟ‬تعغ األد‪١‬اْ‪ٌ ،‬زٌه ِٓ‬
‫األفؼً أْ ذشسُ اٌجذ‪ٚ‬ي أ‪ٚ‬الً عٍ‪ ٝ‬اٌ‪ٛ‬سق لثً أْ ذطثمٗ عٍ‪HTML.ٝ‬‬

‫ستّا ال ذشعش تاٌذ‪١‬شج‪ ،‬إرا لُ تئٔشاء جذ‪ٚ ٓ١ٌٚ‬اسرخذاَ وً ِٓ ‪rowspan ٚ colspan‬تٕفسه‪<............‬‬


: