آیا میدانید در طول 3500 سال تاريخ بشر فقط 250 سال جنگ نداشته ايم
تن پوشي زيباتر از سرشت و گفتار نيکو سراغ ندارم. از اُرد بزرگ
Logo

حل تمرینات و پروژه های درس میکروکنترلر
آموزش ساختن جدول در طراحی صفحه با HTML

آیا شما می خواهید یک جدول (table) در صفحه خود ایجاد کنید؟ برای ایجاد یک جدول باید از این تگ استفاده کنید:

<table>
........محتویات جدول.......
</table>

برای ایجاد یک جدول باید تگ ابتدایی آن یعنی <table> را در جایی که می خواهید جدول وارد شود، قرار دهید. و در پایان جدول هم از تگ پایانی آن یعنی <table/> استفاده کنید.
برای افزودن محتویات به جدول باید از تگ <td> استفاده کنید. نام این تگ مخفف table data است. محتویات جدول چیزهایی هستند که شما بعد از این تگ قرار می دهید. در پایان هم باید پس از محتویات جدول از تگ پایانی <td/>قبل از تگ پایانی جدول استفاده کنید. مانند زیر:



<table>
<td>
........محتویات جدول......
</td>
</table>

جدول به دست آمده مانند زیر به نظر می رسد:

........محتویات جدول......

البته این یک جدول ساده است و شاید در ظاهر زیاد تفاوتی با یک نوشته ساده نداشته باشد.

می توانیم برای جدول کادر (border)  هم تعریف کنیم. برای این کار باید شناسه مربوطه را در تگ جدول قرار دهیم. مانند زیر:

<table border="3">
<td>
........محتویات جدول......
</td>
</table>

حالا جدول ما کمی مشخص تر شد، به آن نگاه کنید:

........محتویات جدول......

شما می توانید ضخامت کادر جدول را به دلخواه خود تغییر دهید. برای این کار فقط کافی است تا عددی را که به عنوان مقدار شناسه border به کار بردیم، تغییر دهید. اگر مقدار این عدد را صفر قرار دهید کادر دیده نخواهد شد.

تا اینجا هر چه گفتیم درباره جدولی با یک سلول بود. برای اینکه جدولی با تعداد بیشتری سلول داشته باشیم، مثلاً بخواهیم یک سلول دیگر در همان خط ایجاد کنیم، باید دوباره از تگ td استفاده کنیم. مانند زیر:

<table border="3">
<td>
سلول اول
</td>
<td>
سلول دوم
</td>
</table>

می توانید سلولهای ایجاد شده را در اینجا مشاهده کنید:

سلول اول سلول دوم

حالا فرض کنید می خواهیم به خط بعدی یا به اصطلاح به ردیف بعدی برویم. برای این کار باید از تگ tr استفاده کنیم. این تگ با <tr> شروع و با <tr/> پایان می پذیرد. مانند زیر:
 

<table border="3">
<td>
سطر اول و سلول اول
</td>
<td>
سطر اول و سلول دوم
</td>
<tr>
<td>
سطر دوم و سلول اول
</td>
<td>
سطر دوم و سلول دوم
</td>
</tr>
</table>

نتیجه به این صورت مشاهده می شود:
 

سطر اول و سلول اول سطر اول و سلول دوم
سطر دوم و سلول اول سطر دوم و سلول دوم

 

شما می توانید بنا به نیاز خود فرمانهایی را به تگ جدول اضافه کنید. در اینجا برخی از این فرمانها آورده شده است:

  • cellspacing :
    برای ایجاد فاصله بین سلولها عدد مورد نظر خود را در این فرمان وارد کنید.
  • cellpadding :
    از این فرمان برای افزودن فضا به داخل یک سلول استفاده کنید. مقدار فضای مورد نظر خود را در این فرمان وارد کنید.

فرض کنید می خواهیم در مثال قبل بین سلولها یک فاصله به اندازه 10 ایجاد کنیم. تگ جدول را مطابق زیر تغییر می دهیم:

<table border="3" cellspacing="10">

جدول به دست آمده به شکل زیر خواهد بود:

سطر اول و سلول اول سطر اول و سلول دوم
سطر دوم و سلول اول سطر دوم و سلول دوم

حالا فرض کنید می خواهیم یک فاصله به اندازه 10 را به داخل سلولهای جدول مثال قبل اضافه کنیم. تگ جدول را به این صورت تغییر می دهیم:

<table border="3" cellpadding="10">

جدول به دست آمده به صورت زیر خواهد بود:

سطر اول و سلول اول سطر اول و سلول دوم
سطر دوم و سلول اول سطر دوم و سلول دوم

حالا می خواهیم هر دو مثال قبل را با هم امتحان کنیم، یعنی تگ جدول را مطابق زیر تغییر دهیم:

<table border="3" cellspacing="10" cellpadding="10">

نتیجه را ملاحظه کنید:

سطر اول و سلول اول سطر اول و سلول دوم
سطر دوم و سلول اول سطر دوم و سلول دوم

