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

جداول در 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 برید و بصورت کامل آموزش ببینید .

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

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

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۲

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

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

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

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

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

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین