ساخت جدول (Table) در HTML

( یکشنبه ، 6 خرداد سال 1403 )

حق کپی ویدئو

مجاز نمی باشد.

شما اینجا هستید :

جلسه هفتم

آموزگار :

آرزو محرابی

آموزش ساخت جدول با استفاده از تگ Table در زبان نشانه گذاری اچ تی ام ال ( HTML ) و استفاده از استایل های (Style) کاربردی در ساخت جداول ( ادامه مطلب … )

ابزار وردپرس بُزرگ ترین مرجع وردپرس ایران!

آنچه توانسته ایم لطف خدا بوده است ، ابزار وردپرس بعنوان یکی از مراجع بزرگ طراحی وب و وردپرس در حال فعالیت می باشد 🙂

ابزار وردپرس بُزرگ ترین مرجع وردپرس ایران!

آنچه توانسته ایم لطف خدا بوده است ، ابزار وردپرس بعنوان یکی از مراجع بزرگ طراحی وب و وردپرس در حال فعالیت می باشد 🙂

اورجینال

کیفیت

پشتیبانی

آپدیت

آرزو محرابی

مدرس دوره های آموزش طراحی سایت و برنامه نویسی

آرزو محرابی

مدرس دوره های آموزش طراحی سایت و برنامه نویسی

ساخت جدول (Table) در HTML

( یکشنبه ، 6 خرداد سال 1403 )

ایجاد جدول درسایت‌ها یکی از مباحث مهمی‌است که باید آن را یاد بگیریم. اما قبل از ایجاد جدول‌ها می‌خواهیم یاد بگیریم که کار کردن با برنامه 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

فهرست