ایجاد جدول درسایت‌ها یکی از مباحث مهمی‌است که باید آن را یاد بگیریم. اما قبل از ایجاد جدول‌ها می‌خواهیم یاد بگیریم که کار کردن با برنامه vs code چگونه است؟ آیا باید تنظیمات خاصی را انجام دهیم؟ باید خدمت شما بگوییم که کار کردن با این برنامه بسیار راحت است و برای نوشتن تگ‌ها و اجرای آن‌ها نیاز به انجام کار خاصی نیست. تنها برنامه را باز کرده و شروع می‌کنیم.
همانطور که در جلسات قبل هم خدمتتان عرض کردیم وقتی شروع به طراحی یک سایت می‌کنیم و می‌خواهیم پروژه طراحی یک سایت را انجام دهیم، ابتدا باید یک پوشه ایجاد کنیم تا تمام فایل‌ها و پوشه‌های مربوط به آن سایت را درون آن قرار دهیم.
فرض کنید ما این پوشه را ایجاد کرده‌ایم. حال چون می‌خواهیم از برنامه vs code استفاده کنیم، باید به برنامه بگوییم که می‌خواهیم پروژه را درون این پوشه قرار دهیم. برای این کار کافی است در منوی بالای برنامه باز شده، به قسمت فایل برویم و گزینه open folder را انتخاب کنیم و از پنجره باز شده، پوشه‌ای که ایجاد کرده بودیم را انتخاب کنیم و آن را باز کنیم و گزینه select folder را بزنیم. اکنون اگر به سمت چپ صفحه ی باز شده ی برنامه نگاه کنید نام پوشه تان را می‌بینید. اکنون هر فایل و پوشه ای را که درون پوشه تان بیندازید، آن‌ها را درون برنامه هم خواهید دید. پس برای اضافه کردن فایل و یا پوشه تصاویر یا هر چیز دیگری کافی ست از قسمت برنامه vs code استفاده کنید.
ساخت جدول در HTML
اکنون می‌خواهیم روش ایجاد جدول با html را بیان کنیم. برای ایجاد جدول‌ها باید از تگ زوج <table> استفاده کنیم. اما این تگ به تنهایی کافی نیست بلکه برای ایجاد ستون‌ها و سطرها باید از تگ‌های دیگری هم استفاده کنیم. حال فرض کنید می‌خواهیم یک جدول که دارای دو ردیف و سه ستون است را طراحی کنیم.
تگ <tr></tr> برای ایجاد سطرها به کار می‌رود. این تگ درون تگ <table> قرار می‌گیرد. حال چون می‌خواهیم جدول ما دو ردیف داشته باشد باید دو تا تگ <tr> بنویسیم:
<head>
<table>
<tr></tr>
<tr></tr>
</table>
</head>
قرار است هر ردیف از جدول ما دارای سه ستون باشد. پس باید درون هر ردیف سه تگ <td> بنویسیم. به صورت زیر:
<head>
<table>
<tr>
<td>خانه ی اول</td>
<td>خانه ی دوم</td>
<td>خانه ی سوم</td>
</tr>
<tr>
<td>خانه ی چهارم</td>
<td>خانه ی پنجم</td>
<td>خانه ی ششم</td>
</tr>
</table>
</head>
اگر این دستور را بنویسید و اجرا کنید، می‌بینید که خروجی شما شباهتی به جدول ندارد و داده‌های جدولتان به صورت ساده نوشته شده‌اند. دلیل آن این است که کارمان اینجا تمام نمی‌شود بلکه باید ویژگی‌های خط‌های دور جدول و خانه‌های آن را نیز تعیین کنیم.
استفاده از Style در ساخت جدول
برای این کار باید درون تگ <head> از تگ <style> استفاده کنیم و از خصوصیاتی مانند رنگ و نوع خطوط و ضخامت را درون آن بنویسیم. به صورت زیر:
<style>
Table , td {
Border:2px solid blue;
}
</style>
حال اگر خروجی را ببینید، مشاهده خواهید کرد که خطوط اضافی وجود دارد، برای از بین بردن این مورد باید دستور border-collapse را هم به دستورات خود اضافه کنیم.
Border-collapse:collapse;
اکنون جدول ما ظاهر خوبی را به خود گرفته است. حال می‌توانیم اتربیوت مربوط به عرض را هم اعمال کنیم تا جدول ما بزرگ تر شود.
Width=”100%”
این اتربیوت را می‌توانیم به صورت مستقیم درون تگ <table> قرار دهیم. تگ دیگری که وجود دارد و مربوط به جدول‌ها است تگ caption است. این تگ توضیحی را در مورد جدول ما می‌دهد. درواقع ما برای نوشتن اینکه موضوع جدولمان چیست از این تگ استفاده می‌کنیم. این تگ باید درون تگ <table> و قبل از تگ‌های دیگرقرار بگیرد.
<table>
<caption>موضوع جدول خود را ینویسید</caption>
<tr>
<td></td>
<td></td>
</tr>
</table>
آخرین مبحثی که قرار است برای شما بیان کنیم، ادغام کردن خانه‌های جدول است. این موضوع بسیار مهم و کاربردی ست پس سعی کنید بعد از یادگیری آن را بارها و بارها تمرین کنید.
هرگاه بخواهیم چند ستون را با هم ادغام کنیم باید ازاتربیوت colspan استفاده کنیم و در مواقعی که بخواهیم چند سطر را با هم ادغام کنیم از اتربیوت rowspan کمک می‌گیریم. این موضوع و مطلب که یادگیری آن بسیار مهم است درون ویدئو توضیح داده شده است. به شما پیشنهاد می‌کنیم که آن را به دقت ببینید.
6 دیدگاه. Leave new
سلام وقتتون بخیر
میگم به خانم محرابی بفرمایید چرا بعضی از کد ها اعمال نمیشن من دقیقا عین خودشون انجام دادم ولی برای من اعمال نمیشن تو فایل ایندکس شده
باسلام خدمت شما
دقت داشته باشید گاهی اوقات کش مرورگر باعث عدم نمایش تغییرات می‌شود که پیشنهاد می‌شود کش آنرا خالی کرده و سپس تست فرمایید.
از حضور شما ممنونیم.
ببخشید من برای ایجاد خطوط طبق مراحل رفتم ولی نشون نمیده
سلام و وقت بخیر.
در انجام آن دقت نمایید ، نباید مشکلی باشد.
با آرزوی موفقیت برای شما .
سلام بسیار عالی ممنون از زحمات خانم محرابی – لطفا به خانم محرابی برسانید که نحوه ترسیم نمودار های دایره ای و چارت ها رو هم اگه میشه در اموزششون قرار بدهند
ممنون از شما جناب مقدم ، از حضور شما ممنونیم.
به ایشان اطلاع داده می شود.