ﻋﻨﻮﺍﻥ ﺍﻟﺪﺭﺱ " ﺍﻟﻤﺰﻳﺪ ﺣﻮﻝ ﺍﻟﺠﺪﺍﻭﻝ " ﻳﺒﺪﻭ ﻣﻤﻼً ﺑﻌﺾ ﺍﻟﺸﻲﺀ، ﻟﻜﻦ ﺃﻧﻈﺮ ﻟﻠﺠﺎﻧﺐ ﺍﻹﻳﺠﺎﺑﻲ، ﺇﺫﺍ ﺗﻤﻜﻨﺖ ﻣﻦ ﺇﺗﻘﺎﻥ ﺇﻧﺸﺎﺀ ﺍﻟﺠﺪﺍﻭﻝ ﻓﻠﻦ ﻳﻜﻮﻥ ﻫﻨﺎﻙ ﺃﻱ ﺷﻲﺀ ﻓﻲ HTML ﻟﻦ ﺗﺴﺘﻄﻴﻊ ﻣﻌﺮﻓﺘﻪ ﻭﺍﺳﺘﺨﺪﺍﻣﻪ .
ﻣﺎﺫﺍ ﺑﻘﻲ ﺇﺫﺍً؟
ﺧﺎﺻﻴﺘﺎﻥ ﻫﻤﺎ colspan ﻭ rowspan ﺗﺴﺘﺨﺪﻣﺎﻥ ﻹﻧﺸﺎﺀ ﺟﺪﺍﻭﻝ ﺭﺍﺋﻌﺔ ﻭﻣﺘﻘﻨﺔ .
Colspan ﻫﻲ ﺍﺧﺘﺼﺎﺭ " column span" ،
Colspan ﺗﺴﺘﺨﺪﻡ ﻓﻲ ﺍﻟﻮﺳﻢ <td> ﻟﺘﺤﺪﺩ ﻋﺪﺩ ﺍﻷﻋﻤﺪﺓ ﺍﻟﺘﻲ ﺳﺘﺘﻤﺪﺩ ﻟﻬﺎ ﺍﻟﺨﻠﻴﺔ :
ﻣﺜﺎﻝ :1
<table border="1">
<tr>
<td colspan="3">Cell 1</td>
</tr>
<tr>
<td> ﺧﻠﻴﺔ 2 </td>
<td> ﺧﻠﻴﺔ 3 </td>
<td> ﺧﻠﻴﺔ 4 </td>
</tr>
</table>
ﺳﻴﻈﻬﺮ ﺑﻬﺬﺍ ﺍﻟﺸﻜﻞ ﻓﻲ ﻣﺘﺼﻔﺤﻚ
ﺧﻠﻴﺔ 1
ﺧﻠﻴﺔ 2
ﺑﺘﺤﺪﻳﺪ colspan ﺑﺎﻟﻘﻴﻤﺔ "3" ﻗﺎﻣﺖ ﺍﻟﺨﻠﻴﺔ ﻓﻲ ﺍﻟﺼﻒ ﺍﻷﻭﻝ ﺑﺎﻟﺘﻤﺪﺩ ﻟﺜﻼﺛﺔ ﺃﻋﻤﺪﺓ، ﻭﻟﻮ ﻗﻤﻨﺎ ﺑﻮﺿﻊ "2" ﻟﻘﻴﻤﺔ
colspan ﺳﺘﺘﻤﺪﺩ ﻟﻌﻤﻮﺩﻳﻦ ﺍﺛﻨﻴﻦ، ﻭﺳﻴﺘﻌﻴﻦ ﻋﻠﻴﻨﺎ ﺇﺿﺎﻓﺔ ﺧﻠﻴﺔ ﺃﺧﺮﻯ ﻟﻠﺼﻒ ﺍﻷﻭﻝ ﺣﺘﻰ ﺗﺼﺒﺢ ﺍﻷﻋﻤﺪﺓ ﻣﺘﺴﺎﻭﻳﺔ
ﻣﺜﺎﻝ :2
<table border="1">
<tr>
<td colspan="2"> ﺧﻠﻴﺔ 1 </td>
<td> ﺧﻠﻴﺔ 2 </td>
</tr>
<tr>
<td> ﺧﻠﻴﺔ 3 </td>
<td> ﺧﻠﻴﺔ 4 </td>
<td> ﺧﻠﻴﺔ 5 </td>
</tr>
</table>
ﺳﻴﻈﻬﺮ ﺑﻬﺬﺍ ﺍﻟﺸﻜﻞ ﻓﻲ ﻣﺘﺼﻔﺤﻚ
ﺧﻠﻴﺔ 1
ﺧﻠﻴﺔ 3
ﻣﺎ ﻫﻲ ﺧﺎﺻﻴﺔ rowspan ؟
ﻛﻤﺎ ﺭﺑﻤﺎ ﺧﻤﻨﺖ، rowspan ﺗﺤﺪﺩ ﻋﺪﺩ ﺍﻟﺼﻔﻮﻑ ﺍﻟﺘﻲ ﺳﺘﻘﻮﻡ ﺍﻟﺨﻠﻴﺔ ﺑﺎﻟﺘﻤﺪﺩ ﻓﻮﻗﻬﺎ :
ﻣﺜﺎﻝ :3
<table border="1">
<tr>
<td rowspan="3"> ﺧﻠﻴﺔ 1 </td>
<td> ﺧﻠﻴﺔ 2 </td>
</tr>
<tr>
<td> ﺧﻠﻴﺔ 3 </td>
</tr>
<tr>
<td> ﺧﻠﻴﺔ 4 </td>
</tr>
</table>
ﺳﻴﻈﻬﺮ ﺑﻬﺬﺍ ﺍﻟﺸﻜﻞ ﻓﻲ ﻣﺘﺼﻔﺤﻚ
ﺧﻠﻴﺔ 1
ﻓﻲ ﺍﻟﻤﺜﺎﻝ ﺃﻋﻼﻩ ﺃﻋﻄﻴﻨﺎ ﺍﻟﺨﺎﺻﻴﺔ rowspan ﺍﻟﻘﻴﻤﺔ "3" ﻟﻠﺨﻠﻴﺔ 1 ، ﻫﺬﺍ ﻳﻌﻨﻲ ﺃﻥ ﺍﻟﺨﻠﻴﺔ ﻳﺠﺐ ﺃﻥ ﺗﺘﻤﺪﺩ ﻓﻮﻕ ﺛﻼﺙ ﺻﻔﻮﻑ، ﺍﻟﺼﻒ ﺍﻟﺬﻱ ﺗﻘﻊ ﻓﻴﻪ ﺍﻟﺨﻠﻴﺔ ﻣﻊ ﺻﻔﻴﻦ ﺁﺧﺮﻳﻦ ﺃﺳﻔﻠﻬﺎ، ﺍﻟﺨﻠﻴﺔ 1 ﻭﺍﻟﺨﻠﻴﺔ 2 ﺍﻟﺘﺎﻥ ﺗﻘﻌﺎﻥ ﻓﻲ ﻧﻔﺲ ﺍﻟﺼﻒ، ﺑﻴﻨﻤﺎ ﺍﻟﺨﻠﻴﺔ 3 ﻭﺍﻟﺨﻠﻴﺔ ﺃﺭﺑﻊ ﺗﺸﻜﻼﻥ ﺻﻔﻴﻦ ﻣﻨﻔﺼﻠﻴﻦ .
ﻫﻞ ﺗﺸﻌﺮ ﺑﺎﻟﺤﻴﺮﺓ؟ ﺣﺴﻨﺎً، ﺍﻷﻣﺮ ﻟﻴﺲ ﻣﻌﻘﺪﺍً ﻟﻜﻦ ﻣﻦ ﺍﻟﺴﻬﻞ ﺃﻥ ﺗﻀﻴﻊ ﻓﻲ ﺍﻟﺘﻔﺎﺻﻴﻞ ﻓﻲ ﺑﻌﺾ ﺍﻷﺣﻴﺎﻥ، ﻟﺬﻟﻚ ﻣﻦ ﺍﻷﻓﻀﻞ ﺃﻥ ﺗﺮﺳﻢ ﺍﻟﺠﺪﻭﻝ ﺃﻭﻻً ﻋﻠﻰ ﺍﻟﻮﺭﻕ ﻗﺒﻞ ﺃﻥ ﺗﻄﺒﻘﻪ ﻋﻠﻰ .HTML
ﺭﺑﻤﺎ ﻻ ﺗﺸﻌﺮ ﺑﺎﻟﺤﻴﺮﺓ، ﺇﺫﺍ ﻗﻢ ﺑﺈﻧﺸﺎﺀ ﺟﺪﻭﻟﻴﻦ ﻭﺍﺳﺘﺨﺪﺍﻡ ﻛﻞ ﻣﻦ colspan ﻭ rowspan ﺑﻨﻔﺴﻚ .
