آموزش گام به گام HTML : قسمت پنجم

يک خانه اطلاعاتی متواند شامل متن، تصوير، فهرست، پاراگراف، فرم، جدول و يا هر چيز ديگری باشد. دو مثال زير طريقه استفاده از برچسبهای گفته شده را نشان می دهد...
شنبه، 1 اسفند 1388
تخمین زمان مطالعه:
موارد بیشتر برای شما
آموزش گام به گام   HTML : قسمت پنجم
آموزش گام به گام  HTML (5)
آموزش گام به گام HTML : قسمت پنجم






جدول ها در HTML

جدول ها در HTML توسط برچسب <table> ايجاد می شوند. يک جدول توسط برچسب <tr> به سطرها تقسيم می شود و هر سطر توسط برچسب <td> به خانه های اطلاعاتی تقسيم می شود. يک خانه اطلاعاتی متواند شامل متن، تصوير، فهرست، پاراگراف، فرم، جدول و يا هر چيز ديگری باشد. دو مثال زير طريقه استفاده از برچسبهای گفته شده را نشان می دهد.
* مثال زيريک جدول حاشيه دارمی باشد که ضخامت حاشيه توسط مشخصه border=:"1” تعيين شده است.

آموزش گام به گام   HTML : قسمت پنجم

* در مثال زير يک جدول بدون حاشيه نشان داده شده است.

آموزش گام به گام   HTML : قسمت پنجم

مشخصه border

اگر شما مشخصه border را تعيين نکنيد جدول شما حاشيه نخواهد داشت. گاهی اوقات جدول بدون حاشيه برای طرحبندی صفحه مفيد است ولی اغلب اوقات می خواهيد که جدولتان حاشيه داشته باشد. برای نمايش جدولی با حاشيه بايد از مشخصه border استفاده کنيد؛ همانند جدول مثال قبل. عنوانها در جدول عناوين ستونها در يک جدول توسط بر چسب <th> مشخص می شوند. به مثال زير توجه کنيد.

آموزش گام به گام   HTML : قسمت پنجم

توسط برچسب <caption> می توانيد عنوانی برای جدول خود در نظر بگيريد. به مثال زير توجه کنيد.

آموزش گام به گام   HTML : قسمت پنجم

خانه های خالی در جدول

گاهی اوقات ما نياز پيدا می کنيم که بعضی از خانه های جدول خالی باشند. اگر جدول ما دارای حاشيه باشد و در خانه مورد نظر چيزی ننويسيم (<td></td>) در اين صورت جدول ما به صورت زير ديده می شود.
برای جلوگيری از بهم خوردن حاشيه بايد حرف نهادی &nbsp; را بکار ببريم يعنی از <td>&nbsp;</td> به جای <td></td> استفاده کنيم در اين صورت جدول به صورت زير خواهد بود.

مشخصه colspan

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

آموزش گام به گام   HTML : قسمت پنجم

مشخصه rowspan

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

آموزش گام به گام   HTML : قسمت پنجم

مشخصه cellpadding

از اين مشخصه برای ساختن فضای خالی بيشتر بين محتويات هر خانه و حاشيه آن استفاده می شود. به مثال زير توجه کنيد.

آموزش گام به گام   HTML : قسمت پنجم

مشخصه cellspacing

از اين مشخصه برای ساختن فضای خالی بيشتر بين خانه ها استفاده می شود. به مثال زير توجه کنيد.

آموزش گام به گام   HTML : قسمت پنجم

چند مشخصه ديگر در مورد جداول

*توسط مشخصه bgcolor می توانيد رنگ زمينه جدول يا خانه های آن را تعيين کنيد.

آموزش گام به گام   HTML : قسمت پنجم

*مشخصه width عرض جدول يا يک خانه را تعيين می کند و مشخصه height ارتفاع جدول يا يک خانه را تعيين می کند. و مقدار اين دو مشخصه معمولا بر حسب pixel می باشد.
*توسط مشخصه background می توانيد تصويری در پس زمينه جدول يا خانه ها قرار دهيد.

آموزش گام به گام   HTML : قسمت پنجم

*از مشخصه align برای مرتب کردن محتويات خانه های يک جدول در جهت افقی استفاده می شود که مثلا در سمت راست يا وسط ويا سمت چپ خانه قرار بگيرند ويا اينکه اگر محتويات خانه متن است، متن به صورت justify مرتب شود؛ و از مشخصه valign برای مرتب کردن محتويات خانه های يک جدول در جهت عمودی استفاده می شود.
<td align="left/center/right/justify">Make-Up</td>
<td valign="top/middle/bottom">Make-Up</td>
*مشخصه ديگری که در جدولها کاربرد دارد مشخصه frame است که دارای انواع border،box،void،above،below،hsides،vsides،lhs،rhs می باشد. سه مثال زير کاربرد اين مشخصه را نشان می دهد.

