منوی برگه ها
TwitterRssFacebook
منوی دسته ها

ارسال شده توسط در تاریخ ۲۱ آبا ۱۳۹۳ در طراحی وب | ۰ دیدگاه

آموزش جامع HTML » (قسمت پنجم):

سلام به همه شما:

در این پست که از مجموعه آموزش جامع HTML می باشد، قصد دارم تا پیرامون یکی دیگر از مهمترین مباحث HTML بپردازم که در تقریبا همه جای صفحات می تواند کاربرد بالایی داشته باشد .

در این قسمت می خواهیم تا در مورد نحوه تعریف جداول در این زبان صحبت کنیم و ببینیم که چگونه می توان در صفحات HTML جدول تولید کرد و دیگر اینکه کاربرد جداول می تواند علاوه بر اینکه برای کاربرد به معنای اصلی خود یعنی رسم آن و نویشتن مثلا یک برنامه هفتگی ویا …. درون آن می باشد می توان از آن ها در نظم دهی و ترتیب دهی در همه عناصر صفحه مثل تصاویر ویدئو و لینک ها و…. استفاده نمود در ادامه به تعریف تگها و صفت های مربوط به این مشخصه می پردازیم:

 

ساختار کلی جداول:

ساختار کلی جداول که در زیر می بینید به این صورت است که ابتدا برای اینکه به مرورگر بفهمانیم که ما الان قصد ساخت یک جدول را داریم از تگ <table> استفاده می کنیم که همانطوری که در زیر مشاهده می کنید این تگ باید در انتها بسته شود .

سپس باید به فکر سطر ها و ستون های جدول خود باشیم که برای این کار از تگ <tr> برای پدیدار شدن سطرها و از تگ <th> برای رسم ستون ها و تکمیل جدول استفاده می کنیم کد زیر و نتیجه آن را در مرورگر مشاهده کنید:

 

<table border=”2″> 

<tr> 

<th>name</th> 

<th>lname</th> 

<tr/> 

<tr> 

<td>ali</td>

<td> amiri</td> 

<tr/>

<tr> 

<td>mohammad</td>

<td>mohseni</td> 

<tr/>

<table/>

 

نتیجه در مرورگر:

1

توضیح تگ <table>:

این تگ همانطوری هم که در بالا توضوح داده شد برای ایجاد جدول در نظر گرفته شده است که دارای صفات زیر می باشد:

 

dir

با این صفت آشنایی دارید چرا که می دانیم جهت گیری متون را در داخل جداول تعیین می کند و مقادیر آن هم می توند rtl و ltr باشد.

 

Border

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

 

bordercolordark

به طور معمول حاشیه ها از دو قسمت تاریک و روشن تشکیل شده اند که در این صفت قسمت تیره کنترل می شود .

 

Bordercolorlight

این صفت قسمت روشن حاشیه را کنترل می کند.

 

Bordercolor

همانطوری که از نام این صفت بر می آید مسئول تعیین رنگ حاشیه می باشد البته توجه داشته باشید که دیگر به صورت دورنگی نمی باشد و به همان رنگی که در مقدار این صفت تعیین می کنیم تبدیل می شود.

 

Cellpadding

این صفت خاص هم برای تعیین میزان فاصله محتویات داخل سلول ها با دیواره های داخلی آن استفاده می شود که می تواند یک عدد بر حسب px به خود بگیرد.

 

Cellspacing

برای تعیین میزان فاصله سلول ها از یکدیگر استفاده می گردد.

 

align

برای تعیین موقعیت جدول را در یه حالت راست یا چپ و یا مرکز صفحه تعیین می کند که به ترتیب دارای سه مقدار right و left و center می باشد.

دو صفتی که برای تعیین عرض و ارتفاع جدول استفاده می شوند width و height است که مقادیری بر حسب px می پذیرند.

 

bgcolor

یک رنگ را برای تعیین رنگ پس زمینه جدولمان می پذیرد.

 

background

این صفت آدرس عکسی را که ما قصد داریم تا به عنوان پس زمینه جدولمان تعیین گردد به عنوان مقدار می پذیرد.

 

Summary

این صفت هم یک توضیح کوتاه در مورد محتویات جدول می پذیرد.

 

frame

این صفت تعیین می کند که تا چه میزان از border های اطراف جدول نمایش داده شود که دارای مقادیر زیر است:

void»این مقدار باعث می شود تا هیچ کدام یک از border  ها نمایش داده نشود.

hsides » این مقدار فقط border  های افقی را نشان می دهد.

Vsides »فقط border ها عمودی را نمایان می کند.

Rhs »فقط border سمت راست را نمایان می کند.

Lhs » border سمت چپ را نشان می دهد.

Above »border بالا را نشان می دهد.

Below »border پایین را نشان می دهد.

 

معرفی تگ <tr>

این تگ مهم برای تعیین ردیف در جداول به کار برده می شود که حتما هم باید در تگ <table> به کار برده شود که دارای صفات ها زیر است:

align

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

 

bgcolor

این صفت برای ما رنگ پس زمینه ردیف مورد نظر را تعیین می کند.

valign

این صفت هم تراز عمودی متن را برای هر یک از سلول های هر ردیف تعیین می کند که مقادیر زیر را می پذیرد:

 

