قالب وردپرس قالب وردپرس آموزش وردپرس قالب فروشگاهی وردپرس وردپرس
خانه / اموزش / html/css / ساخت جدول در HTML بخش دوم

ساخت جدول در HTML بخش دوم

سلام به همه همراهان ایران وب

دیروز مطلبی در مورد ساخت جدول .بخش اولش را قرار دادیم امروز با بخش دوم این اموزش با شما هستیم امیدوارم رضایت داشته باشید. امروز راجب تگ th به بعد صحبت میکنیم

تگ < th > :

از اين تگ برای ايجاد يک سر عنوان ( Header ) در بالای ستون های يک جدول استفاده می شود . متنی که قرار است به عنوان سر عنوان قرار بگيرد ، در درون تگ باز و بسته < th > تعريف شده و معمولا به صورت درشت ( Bold ) توسط مرورگر نمايش داده می شود .
تگ سر عنوان بايد در اولين سطر جدول قرار گرفته و برای هر ستون به طور مجزا تعريف شوند .

مثال : جدول زير دارای ۲ ستون است که برای هر ستون آن يک سر عنوان ( Header ) مجزا تعريف شده است :

Example
< table width = “400px” border = “1” >
< tr >
< th >
Header 1
< /th >

< th >
Header 2
< /th >
< /tr >
< tr >
    < td >
ستون ۱
< /td >

< td >
ستون ۲
< /td >

< /tr >
< /table >
کد
Header 1 Header 2
ستون ۱ ستون ۲
خروجی

 

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

تگ های < thead > , < tbody > , < tfoot > :

اين تگ ها برای دسته بندی سطرهای يک جدول به کار می روند .
تگ < thead > برای ايجاد و دسته بندی سطر سر عنوان ( Header ) استفاده می شود . تگ < tbody > شامل محتويات و بدنه اصلی جدول شده و تگ < tfoot > هم برای عنوان انتهايی جدول مورد استفاده قرار می گيرد .
نکته : امروز به دليل پشتيبانی نامناسب مرورگرها و عدم کارائي از اين تگ ها کمتر استفاده می شود .
نکته ۲ : هر يک از تگ های فوق فقط در درون تگ < table > قابل استفاده بوده و حتما بايد دارای حداقل يک تگ < tr > باشند .
نکته ۳ : در هنگام استفاده از اين تگ ها ، بايد به ترتيب قرار گيری آنها در درون تگ < table > به شرح زير دقت کرد :

۱ . < thead >      ۲ . < tbody >      ۳ . < tfoot >

خصوصيات تگ های   thead , tbody , tfoot
نام خاصيت نوع خاصيت شرح
align left
right
center
Justify
Char
نحوه ترازبندی و قرار گيری محتويات درون خانه جدول را مشخص می کند که ۵ حالت دارد :
۱) left : چپ
۲) right : راست
۳) center : وسط
۴) Justify : در کل عرض شی گسترش داده می شود .
۵) Char : ترازبندی با توجه به يک کاراکتر خاص تعيين می شود .
char کاراکتر
Character
کاراکتری که قرار است متن دورن سطر حول آن تراز شود را تعيين می کند .
توجه : فقط در صورتی کاربرد دارد که خاصيت Align روی مقدار Char تنظيم شده باشد .
charoff Pixel
درصد %
میزان حاشيه ای که به کاراکتر اول متن اختصاص داده می شود ، تا متن درون سطر را تراز کند .
توجه : فقط در صورتی کاربرد دارد که خاصيت Align روی مقدار Char تنظيم شده باشد .
valign top
bottom
middle
baseline
نحوه ترازبندی عمودی محتويات درون خانه جدول را تعيين می کند .
– top : محتوِيات دورن خانه جدول از بالا تراز می شوند .
– bottom : محتوِيات دورن خانه جدول از وسط خانه جدول تراز می شوند .
– middle : محتوِيات دورن خانه جدول از پايين خانه جدول تراز می شوند .

مثال : در جدول زير سطرهای جدول به ۳ گروه مجزا تقسيم شده است .

