آموزش HTML - بخش دهم: جدول‌ها
در ادامه‌ی قسمت‌های قبلی آموزش HTML، به مبحث جدول‌ها میرسیم. جدول‌ها در اچ‌تی‌ام‌ال کاربردهای بسیار زیادی دارند. یکی از کاربردهای جدول در زبان اچ تی ام ال، علاوه بر وارد کردن داده‌ها و اطلاعات، طراحی کلی صفحه یا استخوان‌بندی کلی صفحه است. درواقع همان‌طور که در شکل زیر می‌بینید یک صفحه اچ تی ام ال از مستطیل‌ها و مربع‌هایی است که درکنار همدیگر قرار گرفته‌اند و ساختار کلی صفحه را تشکیل می‌دهند. خب یکی از راه‌های ایجاد چنین جعبه‌هایی، استفاده از جداول است. البته راه‌حل‌های بهتری همچون divها نیز وجود دارند که در بخش‌های بعدی بدان‌ها خواهیم پرداخت. با ما همراه شوید تا بگوییم که چگونه یک جدول ایجاد می‌شود.
مرحله اول: در مرحله اول تنها این جمله را می‌نویسیم: این مرحله می‌گوید که ما به‌دنبال ایجاد یک جدول هستیم.
نکته: همان‌طور که خودتان هم می‌دانید هر جدول سطر و ستون‌های مخصوص به خود را دارد. در اچ‌تی‌ام‌ال نیز همین قضیه است. برای این کار، ما ابتدا سطرها (محورهای افقی) را مشخص می‌کنیم و در زیر هر یک از این سطرها به تعداد ستون بنا می‌کنیم.
مرحله دوم: حالا بیایید یک جدول خیلی ساده و ابتدایی درست کنیم! جدولی که تنها یک سطر و یک ستون دارد! برای ساخت یک سطر در جدول بعد از تگ کلمه را می‌نویسیم ( اگر هم به زبان نیاورید، می‌دانیم که خودتان فهمیده‌اید این کلمه مخفف table row است و نیازی به حفظ کردن نیست.) . این کار درواقع همانند آن است که ما با خودکار یک خط افقی در صفحه کاغذ کشیده باشیم.
مرحله سوم: حالا که جدول ما یک خط افقی (یک سطر) دارد وقت آن است تا در این سطر ایجاد شده، تعدادی اطلاعات بنویسیم.
این اطلاعات درواقع به‌صورت افقی درکنار هم نوشته می‌شوند و اولین پایه‌های ستون جدول ما را تشکیل می‌دهند. برای نوشتن این اطلاعات تگ table Data یا را به کار می‌بریم.
نمونه کد
اولین ستون جدول
نتیجه‌ای که مرورگر نمایش خواهد داد
خب! حالا که با پایه کار آشنا شدید، کمی به سمت جلو می‌رویم. درواقع برای ساختن جدول در اچ تی ام ال ابتدا باید تگ را به تعداد سطرهای افقی که میخواهیم جدول داشته باشد می‌نویسیم. سپس در داخل این سطرهای افقی، داده‌های جدول را که در یک سطر درکنار هم قرار می‌گیرند در داخل تگ‌های ، وارد می‌کنیم. با یک مثال این موضوع را برای شما بیشتر روشن خواهیم کرد.
جدولی با چهار ستون ولی بدون اطلاعات ,و ستونی که در آن اطلاعات وارد کنیم!
سطر افقی اول
سطر افقی دوم
سطر افقی سوم
جدول بالا چهار سطر دارد، ولی ستونی در آن وجود ندارد و یک جدول ناقص به شمار می‌رود که تنها چهار خط افقی دارد. پس حالا نوبت به اضافه کردن ستون‌های جدول می‌رسد.
برای هر سطر می‌توان به تعداد دلخواه ستون تعیین کرد. یعنی خط افقیمان را که کشیدیم، میتوانیم بالای آن خط افقی به تعداد دلخواه اطلاعات وارد کنیم. پس درواقع تعداد ستون‌های بسته به سلیقه شما است. مثلا ما در سطر اول سه ستون قرار می‌دهیم. در خط دوم سوم هم سه ستون قرار داده‌ایم.
نمونه کد
خط اول - ستون اول
خط اول - ستون دوم
خط اول - ستون سوم
خط دوم - ستون اول
خط دوم- ستون دوم
خط دوم - ستون سوم
خط سوم - ستون اول
خط سوم - ستون دوم
خط سوم - ستون سوم
نتیجه‌ای که مرورگر نمایش خواهد داد
نکته: در تمرین بالا ما درکنار سطرها <-- حرف مدنظر --!> نوشته‌ایم. این علامت <-- --!> به‌معنای کامنت در اچ تی ام ال است و درواقع هرچه بین این دو علامت قرار بگیرد توسط مرورگر نمایش داده نمی‌شود. از کامنتها برای توضیح ,و تشریح در رابطه با کد یا مرتب و مشخص کردن بخش‌های مختلف صفحه می‌توان استفاده کرد.
برای درک بهتر شما، مثال‌های دیگری را در پایین ایجاد کرده‌ایم.
نمونه کد
خط اول - ستون اول
خط اول - ستون دوم
خط دوم - ستون اول
خط دوم - ستون دوم
خط سوم - ستون اول
خط سوم - ستون دوم
خط سوم - ستون سوم
خط سوم - ستون چهارم
نتیجه‌ای که مرورگر نمایش خواهد داد
در رابطه با جداول نکات و موضوعات بیشتری نیز وجود دارد که باتوجه‌به مبتدی بودن سطح آموزش، از ارائه‌ی آن‌ها خودداری کردیم و به نکات مهم و کلیدی که نقش بیشتری در ایجاد جداول دارند بسنده کردیم. البته در جلسه‌ی بعدی نکات بیشتری را از جداول همچون عناوین جداول و همچنین نحوه‌ی اضافه کردن قاب به آن‌ها به شما آموزش خواهیم داد.
امیدواریم که دهمین بخش از آموزش اچ‌تی‌ام‌ال به سبک زومیت که حاصل تلاش تیم زومیت هست، موفق به جلب رضایت شما زومیتی‌های عزیز شده باشد. تجربیات، پیشنهاد‌ها و نظرات شما بدون شک در ادامه این مقالات آموزشی تأثیری بسزا داشته و قدردانی ما را نیز به‌همراه خواهد داشت. پس لطفا با ما در ارتباط باشید.
نظرات