ایجاد جدول درسایت‌ها یکی از مباحث مهمی‌است که باید آن را یاد بگیریم. اما قبل از ایجاد جدول‌ها می‌خواهیم یاد بگیریم که کار کردن با برنامه 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 کمک می‌گیریم. این موضوع و مطلب که یادگیری آن بسیار مهم است درون ویدئو توضیح داده شده است. به شما پیشنهاد می‌کنیم که آن را به دقت ببینید.
8 دیدگاه. Leave new
با سلام و خسته نباشید
در قسمت style گزینه solid برای من موجود نیست احتمال میدم که قبل از استفاده از vs code باید پیکربندی میشد و یه سری تنظیمات داخلش انجام میشد اگر ممکنه راهنمایی بفرمایید که چطور باید تنظیم بشه تا گزینه solid در پیش فرض نمایش داده بشه
سلام وقت شما بخیر،
ممکن است نام آن تغییر کرده باشد که میتوانید گزینه ها را تست کنید.
با تشکر.
سلام وقتتون بخیر
میگم به خانم محرابی بفرمایید چرا بعضی از کد ها اعمال نمیشن من دقیقا عین خودشون انجام دادم ولی برای من اعمال نمیشن تو فایل ایندکس شده
باسلام خدمت شما
دقت داشته باشید گاهی اوقات کش مرورگر باعث عدم نمایش تغییرات می‌شود که پیشنهاد می‌شود کش آنرا خالی کرده و سپس تست فرمایید.
از حضور شما ممنونیم.
ببخشید من برای ایجاد خطوط طبق مراحل رفتم ولی نشون نمیده
سلام و وقت بخیر.
در انجام آن دقت نمایید ، نباید مشکلی باشد.
با آرزوی موفقیت برای شما .
سلام بسیار عالی ممنون از زحمات خانم محرابی – لطفا به خانم محرابی برسانید که نحوه ترسیم نمودار های دایره ای و چارت ها رو هم اگه میشه در اموزششون قرار بدهند
ممنون از شما جناب مقدم ، از حضور شما ممنونیم.
به ایشان اطلاع داده می شود.