تکنولوژی با طعم دوستی

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

در ادامه با کافه دوستی همراه باشید.

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

مرحله اول: در مرحله اول تنها این جمله را می‌نویسیم: <table> این مرحله می‌گوید که ما به دنبال ایجاد یک جدول هستیم.  

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

 مرحله دوم: حالا بیایید یک جدول خیلی ساده و ابتدایی درست کنیم! جدولی که تنها یک سطر و یک ستون دارد! برای ساخت یک سطر در جدول بعد از تگ <table> کلمه <tr> را می‌نویسیم ( اگر هم به زبان نیاورید، می‌دانیم که خودتان فهمیده‌اید این کلمه مخفف table row است و نیازی به حفظ کردن نیست.) . این کار در واقع همانند آن است که ما با خودکار یک خط افقی در صفحه کاغذ کشیده باشیم. 

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

این اطلاعات در واقع به صورت افقی در کنار هم نوشته می‌شوند و اولین پایه‌های ستون جدول ما را تشکیل می‌دهند. برای نوشتن این اطلاعات تگ table Data یا <td> را به کار می‌بریم. 

خب! حالا که با پایه کار آشنا شدید، کمی به سمت جلو می‌رویم. در واقع برای ساختن جدول در اچ تی ام ال ابتدا باید تگ <tr> را به تعداد سطرهای افقی که میخواهیم جدول داشته باشد می‌نویسیم. سپس در داخل این سطرهای افقی، داده‌های جدول را که در یک سطر در کنار هم قرار می‌گیرند در داخل تگ‌های <td>، وارد می‌کنیم. با یک مثال این موضوع را برای شما بیشتر روشن خواهیم کرد.

جدولی با چهار ستون ولی بدون اطلاعات ,و ستونی که در آن اطلاعات وارد کنیم!

<table>

    <tr>سطر افقی اول</tr>

    <tr>سطر افقی دوم</tr>

    <tr>سطر افقی سوم</tr>

     <tr><سطر افقی چهارم/tr>

</table>

جدول بالا چهار سطر دارد، ولی ستونی در آن وجود ندارد و یک جدول ناقص به شمار می‌رود که تنها چهار خط افقی دارد. پس حالا نوبت به اضافه کردن ستون‌های جدول  می‌رسد.

برای هر سطر می‌توان به تعداد دلخواه ستون تعیین کرد. یعنی خط افقیمان را که کشیدیم، میتوانیم بالای آن خط افقی به تعداد دلخواه اطلاعات وارد کنیم. پس در واقع تعداد ستون‌های بسته به سلیقه شماست. مثلا ما در سطر اول سه ستون قرار می‌دهیم. در خط دوم  سوم هم سه ستون قرار داده‌ایم. 

نکته: در تمرین بالا ما در کنار سطرها <-- حرف مورد نظر --!> نوشته‌ایم. این علامت <--  --!> به معنای کامنت در اچ تی ام ال است و در واقع هر چه بین این دو علامت قرار بگیرد توسط مرورگر نمایش داده نمی‌شود. از کامنتها برای توضیح ,و تشریح در رابطه با کد یا مرتب و مشخص کردن بخش‌های مختلف صفحه می‌توان استفاده کرد. 

برای درک بهتر شما، مثال‌های دیگری را در پایین ایجاد کرده‌ایم. 

 در رابطه با جداول نکات و موضوعات بیشتری نیز وجود دارد که با توجه به مبتدی بودن سطح آموزش، از ارائه‌ی آن‌ها خودداری کردیم و به نکات مهم و کلیدی که نقش بیشتری در ایجاد جداول دارند بسنده کردیم. البته در جلسه‌ی بعدی نکات بیشتری را از جداول همچون عناوین جداول و همچنین نحوه‌ی اضافه کردن قاب به آن‌ها به شما آموزش خواهیم داد.

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

از لینک های آماده  شده ی زیر می توانیدبه قسمت های قبلی دسترسی داشته باشید: