Web Programmin L4_٠٨١٧١٦

ﺟﺪاول HTML ، ﺗﺨﻄﻴﻄﺎت HTML • 2 ﻛﻮد اﻟﺠﺪول اﻷﺳﺎﺳﻲ: اﻟﻜﻮد أﻋﻼه ﺳﻴﻨﺸﺊ ﻫﺬا: > td <ﺧᇁﻴﺔ 1 > / tdᲘᲖtd <ﺧᇁﻴﺔ 2 > / td < > td <ﺧᇁﻴﺔ 3 > / tdᲘᲖtd <ﺧᇁﻴﺔ 4 > / td < 3 ﻛﻮد اﻟﺠﺪول اﻷﺳﺎﺳﻲ)ﺗﺎﺑﻊ(: • > table < ﻳﺤﺘﻮي ﻋﲆ ﺟﻤﻴﻊ اᆿﻌﻨﺎﺻﺮ اﻷﺧﺮى اᆿﻤﺘﻌᇁﻘﺔ ﺑﺎᆿﺠﺪول ﺑﺪاﺧᇁﻪዔ ﻳﺤﺘﻮي ﻋﲆ ﺳﻤﺔ border ، واᆿﺘﻲ ﻳﻤﻜﻦ ﺿﺒﻄﻬﺎ ﻋﲆ رﻗﻢዔ ﻳﺤﺪد ﻫﺬا ﻋﺮض ﺣﺪ اᆿﺠﺪول،اﺿﺒﻄﻪ ﻋﲆ ﺻﻔﺮ ᆿﻌﺪم وﺟﻮد ﺣﺪዔᄱ • > tr < ﻳﺒﺪأ ﺻﻒ ﺟﺪول ﺟﺪﻳﺪዔ ﺗﻨﺘﻬﻲ اᆿﺼﻔﻮف ﺑﻌﻼﻣﺔ إﻏﻼق > / trᲘᲈ •Ზtd < ﺗﻌﻨﻲ ﺑﻴﺎﻧﺎت ﺟﺪول، ᆿﻜﻨﻨﺎ ﺳﻨﺴﻤﻴﻬﺎ داﺋﻤًﺎ "ﺧﻼﻳﺎ ﺟﺪول". ﻛﻞ ﻣﺮﺑﻊ ﺗﺮاه ﻓﻲ ﺻﻔﺤﺔ HTML اᆿﻨﺎﺗﺠﺔ ﻫﻮ ﺧᇁﻴﺔዔ ﺗُﻐᇁﻖ tds ﺑﺎᆿﻤﺜﻞ ﺑـ >/td < . • > / table < ﻳﻨﻬﻲ اᆿﺠﺪولዔ • 4 ﻋﺮض اﻟﺠﺪول واﻟﺨﻼﻳﺎ أﻣﺜᇁﺔ࿎ ﺟﺪول HTML ﺑﻌﺮض 400 ﺑﻜﺴﻞ࿎ ﺧﻼﻳﺎ اﻟﺠﺪول ﺑﻌﺮض ﻣﺤﺪد ﻣﺴﺒﻘًﺎ: >ﺟﺪول ﻋﺮض= "400" < >ﺟﺪول ﻋﺮض= "400" < > th <اᆿﺸﻬﺮ>/th < > th <اᆿﻤﺪﺧﺮات>/th < > th <اᆿﺸﻬﺮ>/th < > th <اᆿﻤﺪﺧﺮات>/th < > td <ﻳﻨﺎﻳﺮ>/td < > tdᲘ᲋ᲊᲊ دوﻻر>/td < > td ﻋﺮض= "70%" <ﻳﻨﺎﻳﺮ>/tdᲘ Ზtd ﻋﺮض= "30%">100 دوﻻر>/td < > td <ﻓﺒﺮاﻳﺮ>/td < > tdᲘᲒᲊ دوﻻرًا>/td < > td <ﻓﺒﺮاﻳﺮ>/td < > tdᲘᲒᲊ دوﻻرًا>/td < 5 ﺳﻤﺔ ﺣﺸﻮ اﻟﺨﻼﻳﺎ •ﺗﺤﺪد ﺳﻤﺔ ﺗﺒﺎﻋﺪ اﻟﺨﻼﻳﺎ اﻟﻤﺴﺎﻓﺔ، ﺑﺎﻟﺒﻜﺴﻞ، ﺑﻴﻦ ﺟﺪار اﻟﺨﻠﻴﺔ وﻣﺤﺘﻮى اﻟﺨﻠﻴﺔ. >ﺟﺪول ﺗﺒﺎﻋﺪ اᆿﺨﻼﻳﺎ= "10" < > th <اᆿﺸﻬﺮ>/th < > th <اᆿﻤﺪﺧﺮات>/th < > td <ﻳﻨﺎﻳﺮ>/td < $100 6 ﺳﻤﺔ ﺗﺒﺎﻋﺪ اﻟﺨﻼﻳﺎ •ﺗﺤﺪد ﺳﻤﺔ ﺗﺒﺎﻋﺪ اﻟﺨﻼﻳﺎ اﻟﻤﺴﺎﻓﺔ، ﺑﺎﻟﺒﻜﺴﻞ، ﺑﻴﻦ اﻟﺨﻼﻳﺎ. >ﺟﺪول ﺗﺒﺎﻋﺪ اᆿﺨﻼﻳﺎ= "10" < > th <اᆿﺸﻬﺮ>/th < > th <اᆿﻤﺪﺧﺮات>/th < > td <ﻳﻨﺎﻳﺮ>/td < $100 7 ﻣﺤﺎذاة اﻟﺨﻠﻴﺔ •ﻻ ﻳﻤﻜﻨﻚ ﻓﻘﻂ ﻣﺤﺎذاة اﻟﺠﺪول ﺑﺄﻛﻤﻠﻪ إﱃ أﺣﺪ اﻟﺠﺎﻧﺒﻴﻦ أو إﱃ اﻟﻤﻨﺘﺼﻒ، ﺑﻞ ﻳﻤﻜﻨﻚ أﻳﻀًﺎ ﻣﺤﺎذاة اﻟﻨﺺ أو اﻟﺼﻮر أو أي ﺷﻲء داﺧﻞ اﻟﺨﻠﻴﺔ إﱃ أﺣﺪ اﻟﺠﺎﻧﺒﻴﻦ أو اﻟﻤﻨﺘﺼﻒ أو إﱃ اﻷﻋﲆ أو اﻷﺳﻔﻞ. ﻋﲆ ﺳﺒﻴﻞ اﻟﻤﺜﺎل: ﺗﻮﺳﻴﻂ ﻳﻤﻴﻦ •ﻣﺎ ﻋᇁﻴﻚ ﺳﻮى وﺿﻊ ﺳﻤﺔ اᆿﻤﺤﺎذاة ﻓﻲ ﻋﻨﺼﺮ td )أو ﻓﻲ tr إذا ﻛﻨﺖ ﺗﺮﻳﺪ اᆿﺘﺄﺛﻴﺮ ﻋﲆ اᆿﺼﻒ ﺑﺄﻛﻤᇁﻪ(ዔ ﻣﺜﻞ >td alignᲗ᱾right᱾ < . 8 ﻣﺤﺎذاة اﻟﺨﻠﻴﺔ)ﺗﺎﺑﻊ( • valign ﺗﻌﻨﻲ اᆿﻤﺤﺎذاة اᆿﺮأﺳﻴﺔዔ ﻓﻲ اᆿﺨᇁﻴﺔ اﻷوﱃ أدﻧﺎه، ﺗﻢ ﺿﺒﻂ valign ﻋﲆ اﻷﺳﻔﻞ و ﻓﻲ اᆿﺜﺎﻧﻴﺔ valignᲗ᱾top᱾ . أﻋﲆ وﺳﻂ أﺳﻔﻞ •اﻟﻴﺴﺎر ﻫﻮ اﻹﻋﺪاد اﻻﻓﺘﺮاﺿﻲ ﻟﻠﻤﺤﺎذاة اﻷﻓﻘﻴﺔ، واﻟﻮﺳﻂ ﻟﻠﻤﺤﺎذاة اﻟﺮأﺳﻴﺔ. 9 رؤوس اﻟﺠﺪاول • > th <اᆿﻌﻼﻣﺔ ﺗﺤﺪد ﺧᇁﻴﺔ رأس ﻓﻲ ﺟﺪول HTML . ﺟﺪول HTML ﻳﺤﺘﻮي ﻋﲆ ﻧﻮﻋﻴﻦ ﻣﻦ اᆿﺨﻼﻳﺎ࿎ •ﺧﻼﻳﺎ اᆿﺮأس - ﺗﺤﺘﻮي ﻋﲆ ﻣﻌᇁﻮﻣﺎت اᆿﺮأس )ﺗﻢ إﻧﺸﺎؤﻫﺎ ﺑﺎﺳﺘﺨﺪام ﻋﻨﺼﺮ >th < (. •اᆿﺨﻼﻳﺎ اᆿﻘﻴﺎﺳﻴﺔ - ﺗﺤﺘﻮي ﻋﲆ ﺑﻴﺎﻧﺎت )ﺗﻢ إﻧﺸﺎؤﻫﺎ ﺑﺎﺳﺘﺨﺪام ﻋﻨﺼﺮ >td < (. •اᆿﻨﺺ ﻓﻲ ﻋﻨﺎﺻﺮ >th < ﻳﻜﻮن ﻋﺮﻳﻀًﺎ وﻣﺘﻤﺮﻛﺰًا اﻓﺘﺮاﺿﻴًﺎዔ •اᆿﻨﺺ ﻓﻲ ﻋﻨﺎﺻﺮ >td < ﻳﻜﻮن >ﺟﺪول< > th <اᆿﺸﻬﺮ>/th < > th <اᆿﻤﺪﺧﺮات>/th < > td <ﻳﻨﺎﻳﺮ>/td < > tdᲘ᲋ᲊᲊ دوﻻر>/td < ﻣﺤﺎذاة إﱃ اﻟﻴﺴﺎر ﺑﺸﻜﻞ اﻓﺘﺮاﺿﻲ. 10 ﻟﻮن اﻟﺨﻠﻔﻴﺔ •اᆿﺴﻤﺘﺎن اﻷﺻᇁﻴﺘﺎن اᆿﻤﺴﺘﺨﺪﻣﺘﺎن ﻹﻋﻄﺎء أᆿﻮان وﺻﻮر ﺧᇁﻔﻴﺔ ᆿﺠﺪاوᆿﻚ ﺳﺘﺒﺪو ﻣﺄᆿﻮﻓﺔ، ﺣﻴﺚ أﻧﻬﻤﺎ ﻧﻔﺲ اᆿﺴﻤﺘﻴﻦ اᆿﻤﺴﺘﺨﺪﻣﺘﻴﻦ ﻓﻲ اᆿﻌﻨﺼﺮ࿎ bgcolor و > td <اᆿﺨᇁﻴﺔ 1 > / td < > td <اᆿﺨᇁﻴﺔ 2 > / td <