جدول های 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
% درصد
ميزان پهنا و عرض جدول را تعيين می کند .

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

Example
< 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 برای پوشش عمودی خانه های جدول به کار می رود . به مثال های زير توجه کنيد :

Example
< 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 >
کد بدون خاصيت colspan
Cell 1
Cell 2 Cell 3 Cell 4
خروجی کد بدون خاصيت colspan
می بينيم بدون استفاده از خاصيت 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 >
کد با خاصيت colspan
Cell 1
Cell 2 Cell 3 Cell 4
خروجی کد با خاصيت colspan

- خاصيت rowspan :

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

Example
< 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>
کد بدون خاصيت rowspan
Cell 1 Cell2
Cell3
خروجی کد بدون خاصيت rowspan
می بينيم بدون استفاده از خاصيت 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>
کد با خاصيت rowspan
Cell 1 Cell 2
Cell 3
خروجی کد با خاصيت rowspan


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : فرزند بچه شما چه نسبتی با شما دارد ؟