Example
< table border=”1″ width = “400px” >
  < thead >
< tr >
< td >
This text is in the THEAD
< /td >
< /tr >
< /thead >

  < tbody >
< tr >
< td >
This text is in the TBODY
< /td >
< /tr >
< /tbody >

  < tfoot >
< tr >
< td >
This text is in the TFOOT
< /td >
< /tr >
< /tfoot >

< /table >
کد
This text is in the THEAD
This text is in the TBODY
This text is in the TFOOT
خروجی

تگ < Colgroup > , < Col > :

تگ < colgroup > برای دسته بندی گروهی از ستون های يک جدول ( تگ های td ) جهت قالب بندی و تعيين خصوصيات ، استفاده می شود . تگ < colgroup > ، فقط خصوصيات را نگهداری کرده و هيچگونه خروجی بر روی صفحه ندارد . به ازای هر ستونی که قرار است توسط اين تگ دسته بندی شود ، يک تگ < col > درون آن ايجاد می شود .
نکته : تگ < colgroup > فقط درون تگ < table > قابل استفاده است .

خصوصيات تگ colgroup
نام خاصيت نوع خاصيت شرح
align left
right
center
Justify
Char
نحوه ترازبندی و قرار گيری محتويات درون گروه خانه های جدول را مشخص می کند که ۵ حالت دارد :
۱) left : چپ
۲) right : راست
۳) center : وسط
۴) Justify : در کل عرض شی گسترش داده می شود .
۵) Char : ترازبندی با توجه به يک کاراکتر خاص تعيين می شود .
char کاراکتر
Character
کاراکتری که قرار است متن دورن گروه خانه های جدول حول آن تراز شود را تعيين می کند .
توجه : فقط در صورتی کاربرد دارد که خاصيت Align روی مقدار Char تنظيم شده باشد .
charoff Pixel
درصد %
میزان حاشيه ای که به کاراکتر اول متن اختصاص داده می شود ، تا متن درون سطر را تراز کند .
توجه : فقط در صورتی کاربرد دارد که خاصيت Align روی مقدار Char تنظيم شده باشد .
span Number
عدد
تعداد خانه هايی که قرار است اين تگ به وسيله تگ درونی col پوشش دهد را تعيين می کند .
valign top
bottom
middle
baseline
نحوه ترازبندی عمودی محتويات درون گروه خانه خانه های جدول را تعيين می کند .
– top : محتوِيات دورن خانه جدول از بالا تراز می شوند .
– bottom : محتوِيات دورن خانه جدول از وسط خانه جدول تراز می شوند .
– middle : محتوِيات دورن خانه جدول از پايين خانه جدول تراز می شوند .

مثال : اين مثال يک < colgroup > را که دارای ۳ ستون با پهناهاي متفاوت است ، نمايش می دهد . در قصمت اول ، توسط هر تگ < col > خاصيت پهنای ستون تعيين شده و در قسمت دوم آن خواص به ترتيب به خانه های جدول اعمال شده اند :
توجه : امروزه با امکانات ارائه توسط CSS از اين گونه تگ ها کمتر استفاده می شود .

Example
< table border=”1″ width = “300px” >
< colgroup span=”3″ >
    < col width=”50px” > < /col >
    < col width=”100px” > < /col >
    < col width=”150px” > < /col >
< /colgroup >
< tr >
    < td > خانه ۱ < /td >
    < td > خانه ۲ < /td >
    < td > خانه ۳ < /td >
< /tr >
< /table >
کد
خانه ۱ خانه ۲ خانه ۳
خروجی

امیدوارم خوشتون اومده باشه:)

 

 

مطلب پیشنهادی

شی Screen در جاوا اسکريپت – صفحه نمایش

شی Screen در جاوا اسکريپت - صفحه نمایشReviewed by سالار on Dec 4Rating: 5.0شی Screen …

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

 
در خبرنامه ما عضو شوید

در خبرنامه ما عضو شوید

در خبرنامه ما عضو شوید تا بهترین پست هفته مارو در ایمیل خودتون دریافت کنید :)

تبریک ! شما عضو خبرنامه ما شدید