HTML و CSS

آموزش برنامه نویسی HTML – ساخت جدول ( table )

سلام خدمت کابران و بازدید کننده های سایت گروه برنامه نویسی پنگوئن با یک آموزش دیگر از زبان HTML در خدمت شما هستیم. در این آموزش قرار است مهم ترین قسمت قالب سازی یعنی استفاده از تگ table رو به شما آموزش بدیم در ادامه با این آموزش همراه باشید.

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

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

خب اکنون ما برای جدول خود سطر ساخته ایم و به ستون نیاز داریم تا سر پای خود قرار گیرد. یکی از این تگ هایی که برای این که مفید است تگ td نام دارد آن را به شکل ساده در زیر می بینید

حال کد زیر را بنگیرد که یک جدول کامل است حال خروجی بگیرد

بله درست می بینید هیچ چیز برای نمایش وجود ندارد چرا؟
چون شما نه برای جدول بردار تعیین کرده اید نه برای آن کاراکتری قرار داده اید. حتی به جدول اندازه هم نداده اید.
حال در کد که شاهد قرار دادن حروف انگلیسی در جدول است را مشاهده کنید. در کد زیر مشاهده کنید.

این کد یک table کامل است اما باز آن زیبایی table وعده داده شده را ندارد. خب باید برویم به سوی خط کشی برای جدول خط تایین کنیم از تگ border استفاده می کنیم

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

اکنون خروجی را در قالب تصویر ببینید.

آموزش برنامه نویسی HTML - ساخت جدول ( table )

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *