آموزش HTML - جدول های HTML

جدول های HTML

تگ < Td > :

از تگ < td > برای ايجاد يک خانه جدول درون يک سطر ( تگ tr ) استفاده می شود . هر خانه جدول می تواند خصوصيات منحصر به فرد و ويژه خود را داشته باشد .
نکته : تگ < td > فقط بايد درون تگ < tr > استفاده شود .

خصوصيات تگ Td
نام خاصيت	نوع خاصيت	شرح
abbr	متن Text	با استفاده از اين خاصيت می توان يک عبارت خلاصه شده در مورد محتويات خانه جدول تعيين کرد .
align	left right center Justify Char	نحوه ترازبندی و قرار گيری محتويات درون خانه جدول را مشخص می کند که 5 حالت دارد : 1) left : چپ 2) right : راست 3) center : وسط 4) Justify : در کل عرض شی گسترش داده می شود . 5) Char : ترازبندی با توجه به يک کاراکتر خاص تعيين می شود .
axis	نام Text	يک نام را برای خانه جدول تعيين می کند .
bgcolor	نام رنگ color name	رنگ پس زمينه خانه جدول را تعيين می کند .
char	کاراکتر Character	کاراکتری که قرار است متن دورن خانه جدول حول آن تراز شود را تعيين می کند . توجه : فقط در صورتی کاربرد دارد که خاصيت Align روی مقدار Char تنظيم شده باشد .
charoff	Pixel درصد %	میزان حاشيه ای که به کاراکتر اول متن اختصاص داده می شود ، تا متن درون خانه جدول را تراز کند . توجه : فقط در صورتی کاربرد دارد که خاصيت Align روی مقدار Char تنظيم شده باشد .
colspan	عدد Number	تعداد خانه های که اين خانه جدول آنها را پوشش می دهد را تعيين می کند . برای درک بهتر به مثال پايين صفحه توجه کنيد .^*
height	pixel	میزان ارتفاع خانه جدول را تعيين می کند . اين خاصيت قديمی شده و به جای آن از CSS استفاده می شود .
nowrap	nowrap	تعيين می کند که اگر پهنای خانه جدول از پهنای متن درون آن کمتر بود ، خطوط متن شکسته شده و برای هم اندازه شدن با پهنای خانه جدول به بخش های کوچکتر تقسيم شوند يا خير . اين خاصيت قديمی شده و به جای آن از CSS استفاده می شود .
rowspan	عدد Number	تعداد سطرهايی که اين خانه جدول آنها را پوشش می دهد را تعيين می کند . برای درک بهتر به مثال پايين صفحه توجه کنيد .^*
scope	Col Colgroup Row Rowgroup	مشخص می کند که اين خانه جدول اطلاعاتی را راجع به بقيه سطری که آن را در برگرفته ( Row ) ، يا بقيه ستونی که اين خانه جز آن است ( Col ) ، يا گروه سطرهايی که آن خانه را در بر گرفته اند ( Rowgroup ) و يا گروه ستون هايی که اين خانه جزء آن است ( Colgroup ) شامل می شود .
valign	top bottom middle baseline	نحوه ترازبندی عمودی محتويات درون خانه جدول را تعيين می کند . - top : محتوِيات دورن خانه جدول از بالا تراز می شوند . - bottom : محتوِيات دورن خانه جدول از وسط خانه جدول تراز می شوند . - middle : محتوِيات دورن خانه جدول از پايين خانه جدول تراز می شوند .
width	pixel % درصد	ميزان پهنا و عرض جدول را تعيين می کند .

در مثال های زير برخی از خصوصيات مهم و پر کاربرد معرفی شده جدول بالا را در عمل نشان می دهيم :

< table width = "500px" border = "1" >
  < tr >
    < td width = "200px" align = "left" height = "100px" valign = "top" bgcolor = "blue" >
      Cell 1
    < /td >
    < td width = "300px" align = "center" valign = "bottom" bgcolor = "green" >
      Cell 2
    < /td >
  < /tr >
< /table >

Cell 1

Cell 2

- خاصيت colspan و rowspan :

قبلا اشاره کرديم که خانه های جدول مرتب هستند و دارای ساختار مرتبط به هم . برای مثال نمی توان در يک سطر جدول 1 خانه و در سطر پايينی 3 خانه داشت . در چنين شرايطی از خاصيت colspan در سطر با خانه کمتر استفاده می کنيم تا سطری که خانه کمتر دارد ، سطر با خانه بيشتر را پوشش دهد . خاصيت colspan برای پوشش افقی خانه ها و خاصيت rowspan برای پوشش عمودی خانه های جدول به کار می رود . به مثال های زير توجه کنيد :

< table width = "450px" border = "1" >
  < tr >
    < td width = "450px" >
      Cell 1
    < /td >
  < /tr >
  < tr >
    < td width = "150px" >
      Cell 2
    < /td >
    < td width = "150px" >
      Cell 3
    < /td >
    < td width = "150px" >
      Cell 4
    < /td >
  < /tr >
< /table >

Cell 1
Cell 2	Cell 3	Cell 4

می بينيم بدون استفاده از خاصيت colspan در سطر با خانه کمتر ، عملا جدول به هم ريخته بوده و خروجی درستی ندارد . در قسمت زير با اضافه کردن خاصيت colspan به خروجی درست می رسيم .

< table width = "450px" border = "1" >
  < tr >
    < td width = "450px" colspn = "3" >
      Cell 1
    < /td >
  < /tr >
  < tr >
    < td width = "150px" >
      Cell 2
    < /td >
    < td width = "150px" >
      Cell 3
    < /td >
    < td width = "150px" >
      Cell 4
    < /td >
  < /tr >
< /table >

Cell 1
Cell 2	Cell 3	Cell 4

- خاصيت rowspan :

مثال : حالت فوق را درباره 2 ستون با تعداد سطرهای متفاوت نشان می دهيم :

< table width="450px" border="1" >
  < tr >
    < td width="450px" >
      Cell 1
    < /td >
    < td width="150px" >
      Cell 2
    < /td >
  < /tr >
  < tr >
    < td width="150px" >>
      Cell 3
    < /td >
  < /tr >
</table>

Cell 1	Cell2
Cell3

می بينيم بدون استفاده از خاصيت rowspan در سطر با خانه کمتر ، عملا جدول به هم ريخته بوده و خروجی درستی ندارد . در قسمت زير با اضافه کردن خاصيت rowspan به خروجی درست می رسيم .

< table width="450px" border="1" >
  < tr >
    < td width="450px" rowspan="2" >
      Cell 1
    < /td >
    < td width="150px" >
      Cell 2
    < /td >
  < /tr >
  < tr >
    < td width="150px" >>
      Cell 3
    < /td >
  < /tr >
</table>

Cell 1	Cell 2
	Cell 3