آموزش طراحی وب

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

جداول در HTML

جداول در html

فصل سوم ( معرفی ساختار  HTML4 )

جلسه هشتم (جداول در HTML )

سلام خدمت همراهان عزیز مدرسه مجازی ایرانیان

امروز راجع به جداول صحبت میکنیم . شما از جداول میتونید برای اهداف زیادی استفاده کنید ؛ مثل : grid برای نمایش لیست کاربران ، یا برای نمایش لیست قیمت ها و … . اما سعی کنید تا حد امکان از table توی پروژه هاتون تو front سایتتون استفاده نکنید . امروزه کدنویسای حرفه ای به هیچ عنوان از table ها استفاده نمیکنن .

خوب اول ساختار table رو بهتون آموزش میدم .

Table ها شامل سطرها و ستون ها هستن . سطر ها رو با تگ <tr> و ستون هارو با تگ <td> مشخص می کنید . نحوه نوشتن کدها به شکل زیر هست :

 خوب برای مثال ، ما میخوایم یک جدول با دو سطر و سه ستون ایجاد کنیم ، پس باید از دو tr و سه td استفاده کنیم :

 حالا میخوایم یک جدول با ۵ سطر و ۱ ستون ایجاد کنیم ، باید از پنج tr و یک td استفاده کنیم :

حالا اگه بخوایم ساختاری رو شبیه به تصویر زیر ترتیب بدیم که یک جدول داشته باشیم ، شامل ۳ سطر و ۳ ستون باشه ولی سطر آخر یک ستون داشته باشه باید چیکار کنیم؟

1

خیلی راحت با خاصیت colspan میتونیم سه ستون سطر سوم رو به یک ستون تبدیل کنیم . به کد زیر توجه کنید :

 اگه دقت کرده باشید ، در سطر آخر به تعداد ستون های موجود ، ما مقدار colspan رو مشخص کردیم . این به این معنی هست که ۳ ستون رو باهم ادغام کن و به ۱ ستون تبدیل کن .

 خوب فکر کنم تا اینجا متوجه ی ساختار سطر و ستون table و ادغام اونها شده باشید . ما توی جداول میتونیم heading و  footer هم مشخص کنیم حتی میتونیم برای جدول caption هم بذاریم . ساختار این جدول به شکل زیر هست :

 جدول بالا گریدی شبیه به تصویر زیر برای ما تشکیل میده :

2

یک عنوان برای جدول داریم ، یک هدر ، یک بدنه و یک فوتر برای جدول در نظر گرفتیم . حالا میخوایم یک مقدار این ترکیب رو شکیل تر کنیم . باید با دستورات css به جدول استایل بدیم . به کد زیر توجه کنید :

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

3

هر استایلی که بخواین به شکل بالا ، میتونید به راحتی روی جدولتون پیاده کنید . در رابطه با CSS میتونید به بخش اموزش فصلی css برید و بصورت کامل آموزش ببینید .

خوب اطلاعات لازم در رابطه با جداول رو براتون با مثال توضیح دادم ، امیدوارم مفید واقع شده باشه ، منتظر آموزش های پیشرفته باشید 🙂

تهیه شده در مدرسه مجازی ایرانیان

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

  • فرهاد

    سلام
    می خواهم در مورد این جمله برام یکم توضیح بدید.
    ” سعی کنید تا حد امکان از table توی پروژه هاتون تو front سایتتون استفاده نکنید . امروزه کدنویسای حرفه ای به هیچ عنوان از table ها استفاده نمیکنن . ”

    front چی هست ؟
    و چرا طراحان حرفه از تیبل استفاده نمی کنند ؟

    • میترا رحیمی

      سلام دوست عزیز
      table زمان گذشته البته نه چندان دور در وب خیلی استفاده میشد اما در حال حاضر منسوخ شده و همه چیز div based شده و افراد حرفه ای سعی میکنن حتی جداولشون رو هم با div دربیارن . اما برای رسم جداول هنوز هم بعضی ها از table استفاده میکنن چون اکثرا برای رسم جداول در صفحاتشون از جداول ادیتورهای متنی استفاده میکنن.
      منظور از front صفحه ی وب شماست که کاربر مشاهده میکنه . backend کدهای شماست که کدنویس با اون سر و کار داره.
      موفق باشید

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