در ادامهی قسمتهای قبلی آموزش HTML، به مبحث جدولها میرسیم. جدولها در اچتیامال کاربردهای بسیار زیادی دارند. یکی از کاربردهای جدول در زبان اچ تی ام ال، علاوه بر وارد کردن دادهها و اطلاعات، طراحی کلی صفحه یا استخوانبندی کلی صفحه است. درواقع همانطور که در شکل زیر میبینید یک صفحه اچ تی ام ال از مستطیلها و مربعهایی است که درکنار همدیگر قرار گرفتهاند و ساختار کلی صفحه را تشکیل میدهند. خب یکی از راههای ایجاد چنین جعبههایی، استفاده از جداول است. البته راهحلهای بهتری همچون divها نیز وجود دارند که در بخشهای بعدی بدانها خواهیم پرداخت. با ما همراه شوید تا بگوییم که چگونه یک جدول ایجاد میشود.
مرحله اول: در مرحله اول تنها این جمله را مینویسیم:
را به کار میبریم.
نمونه کد
نتیجهای که مرورگر نمایش خواهد داد
خب! حالا که با پایه کار آشنا شدید، کمی به سمت جلو میرویم. درواقع برای ساختن جدول در اچ تی ام ال ابتدا باید تگ |
||||||||||||||||||||||||||||||||||
، وارد میکنیم. با یک مثال این موضوع را برای شما بیشتر روشن خواهیم کرد.
جدولی با چهار ستون ولی بدون اطلاعات ,و ستونی که در آن اطلاعات وارد کنیم!
جدول بالا چهار سطر دارد، ولی ستونی در آن وجود ندارد و یک جدول ناقص به شمار میرود که تنها چهار خط افقی دارد. پس حالا نوبت به اضافه کردن ستونهای جدول میرسد. برای هر سطر میتوان به تعداد دلخواه ستون تعیین کرد. یعنی خط افقیمان را که کشیدیم، میتوانیم بالای آن خط افقی به تعداد دلخواه اطلاعات وارد کنیم. پس درواقع تعداد ستونهای بسته به سلیقه شما است. مثلا ما در سطر اول سه ستون قرار میدهیم. در خط دوم سوم هم سه ستون قرار دادهایم. نمونه کد
نتیجهای که مرورگر نمایش خواهد داد
نکته: در تمرین بالا ما درکنار سطرها برای درک بهتر شما، مثالهای دیگری را در پایین ایجاد کردهایم.
نمونه کد
نتیجهای که مرورگر نمایش خواهد داد
در رابطه با جداول نکات و موضوعات بیشتری نیز وجود دارد که باتوجهبه مبتدی بودن سطح آموزش، از ارائهی آنها خودداری کردیم و به نکات مهم و کلیدی که نقش بیشتری در ایجاد جداول دارند بسنده کردیم. البته در جلسهی بعدی نکات بیشتری را از جداول همچون عناوین جداول و همچنین نحوهی اضافه کردن قاب به آنها به شما آموزش خواهیم داد. امیدواریم که دهمین بخش از آموزش اچتیامال به سبک لاراولیستا که حاصل تلاش تیم لاراولیستا هست، موفق به جلب رضایت شما لاراولیستایهای عزیز شده باشد. تجربیات، پیشنهادها و نظرات شما بدون شک در ادامه این مقالات آموزشی تأثیری بسزا داشته و قدردانی ما را نیز بههمراه خواهد داشت. پس لطفا با ما در ارتباط باشید. |