تبلیغات
Par30net | پارســـی نت
ورود کاربران
نام کاربری :
کلمه عبور :
کلمه عبور خود را فراموش کرده ام ؟
منوی کاربری

Make Your HomePage    Send Email To Admin    Add to Favorites

پیغام مدیر : با عرض سلام و خسته نباشی دوستانی که مایلند با ما تبادل لینک کنند از قسمت لینک دوستان لینک خود را برای ما ارسال نمایند

با تشکر   

عضویت در سایت


تماس با ما


ارسال پیام

لینكهای ویژه
لینك دوستان
چت بامدیـــــر
جستجوگر

Google
  
            
     در كل اینترنت
     در پارســـی نت

نظر سنجی

نظر شما راجع به رنگبندی سایت چیست ؟






آمار وب
بازدید های امروز:
بازدیدهای دیروز:
بازدید این ماه :
بازدید ماه گزشته:
کل بازدید ها:
نویسندگان سایت:
كل مطالب ارسالی:
آخرین به روز رسانی:
طراح قالب

Hosted by:

IranHost

ساعــــت

نویسنده گان
  • سید حسین رفعتی(416)

  • موضوعات












    آرشیو
  • هفته چهارم فروردین 1389 ( 5 )
  • هفته چهارم دی 1388 ( 115 )
  • هفته سوم دی 1388 ( 1 )
  • هفته دوم دی 1388 ( 18 )
  • هفته اول دی 1388 ( 212 )
  • هفته چهارم آذر 1388 ( 78 )
  • همه آرشیوها
  • آخرین پستها

    اس ام اس sms ماه رمضان – سری ۳

    اس ام اس و پیامک رمضان – سری ۴

    اس ام اس عید فطر

    اس ام اس عید غدیر خم – سری ۳

    اس ام اس ولادت حضرت محمد و امام صادق

    مقدمه آموزش CSS

    اصول نوشتن کد های CSS

    استفاده از شناسه Style

    CSS در HEAD صفحه

    فایل CSS خارج از صفحه

    تنظیم طول و عرض عناصر

    ایجاد کادر برای عناصر

    حاشیه و تو رفتگی عناصر صفحه

    تعیین موقعیت عناصر صفحه

    کار با متنها ( بخش اول )

    کار با متنها (بخش دوم )

    تنظیم فونت با CSS

    تنظیم رنگ متن با CSS

    تنظیم رنگ و تصویر زمینه

    تنظیم تکرار تصویر زمینه

  • همه پستها
  • لوگو دوستان


    وضعیت


    »آدرس آی پی شما:

      AddThis Feed Button



    تبلیغات
    امروز :



     آخرین اخبار سایت

    چت روم پارسِِــــی نت را اندازی شد (جدید)

    شما دوستان عزیز می توانید با عضویت در سایت و ورود به حساب کاربری خود از چت روم سایت پارســــی نت بهرمند شوید         ( تاریخ ارسال : 25/10/1388 )











    توجه:برای تبادل بنر اول بنر وب من را در وبلاگ یا سایت خود قرار دهید بعد بنر خود را برای ما بفرستید.

    برای ارسال بنر خود اینجا كلیك كنید

    اصول استفاده از جدول ها

    پست: 366  |  موضوع مرتبط: آموزشی > HTML

    آموزش HTML

    آموزش ساختن جدول در طراحی صفحه با 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=www.par30netblog.mihanblog.com>آموزش جاوا اسکرپت</a>
    </td>
    </table>

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

    پارســـی نت

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

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

     



    نوشته: سید حسین رفعتی ساعت: 05:14 ب.ظ تاریخ: شنبه 26 دی 1388 |+|
    f