ﺍﻟﺪﺭﺱ ﺍﻟﻌﺎﺷﺮ : ﺍﻟﺠﺪﺍﻭﻝ

ﺍﻟﺠﺪﺍﻭﻝ ﺗﺴﺘﺨﺪﻡ ﻟﻌﺮﺽ ﺑﻴﺎﻧﺎﺕ ﻣﺠﺪﻭﻟﺔ ﻣﺜﻞ ﺍﻟﻤﻌﻠﻮﻣﺎﺕ ﺍﻟﺘﻲ ﺗﻌﺮﺽ ﺑﺸﻜﻞ ﻣﻨﻄﻘﻲ ﻣﻦ ﺧﻼﻝ ﺃﻋﻤﺪﺓ ﻭﺻﻔﻮﻑ .
ﻫﻞ ﻫﻲ ﺻﻌﺒﺔ؟
ﺇﻧﺸﺎﺀ ﺍﻟﺠﺪﺍﻭﻝ ﻓﻲ HTML ﻗﺪ ﻳﻜﻮﻥ ﻓﻲ ﺍﻟﺒﺪﺍﻳﺔ ﻣﻌﻘﺪﺍً، ﻟﻜﻦ ﺇﺫﺍ ﺑﻘﻴﺖ ﻫﺎﺩﺋﺎً ﻭﺭﺍﻗﺒﺖ ﻣﺎ ﺗﻘﻮﻡ ﺑﻪ ﺟﻴﺪﺍً ﺳﺘﺮﻯ ﺃﻥ ﺍﻟﺠﺪﺍﻭﻝ ﺑﺴﻴﻄﺔ ﻭﻣﻨﻄﻘﻴﺔ، ﺗﻤﺎﻣﺎً ﻛﻤﺎ ﻫﻮ ﻛﻞ ﺷﻲﺀ ﻓﻲ .HTML
ﻣﺜﺎﻝ :1
<table>
<tr>
<td> ﺧﻠﻴﺔ 1 </td>
<td> ﺧﻠﻴﺔ 2 </td>
</tr>
<tr>
<td> ﺧﻠﻴﺔ 3 </td>
<td> ﺧﻠﻴﺔ 4 </td>
</tr>
</table>
ﺳﻴﻈﻬﺮ ﺑﻬﺬﺍ ﺍﻟﺸﻜﻞ ﻓﻲ ﻣﺘﺼﻔﺤﻚ
ﺧﻠﻴﺔ 1
ﺧﻠﻴﺔ 3
ﻣﺎ ﺍﻟﻔﺮﻕ ﺑﻴﻦ <tr> ﻭ <td> ؟
ﻛﻤﺎ ﺗﺮﻯ ﻓﻲ ﺍﻟﻤﺜﺎﻝ ﺃﻋﻼﻩ، ﻫﺬﺍ ﻫﻮ ﺃﻛﺜﺮ ﺃﻣﺜﻠﺔ HTML ﺗﻌﻘﻴﺪﺍً ﻗﻤﻨﺎ ﺑﻌﺮﺿﻪ ﻓﻲ ﻫﺬﺍ ﺍﻟﺪﺭﺱ ﺣﺘﻰ ﺍﻵﻥ، ﻟﻨﻘﻢ ﺑﺘﻔﻜﻴﻚ ﺍﻟﻤﺜﺎﻝ ﻭﺷﺮﺡ ﻛﻞ ﻭﺳﻢ :
ﻫﻨﺎﻙ ﺛﻼﺙ ﻋﻨﺎﺻﺮ ﺗﺴﺘﺨﺪﻡ ﻹﻧﺸﺎﺀ ﺃﻱ ﺟﺪﻭﻝ :
ﻭﺳﻢ ﺍﻟﺒﺪﺍﻳﺔ <table> ﻭﻭﺳﻢ ﺍﻹﻏﻼﻕ </table> ﻳﺒﺪﺃ ﻣﻦ ﺑﻴﻨﻬﻤﺎ ﺍﻟﺠﺪﻭﻝ ﻭﻳﻨﺘﻬﻲ، ﻣﻨﻄﻘﻲ .
<tr> ﺗﻌﻨﻲ " table r ow " ﻭﻫﻲ ﺍﻟﻌﻨﺼﺮ ﺍﻟﺬﻱ ﺗﺒﺪﺃ ﻣﻦ ﺧﻼﻟﻪ ﺍﻟﺼﻔﻮﻑ ﻭﺗﻨﺘﻬﻲ، ﻻ ﺯﺍﻝ ﺍﻷﻣﺮ ﻣﻨﻄﻘﻴﺎً .
<td> ﻫﻲ ﺍﺧﺘﺼﺎﺭ " t able d ata ." ﻫﺬﺍ ﺍﻟﻮﺳﻢ ﻳﺒﺪﺃ ﻭﻳﻨﻬﻲ ﻛﻞ ﺧﻠﻴﺔ ﻓﻲ ﺻﻔﻮﻑ ﺍﻟﺠﺪﻭﻝ، ﻛﻞ ﻫﺬﺍ ﺑﺴﻴﻂ ﻭﻣﻨﻄﻘﻲ .
ﻫﺬﺍ ﻣﺎ ﻳﺤﺪﺙ ﻓﻲ ﺍﻟﻤﺜﺎﻝ ﺍﻷﻭﻝ، ﺍﻟﺠﺪﻭﻝ ﻳﺒﺪﺃ ﺑﻮﺳﻢ
<table> ، ﻳﺘﺒﻌﻪ ﻭﺳﻢ <tr> ﺍﻟﺬﻱ ﻳﺪﻝ ﻋﻠﻰ ﺑﺪﺍﻳﺔ ﺻﻒ ﺟﺪﻳﺪ، ﻭﻫﻨﺎﻙ ﺧﻠﻴﺘﺎﻥ ﻓﻲ ﻫﺬﺍ ﺍﻟﺴﻄﺮ : <td> ﺧﻠﻴﺔ 1 </td> ﻭ <td> ﺧﻠﻴﺔ 2</td> ، ﺛﻢ ﻧﻐﻠﻖ ﺍﻟﺼﻒ ﺑﻮﺳﻢ ﺍﻹﻏﻼﻕ </tr> ﻭﻧﺒﺪﺃ ﺁﺧﺮ <tr> ﺍﻟﺬﻱ ﻳﺤﻮﻱ ﺃﻳﻀﺎً ﺧﻠﻴﺘﻴﻦ، ﺛﻢ ﻧﻐﻠﻖ ﺍﻟﺠﺪﻭﻝ </table> .
ﻓﻘﻂ ﻟﻨﻮﺿﺢ ﺍﻷﻣﺮ ﺃﻛﺜﺮ : ﺍﻟﺼﻔﻮﻑ ﺗﻈﻬﺮ ﺑﺸﻜﻞ ﺧﻂ ﺃﻓﻘﻲ ﻣﻦ ﺍﻟﺨﻼﻳﺎ، ﻭﺍﻷﻋﻤﺪﺓ ﻋﻠﻰ ﺷﻜﻞ ﺧﻂ ﺭﺃﺳﻲ ﻣﻦ ﺍﻟﺨﻼﻳﺎ :
ﺧﻠﻴﺔ 1
ﺧﻠﻴﺔ 3
ﺧﻠﻴﺔ 1 ﻭ ﺧﻠﻴﺔ 2 ﺗﺸﻜﻼﻥ ﺻﻔﺎً، ﺧﻠﻴﺔ 1 ﻭﺧﻠﻴﺔ 3 ﺗﺸﻜﻼﻥ ﻋﻤﻮﺩﺍً
ﻓﻲ ﺍﻟﻤﺜﺎﻝ ﺃﻋﻼﻩ ﺍﻟﺤﺪﻭﻝ ﻳﺤﻮﻱ ﺻﻔﻴﻦ ﻭﻋﻤﻮﺩﻳﻦ، ﻭﻳﻤﻜﻦ ﻟﻠﺠﺪﻭﻝ ﺃﻥ ﻳﺤﻮﻱ ﻋﺪﺩﺍً ﻻ ﻧﻬﺎﺋﻴﺎً ﻣﻦ ﺍﻟﺼﻔﻮﻑ ﻭﺍﻷﻋﻤﺪﺓ .
ﻣﺜﺎﻝ :2
<table>
<tr>
<td> ﺧﻠﻴﺔ 1 </td>
<td> ﺧﻠﻴﺔ 2 </td>
<td> ﺧﻠﻴﺔ 3 </td>
<td> ﺧﻠﻴﺔ 4 </td>
</tr>
<tr>
<td> ﺧﻠﻴﺔ 5 </td>
<td> ﺧﻠﻴﺔ 6 </td>
<td> ﺧﻠﻴﺔ 7 </td>
<td> ﺧﻠﻴﺔ 8 </td>
</tr>
<tr>
<td> ﺧﻠﻴﺔ 9 </td>
<td> ﺧﻠﻴﺔ 10 </td>
<td> ﺧﻠﻴﺔ 11 </td>
<td> ﺧﻠﻴﺔ 12 </td>
</tr>
</table>
ﺳﻴﻈﻬﺮ ﺑﻬﺬﺍ ﺍﻟﺸﻜﻞ ﻓﻲ ﻣﺘﺼﻔﺤﻚ
ﺧﻠﻴﺔ 1 ﺧﻠﻴﺔ 2
ﺧﻠﻴﺔ 5 ﺧﻠﻴﺔ 6
ﺧﻠﻴﺔ 9 ﺧﻠﻴﺔ 10
ﻫﻞ ﻫﻨﺎﻙ ﺃﻳﺔ ﺧﺼﺎﺋﺺ ﻟﻠﺠﺪﺍﻭﻝ؟
ﺑﺎﻟﻄﺒﻊ ﻫﻨﺎﻙ ﺧﺼﺎﺋﺺ ﻟﻠﺠﺪﺍﻭﻝ، ﻫﻨﺎﻙ ﻣﺜﻼً ﺧﺎﺻﻴﺔ ﺍﻹﻃﺎﺭ ﺍﻟﺘﻲ ﺗﺴﺘﺨﺪﻡ ﻟﺘﺤﺪﻳﺪ ﺳﻤﻚ ﺍﻹﻃﺎﺭ ﺣﻮﻝ ﺍﻟﺠﺪﻭﻝ :
ﻣﺜﺎﻝ :3
<table border="1">
<tr>
<td> ﺧﻠﻴﺔ 1 </td>
<td> ﺧﻠﻴﺔ 2 </td>
</tr>
<tr>
<td> ﺧﻠﻴﺔ 3 </td>
<td> ﺧﻠﻴﺔ 4 </td>
</tr>
</table>
ﺳﻴﻈﻬﺮ ﺑﻬﺬﺍ ﺍﻟﺸﻜﻞ ﻓﻲ ﻣﺘﺼﻔﺤﻚ
ﺧﻠﻴﺔ 1
ﺧﻠﻴﺔ 3
ﺳﻤﻚ ﺇﻃﺎﺭ ﺍﻟﺠﺪﻭﻝ ﻳﺤﺪﺩ ﺑﻤﻘﻴﺎﺱ ﺍﻟﺒﻜﺴﻞ ‏( ﺍﻧﻈﺮ ﺍﻟﺪﺭﺱ ﺍﻟﺘﺎﺳﻊ ‏)
ﻭﻛﻤﺎ ﻫﻮ ﺍﻟﺤﺎﻝ ﻣﻊ ﺍﻟﺼﻮﺭ، ﻳﻤﻜﻨﻚ ﺃﻥ ﺗﺤﺪﺩ ﻋﺮﺽ ﺍﻟﺠﺪﻭﻝ ﺑﺎﻟﻜﺒﺴﻞ ﺃﻭ ﺑﺎﻟﻨﺴﺒﺔ ﺍﻟﻤﺆﻳﺔ ﻟﻤﻘﻴﺎﺱ ﺍﻟﺸﺎﺷﺔ :
ﻣﺜﺎﻝ :4
<table border="1" width="30%">
ﻫﺬﺍ ﺍﻟﻤﺜﺎﻝ ﺳﻴﻌﺮﺽ ﻓﻲ ﺍﻟﻤﺘﺼﻔﺢ ﺟﺪﻭﻻً ﺑﻌﺮﺽ %30 ﻣﻦ ﻣﻘﻴﺎﺱ ﺍﻟﺸﺎﺷﺔ، ﺟﺮﺏ ﺫﻟﻚ ﺑﻨﻔﺴﻚ .
ﺍﻟﻤﺰﻳﺪ ﻣﻦ ﺍﻟﺨﺼﺎﺋﺺ
ﻫﻨﺎﻙ ﺧﺼﺎﺋﺺ ﻛﺜﻴﺮﺓ ﻟﻠﺠﺪﺍﻭﻝ، ﻫﺬﺍﻥ ﺍﺛﻨﺎﻥ ﻣﻨﻬﺎ :
:align ﻳﺤﺪﺩ ﺍﻟﻤﺤﺎﺫﺍﺓ ﻟﻤﺤﺘﻮﻳﺎﺕ ﺍﻟﺠﺪﻭﻝ، ﺃﻭ ﺍﻟﺼﻒ ﺃﻭ ﻓﻲ ﺍﻟﺨﻠﻴﺔ، ﻓﻤﺜﻼً ﻳﻤﻜﻦ ﻣﺤﺎﺫﺍﺓ ﺍﻟﻨﺺ ﺇﻟﻰ ﺍﻟﻴﻤﻴﻦ ﺃﻭ ﺍﻟﻴﺴﺎﺭ ﺃﻭ ﻓﻲ ﺍﻟﻤﻨﺘﺼﻒ .
ﻳﺤﺪﺩ ﺍﻟﻤﺤﺎﺫﺍﺓ ﺍﻟﺮﺃﺳﻴﺔ ﻟﻤﺤﺘﻮﻳﺎﺕ ﺍﻟﺨﻠﻴﺔ، ﻓﻴﻤﻜﻦ ﻣﺤﺎﺫﺍﺓ ﺍﻟﻨﺺ ﻓﻲ ﺍﻷﻋﻠﻰ ﺃﻭ ﺍﻷﺳﻔﻞ ﺃﻭ ﺍﻟﻤﻨﺘﺼﻒ .
ﻣﺜﺎﻝ :5
<td align="right" valign="top">Cell 1</td>
ﻣﺎﺫﺍ ﻳﻤﻜﻦ ﺃﻥ ﺃﺿﻊ ﻓﻲ ﺍﻟﺠﺪﺍﻭﻝ؟
ﻧﻈﺮﻳﺎً ﻳﻤﻜﻦ ﺃﻥ ﺗﻀﻊ ﺃﻱ ﺷﻲﺀ ﻓﻲ ﺍﻟﺠﺪﺍﻭﻝ، ﺍﻟﻨﺼﻮﺹ ﻭﺍﻟﺼﻮﺭ ﻭﺍﻟﺮﻭﺍﺑﻂ، ﻟﻜﻦ ﺍﻟﺠﺪﺍﻭﻝ ﻣﺨﺼﺼﺔ ﻟﻌﺮﺽ ﺍﻟﺒﻴﺎﻧﺎﺕ ﻣﺠﺪﻭﻟﺔ، ، ﻟﺬﻟﻚ ﻻ ﺗﺴﺘﺨﺪﻣﻬﺎ ﻟﻮﺿﻊ ﺃﻱ ﺷﻲﺀ ﻷﻧﻚ ﺗﺮﻳﺪ ﺑﺒﺴﺎﻃﺔ ﺃﻥ ﺗﺠﻌﻞ ﺍﻷﺷﻴﺎﺀ ﺗﻈﻬﺮ ﺑﺠﺎﻧﺐ ﺑﻌﻀﻬﺎ ﺍﻟﺒﻌﺾ، .
ﻗﺒﻞ ﺳﻨﻮﺍﺕ ﻣﻌﺪﻭﺩﺓ ﻛﺎﻧﺖ ﺍﻟﺠﺪﺍﻭﻝ ﺗﺴﺘﺨﺪﻡ ﻏﺎﻟﺒﺎً ﻛﺄﺩﺍﺓ ﻟﻠﺘﺼﻤﻴﻢ، ﻟﻜﻦ ﺇﺫﺍ ﺃﺭﺩﺕ ﺃﻥ ﺗﺘﺤﻜﻢ ﺑﻄﺮﻳﻘﺔ ﻋﺮﺽ ﺍﻟﻨﺼﻮﺹ ﻭﺍﻟﺠﺪﺍﻭﻝ ﻫﻨﺎﻙ ﻃﺮﻳﻘﺔ ﺃﻓﻀﻞ ﺑﻜﺜﻴﺮ ‏( ﺗﻠﻤﻴﺢ : CSS ‏) ﻟﻜﻦ ﻫﺬﺍ ﺳﻨﻨﺎﻗﺸﻪ ﻻﺣﻘﺎً .
ﺍﻵﻥ ﻗﻢ ﺑﺘﻄﺒﻴﻖ ﻣﺎ ﺗﻌﻠﻤﺘﻪ ﻭﺻﻤﻢ ﻋﺪﺩﺍً ﻣﻦ ﺍﻟﺠﺪﺍﻭﻝ ﺑﻤﺨﺘﻠﻒ ﺍﻟﻘﻴﺎﺳﺎﺕ ﻭﻣﺨﺘﻠﻒ ﺍﻟﺨﺼﺎﺋﺺ ﻭﺍﻟﻤﺤﺘﻮﻳﺎﺕ، ﻫﺬﺍ ﻳﻤﻜﻦ ﺃﻥ ﻳﺒﻘﻴﻚ ﻣﺸﻐﻮﻻً ﻟﺴﺎﻋﺎﺕ .