آموزش گام به گام   HTML : قسمت پنجم

آموزش گام به گام   HTML : قسمت پنجم

آموزش گام به گام   HTML : قسمت پنجم

نکته
يکی از نکات مهم در زيبايی صفحهHTMLشمااستفاده از طرح بندی (layout) مناسب است. يکی از معمولترين راهها در ايجادطرحبندی دلخواه استفاده از جداول می باشد. و برای اينکار معمولا از جداول بدون حاشيه استفادهمی کنند. به عنوان مثال متن اين نکته به شيوه روزنامه ای و توسط يک جدول بی حاشيه ودارای سه ستون ايجاد شده است.
ادامه دارد ......
* ارسال مقاله توسط عضو محترم سایت با نام کاربری : davidfattahi
/خ


تبلیغات در راسخون
نظرات کاربران
ارسال نظر
با تشکر، نظر شما پس از بررسی و تایید در سایت قرار خواهد گرفت.
متاسفانه در برقراری ارتباط خطایی رخ داده. لطفاً دوباره تلاش کنید.
موارد بیشتر برای شما
فیلد مارشال چیست و معادل چه درجه ای است؟
فیلد مارشال چیست و معادل چه درجه ای است؟
10 تا کاری که باعث می شود هیچ وقت دچار فراموشی نشوید
10 تا کاری که باعث می شود هیچ وقت دچار فراموشی نشوید
چطور از سنگ کلیه پیشگیری کنیم؟
چطور از سنگ کلیه پیشگیری کنیم؟
حضرت فاطمه (سلام الله علیها) و شکوه قیامت؛ از شکایت تا شفاعت
حضرت فاطمه (سلام الله علیها) و شکوه قیامت؛ از شکایت تا شفاعت
آموزش ثبت درخواست بررسی مجدد دریافت کالابرگ
play_arrow
آموزش ثبت درخواست بررسی مجدد دریافت کالابرگ
موشک‌های اسرائیل‌زن را اینجا از نزدیک ببینید
play_arrow
موشک‌های اسرائیل‌زن را اینجا از نزدیک ببینید
شاهکار دیدنی زیدان پس از ۲۰ سال تکرار شد!
play_arrow
شاهکار دیدنی زیدان پس از ۲۰ سال تکرار شد!
سردار محبی: موشک‌های ایران رادارگریز شده‌اند
play_arrow
سردار محبی: موشک‌های ایران رادارگریز شده‌اند
سردار محبی: رونمایی از شهر موشکی هدیۀ ویژۀ هوافضای سپاه به مردم خواهد بود.
play_arrow
سردار محبی: رونمایی از شهر موشکی هدیۀ ویژۀ هوافضای سپاه به مردم خواهد بود.
جنگنده‌های سعودی مزدوران خود را در یمن هدف قرار دادند
play_arrow
جنگنده‌های سعودی مزدوران خود را در یمن هدف قرار دادند
شنود نیروهای امنیتی رژیم صهیونیستی توسط بادیه‌نشینان عرب
play_arrow
شنود نیروهای امنیتی رژیم صهیونیستی توسط بادیه‌نشینان عرب
تصاویر مردمی از پرواز موشک‌های ایرانی در آسمان بندرعباس + فیلم
play_arrow
تصاویر مردمی از پرواز موشک‌های ایرانی در آسمان بندرعباس + فیلم
انفجار لاستیک کامیون هنگام باد کردن در ویتنام + فیلم
play_arrow
انفجار لاستیک کامیون هنگام باد کردن در ویتنام + فیلم
لحظه هدف قرار دادن یک کشتی تجاری در خلیج عمان توسط آمریکا + فیلم
play_arrow
لحظه هدف قرار دادن یک کشتی تجاری در خلیج عمان توسط آمریکا + فیلم
لاریجانی: دعوا در آمریکا بر سر تجاوز به ایران نیست، مسئله اصلی شکست ترامپ و پیروزی ایران است + فیلم
play_arrow
لاریجانی: دعوا در آمریکا بر سر تجاوز به ایران نیست، مسئله اصلی شکست ترامپ و پیروزی ایران است + فیلم