آموزش HTML – جداول (۷)

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

 

 

پیاده‌سازی جدول در HTML

برای ساخت جدول در HTML شما به چهار تگ اصلی نیاز دارید:
Table: اولین و مهمترین تگ برای ساخت جدول که محدوده پیاده‌سازی یک جدول را تعریف می‌کند.
Tr: با استفاده از این تگ می‌توانید ردیف‌های جدول‌تان را تعریف کنید. این تگ مخفف Table row است.
Th: عناوین هر کدام از ردیف‌ها را مشخص می‌کند. این تگ مخفف Table heading است.
Td: این تگ داده‌های مربوط به هر کدام از سلول‌ها را وارد می‌کند. این تگ مخفف Table Data است.
ممکن است با این تعاریف کمی گیج شده باشید اما باید بگویم که با حل یک مثال ساده کاملا مشکل‌تان حل می‌شود.

تصور کنید من یک جدول نیاز دارم که بتوانم در آن اطلاعات چند نفر (نام، نام خانوادگی و سن) را وارد کنم. برای این کار نیاز به سه عنوان دارم. همچنین از آنجایی که تنها اطلاعات دو نفر را وارد می‌کنم پس به دو ردیف نیز نیاز دارم. اما یک ردیف نیز برای قرار دادن عناوین باید بگذارم، به همین دلیل تعداد ردیف‌های من یا بهتر بگویم تعداد استفاده‌های من از تگ tr به سه مورد می‌رسد.

یک سند html را آماده کنید و المان‌های اصلی html را وارد کنید:

حال در داخل تگ body تگ table را قرار می‌دهیم تا محدوده جدول خودمان را تعیین کنیم:

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

برای ساخت اولین ردیف نیاز داریم که یک تگ tr را وارد کنیم:

بعد از اینکار به عنوان اولین ردیف نیاز است که عناوین خود را در آن قرار دهیم. برای قرار دادن عناوین نیاز است که از تگ th استفاده کنیم. به کدهای زیر دقت کنید:

بعد از افزودن ردیف عناوین حال نیاز است که داده‌های خود را وارد کنیم. این را در نظر داشته باشید که برای قرار دادن مشخصات هر انسان نیاز است که یک ردیف (tr) درست کنیم. به همین دلیل یک بار دیگر از تگ tr استفاده خواهیم کرد. اما نکته اینجاست که این بار دیگر بجای قرار دادن th از td استفاده می‌کنیم. پس ما به سه td احتیاج داریم. هر کدام از این tdها به صورت مرتب در زیر عنوان خودشان قرار می‌گیرند. به مثال زیر توجه کنید:

به این صورت من توانستم یک جدول داشته باشم که حاوی عناوین نام،‌ نام خانوادگی و سن است، همچنین یک ردیف دیگر نیز با اطلاعات مرتبط را داراست. اما یک لحظه صبر کنید.
جداول نیاز به خط کشی -بوردر- ندارند؟ چرا که نه، جدول بدون بوردر که جدول نمی‌شود. برای پیاده‌سازی این قسمت ما از خاصیت border استفاده می‌کنیم. این خاصیت متعلق به table است. به مثال زیر توجه کنید:

 

افزودن عنوان اصلی برای جدول

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

 

تخصیص ردیف و ستون بیشتر

با استفاده از این تکنیک می‌توانید برای هر کدام از سلول‌های‌تان ردیف و یا ستون‌های بیشتری تخصیص بدهید. برای مثال بگویید که عنوان name به اندازه دو ردیف جا بگیرد. یا بگویید که مقدار Arastoo به اندازه دو ستون در کنار یکدیگر جا بگیرد. برای این کار کافی‌ست که از خاصیت‌های rowspan برای تگ th و colspan برای td استفاده کنید. به مثال زیر توجه کنید:

 

در پایان

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