top و middle و bottom » این سه مورد به ترتیب محتوای سلول را با بالای سلول و با وسط سلول و با پایین سلول تراز می کند.

 

معرفی دو تگ <th> و <td>

این دو تگ در واقع به عنوان تکمیل سلول و ایجاد آن به کار می رود یعنی زمانی که شما مانند مثال فوق از تگ <tr> برای تشکیل سطر استفاده می کنید برای اینکه سلول کامل گردد لازم است تا از تگ <th> برای آن متونی که قصد داریم عنوان باشند استفاده کنیم و از تگ <td> برای متون معمولی که عنوان نیستند استفاده کنیم که در بالا مثالش زده شد.

اما این دو تگ دارای صفات مشابهی هستند که در ادامه به آن می پردازیم:

 

bgcolor

رنگ پس زمینه سلول را مشخص می کند .

Valign

تراز عمودی محتوای سلول را تعیین می کند که مقادیر آن در بالا بیان شد.

align

نحوه چینش متون را در سلول تعیین می کند.

abbr

این صفت مخففی از محتوا را نشان می دهد که خود شما می توانید به عنوان مقدار به آن یک مخفف نسبت دهید.

 

Width   و  heightدو صفتی هستند که عرض و ارتفاع سلول را تعیین می کنند.

 

 

Colspan

اگر قصد داشته باشیم که یک سلول را در طول چندین سلول گسترش دهیم از این صفت استفاده می کنیم که به عنوان مقدار باید عددی به آن نسبت دهیم که این عدد نمایانگر تعداد سلول هایی است که باید سلول در آن گسترش یابد.

مثال:

 

 

<table border=”1″> 

<tr> 

< th/>این سطر گسترش یافته<th colspan=”4 > 

<tr/> 

<tr> 

<td> one name </td>

<td> tow name </td>

<td> three name </td>

<td> oder name </td> 

<tr/> 

<table/>

 

و نتیجه در مرورگر :

 

 

 

2

 

Rowspan

 

این صفت بسیار شبیه به صفت قبلی عمل می کند با این تفاوت که در بالا چندین ستون را با یکدیگر یکی می کردیم ولی اینجا و با این صفت چندین سطر را با یکدیگر به صورت عمودی یکی می کنیم .

 

تگ <caption>

اگر بخواهیم به طور کلی برای جدول خود یک عنوان در نظر بگیریم باید این تگ را بلافاصله در بعد از تگ <table> قرار دهیم و محتوای بین باز و بسته شدن آن را عنوان خود انتخاب کنیم و بنویسیم تا در این صورت متن نوشته شده برای عنوان جدول در نظر گرفته شود.

لازم به ذکر است که این تگ صفت معروف align را با مقادیر بیان شده در قبل می پذیرد.

 

 

<table border=”1″>

<caption/>عنوان مورد نظر<caption> 

<tr> 

<th/>متن مورد نظر<“4″=th colaps >

<tr/> 

<tr> 

<td> one name </td>

<td> tow name </td>

<td> three name </td>

<td> oder name </td> 

<tr/> 

<table/>

نتیجه در مرورگر:

 

3

 

گروه بندی ردیفی جداول:

در جداول می توان آن ها را به سه گروه ردیفی foot  و body و  head با استفاده از سه تگ <tfood> و <tbody> و <thead> تقسیم بندی نمود.

هر کدام از این سه دارای قابلیت align و valign  هستند.

 

<table> 

<thead> 

<tr><td> 1 </td></tr>

<tr><td>  ۲ </td></tr> 

<thead/> 

<tfoot> 

<tr><td> 3 </td></tr>

<tr><td> 4 </td></tr> 

<tfoot/> 

<tbody> 

<tr><td> 5 </td></tr>

<tr><td> 6 </td></tr> 

<tbody/> 

<tbody> 

<tr><td> 7 </td></tr>

<tr><td> 8 </td></tr> 

<tbody/> 

<table/>

نتیجه در مرورگر:

 

4

 

 

گروه بندی ستونی جداول:

با استفاده از این قابلیت می توان چندین ستون را با یکدیگر مرتبط کرد و برای آنها خواص مشترکی در نظر گرفت.

البته برای انجام این کار به دو صورت اقدام می کنیم:

 

استفاده از تگ <col/>

با استفاده از این تگ می توان یک یا چند ستون را به یکدیگر متصل کرد و البته که این تگ از نوع تگ های تهی بوده و باید بلافاصله پس از باز شدن <table> بیاید.

با استفاده از صفت span  می توان تعیین کرد که این گروه شامل چند ستون از جدول باشد.

توجه داشته باشید که به جای تگ فوق می توان از تگ <colgroup> هم استفاده نمود اما این تگ تهی نبوده و نیاز به بستن دارد.

<table> 

<colgroup align=’right’ span=’4′></colgroup>

<colgroup align=’left’ span=’3′></colgroup>

…..

 

 

بسیار خوب پنجمین پست آموزش HTML5 هم به پایان رسید امیدوارم تا اینجا از مطالب بهره برده باشید .

با تشکر از جزوات آموزشی استاد احمد بادپی

دیدگاهتان را بنویسید

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

Time limit is exhausted. Please reload CAPTCHA.

Pin It on Pinterest

Share This

Share This

Share this post with your friends!