شما می توانید هر چیزی را که بخواهید داخل سلولها وارد کنید. مانند عکس، لینک، پاراگراف و...
برای این کار فقط کد مورد نظر خود را بین تگ <td> و <td/> وارد کنید. برای مثال فرض کنید می خواهیم یک لینک در جدول ایجاد کنیم. مانند زیر عمل می کنیم:

<table border="2">
<td>
<a href="../javascript/index.html">آموزش جاوا اسکرپت</a>
</td>
</table>

این هم جدولی که بیننده نهایی در صفحه مشاهده می کند:

آموزش جاوا اسکرپت

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

<table border="2">
<td>
<img src="learn_html.gif">
</td>
</table>

این هم نتیجه کد:

اصول کار با جدولها

برای ادامه معرفی خواص جدولها با ما به بخش بعدی بیایید.

منبع: www.neopersia.org

  منبع: www.picpars.com

  لطفا مقالات، آموزش‌ها و پروژه های خود را به آدرس ایمیل نمائید تا آن را با نام خودتان در سایت منتشر کنیم.


لینک ثابت این صفحه:   


© کپی برداری از مطالب این سایت تنها با ذکر منبع مجاز می باشد

در صورت داشتن هر گونه سوال، نظر و پیشنهاد راجب این مطلب می‌توانید در قسمت نظرات همین صفحه مطرح نمائید. همچنین با شرکت در نظر سنجی های سایت، ما را در بهبود بخشیدن به مطالب یاری کنید.


آموزش طراحی صفحات وب آموزش طراحی وب آموزش html آموزش اچ تی ام ال جدول جدول در صفحات وب ساختن جدول در html سلول انتخاب پس زمینه برای جدول ابعاد جدول اندازه جدول table html

ارسال شده در مورخه : پنجشنبه، 10 آذر ماه، 1390 توسط مدیریت بازدید [400]   پرینت

مرتبط باموضوع :

 استفاده از فریمهای نامرئی در صفحه  [ سه شنبه، 15 آذر ماه، 1390 ] 222 مشاهده
 اصول طراحی صفحات حاوی فریم -- بخش اول  [ پنجشنبه، 10 آذر ماه، 1390 ] 269 مشاهده
 ساختن لینک به نقاط مختلف یک صفحه HTML  [ چهارشنبه، 2 آذر ماه، 1390 ] 261 مشاهده
 شناسه های مختلف قابل استفاده برای خط افقی  [ پنجشنبه، 10 آذر ماه، 1390 ] 114 مشاهده
 
نام شما: [ کاربر جدید ]

نام شما (ضروری): 
ایمیل شما : 
نظر:
کد امنیتی
کد امنیتی

  [ بازگشت ]
  • امتیاز بدهید
  • انتخاب ها
  • اشترک گذاری
آیا این مطالب مورد رضایت شما واقع گردید؟ لطفا با رای دادن به این مطلب ما را در بهبود بخشیدن به مطالب کمک کنید. با اینکار به سایر دوستان‌تان نیز کمک خواهید کرد.


 فایل پی دی اف فایل پی دی اف

 گرفتن پرينت از اين مطلب گرفتن پرينت از اين مطلب

 ارسال به دوستان ارسال به دوستان

 گزارش این پست به مدیر سایت گزارش این پست به مدیر سایت

پروژه های آماده
فرکانس متر صنعتی 0تا 500 ولت 20KHz

ورودی این فرکانس متر قادر است با ولتاژهای 12 تا 500 ولت AC کار کند. ماکزیمم فرکانس اندازه گیری 20KHz می باشد. همچنین با تعیین نرخ نمونه برداری می توانید فرکانس را تا دو رقم اعشار اندازه گیری نمائید. جزئیات...


عناوین مطالب
عناوین مطالب را در موضوعات مربوطه جستجو کنید!
یک موضوع انتخاب کنید:



لینک باکس مهم‌ترین‌ ها
  • پروژه‌ها
  • برترین‌ها
  • پر بازدید
  • بیشترین نظرات
cash10-H7

سالنامه فارسی
ش ی د س چ پ ج
  12345
6789101112
13141516171819
20212223242526
2728293031

دوشنبه

1

1 خرداد ماه، 1391
21/05/2012


رویداد ها:
روز بزرگداشت ملاصدرا - روز بهره وری و بهینه سازی مصرف

جستجو در تقویم ...
cash40-D1

آمار کاربران

نظرسنجی
نظر شما در مورد کیفیت سایت چیست؟

خیلی عالیه
میتونه بهتر باشه
جای کار داره
خوب نیست
نظری ندارم!



شما میتوانید در این مورد نظر مکتوب خود را بنویسید: مشاهد نتایج و ثبت نظر

نظرسنجی ها

تعداد آراء: 679    نظرات: 42

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

پیشنهاد ما

سفارش طراحی پروژه
مرورگر پیشنهادی ما
نرم افزار دانلود فایلها
برنامه فشرده سازی







امتیاز به سایت
امتیاز به این صفحه
با یک امتیاز مثبت از طریق Gmail تان از سایت حمایت کنید