آموزش ایجاد جدول HTML با استفاده از تگ Table

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

    در گذشته جداول یا همان Table ها در HTML کاربرد بسیار زیادی داشتند.
    تا حدی که بسیاری از سایت ها، قالب و نمای خود را به طور کامل بر مبنای جداول پیاده سازی میکردند.
    امروز دیگر طراحی قالب سایت بر مبنای جداول کاملا منسوخ شده (هرچند متاسفانه هنوز گاهی شاهد استفاده از table ها در طراحی سایت ها هستیم) اما جدول های HTML هنوز زنده و پر کاربرد هستند و کارایی خود را از دست نداده اند.
    در حال حاضر برای طراحی قالب ایمیل یکی از بهترین و مطمئن ترین روش ها،
    اتکا به همین جداول اج تی ام ال است و البته فکر نمیکنم نیازی به اشاره کردن به این موضوع باشد که جداول هنوز هم در نمایش اطلاعات به کاربران نقش مهمی دارند.
    در آموزش تگ table در html امروز  نحوه ی استفاده از تگ Table برای ایجاد جداول HTML را خواهید آموخت.

    کاربرد جدول در صفحات html

    تگ table در html > کاربرد جدول در صفحات html

    فلسفه اصلی به کارگیری جداول در صفحات وب، دسته بندی و نمایش محتوایی است که به اصطلاح به صورت جدول بندی شده (tabular) و یا اطلاعات آماری هستند،
    البته پیش تر از جداول به دلیل استحکام و راحتی کار، در امر طراحی لایه ها و فرم بندی صفحات وب نیز استفاده می شد
    که امروزه به دلایلی توصیه می شود از آن (حداقل در پروژه هایی که به سئو یا بهینه سازی برای موتورهای جستجو متکی هستند) اجتناب کنید،
    به هر صورت از جداول به فرض می توان برای نمایش نتایج یک آزمون،
    نمایش برنامه های زمان بندی شده، اطلاعات آماری و… استفاده کرد.

    دوست عزیز پیشنهاد میشه این مطلب را هم ببینید
    آموزش ویژگی border-radius در css

    تگ table در html > ایجاد جدول در HTML

    عنصر اصلی ایجاد کننده یک جدول در صفحات وب، تگ کلیدی table است،
    البته این تگ به تنهایی کار خاصی انجام نمی دهد، ولی با افزودن مواردی درون آن، از جمله تگ های زیر مجموعه th، td و tr به ردیف ها و سلول های جانبی تقسیم می شود.

    یک مثال

    تعریف تمام قسمت ها را خدمت شما آموزش خواهیم داد پس بریم سراغ توضیحات کامل.

    دوست عزیز پیشنهاد میشه این مطلب را هم ببینید
    آموزش کار با فرم ها یا Forms در HTML

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

    صفت های تگ های thead , tbody , tfoot

    سه تگ thead، tbody و tfoot شیوه ی دیگری از فرمت بندی را در جداول html ارائه می کنند،
    با thead می توان سرتیترها را به صورت گروهی و متمایز نشان داد، تگ
    tbody بر روی عناصر داخلی جدول تاثیر گذار است و tfoot ردیف پایانی یک جدول را تحت تاثیر قرار می دهد، تگ های مذکور به خودی خود تغییر خاصی ایجاد نمی کنند و باید با ویژگی های css تنظیم شوند.

    صفت-های-تگ-های-thead-,-tbody-,-tfoot 

    تگ table در html > آموزش caption

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

    تگ table در html > اتریبیوت align

    • center: تنظیم جدول در وسط صفحه
    • left: تنظیم جدول در سمت چپ صفحه
    • right: تنظیم جدول در سمت راست صفحه

    ویژگی align در یک جدول، تنظیم کننده موقعیت آن در سمت راست، چپ یا وسط صفحه است و با سه عنصر بالا تعریف می شود.

    تگ table در html > اتریبیوت cellpadding

    ویژگی cellpadding میزان فاصله محتوای سلول ها، از خطوط کناری (حاشیه) آنها را مشخص می کند،
    هر چه مقدار آن بیشتر باشد، فضای داخلی سلول ها نیز بیشتر شده و محتوای درون آنها با فاصله بیشتری از خطوط دربرگیرنده، نمایش داده می شود.

    دوست عزیز پیشنهاد میشه این مطلب را هم ببینید
    آموزش css در این جلسه ID و Class

    جدول HTML با استفاده از تگ Table

    تگ table در html > اتریبیوت height

    برای تنظیم ارتفاع کلی جدول، از اتریبیوت  height استفاده می کنیم، مقادیر آن می تواند به صورت اعداد 1 ، 2 ، 3 ,4 ,و غیره… می باشد که در واقع نمایانگر تعداد پیکسل است.

    تگ table در html > اتریبیوت width

    ویژگی width نیز جهت تعیین عرض کلی جدول مورد استفاده قرار می گیرد، مقادیر آن نیز به صورت اعداد 1 ، 2 ، 3 و… تعیین می شود.

    آموزش ایجاد جدول HTML با استفاده از تگ Table

    تگ table در html > اتریبیوت title

    از ویژگی title برای ایجاد یک متن جهت معرفی جدول استفاده می شود، این متن در هنگامی که ماوس را داخل آن جدول ببریم، به صورت یک بالن (tooltip) در کنار نشانه گر ظاهر می شود.

    تگ table در html > اتریبیوت border

    ویژگی border برای نمایش خط حاشیه و سلول های داخلی جدول مورد استفاده قرار می گیرد، مقادیر آن با اعداد، به صورت 1 ، 2 ، 3 و… تعیین می شود.

    تگ table در html > اتریبیوت rules

    • all: خطوط در راستای ردیف ها و ستون ها ایجاد می شود.
    • cols: خطوط در راستای ستون ها ترسیم می شود.
    • rows: خطوط در راستای ردیف ها ترسیم می شود.
    • groups: خطوط برای گروهی از ردیف ها یا ستون ها ترسیم می شود.
    • none: هیچ خطی داخل جدول ترسیم نمی شود.

    ویژگی rules برای تعیین نحوه ترسیم خطوط میانی جدول به کار می رود،
    در حالت معمول، برای تمام سلول ها، ردیف ها و ستون ها، خطوط پیش فرض ترسیم می شود،
    اما با تعیین ویژگی rules، می توان نمایش خطوط را سفارشی کرد، ویژگی rules با چند مقدار بالا تنظیم می شود.

    خوب دوستان عزیز به پایان این جلسه از آموزش html و css رسیدیم تگ table  در html به صورت کامل داخل فیلم آموزش آموزش داده شده است هر گونه سوال داشته باشید از قسمت نظرات برای ما بنویسید ما همیشه منتظر نظرات با ارزش شما عزیزان هستیم .

    میانگین امتیازات ۵ از ۵
    از مجموع ۲ رای
    اشتراک گذاری:

    مطالب مرتبط برای شما

    نظر یا سوال شما در این مورد چیست؟

      هیچ دیدگاهی برای این نوشته ثبت نشده است.