آموزش رایگان HTML – جلسه 5

آموزش رایگان HTML – جلسه 5

آنچه در این مقاله میخوانید

جدول ها مجموعه ای از ردیف ها و ستون ها هستند که اطلاعات در آنها قرار می گیرد. این کار باعث میشود تا خواندن مطلب برای کاربر بسیار راحت باشد. استفاده از جدول ها در HTML  روشی بسیار مناسب است که سبب میشود اطلاعات به خوبی به نمایش گذاشته شوند. در ابتدا که زبان CSS به صورت گسترده مورد استفاده قرار نمی گرفت, از جدول ها برای طراحی قالب و نمای وب سایت ها استفاده میشد.

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

در جلسه ی قبل(جلسه 4) در مورد اضافه کردن تصاویر و لیست ها در HTML صحبت کردیم, انواع لیست ها را توضیح دادیم و تگ های هر کدام را با مثال هایی به شما معرفی کردیم. در این جلسه قصد داریم به آموزش استفاده از تگ table برای ایجاد جدول بپردازیم. پس با ما همراه باشید.

نحوه اضافه کردن جدول در HTML

آموزش رایگان html - جلسه 5 - جدول ها در html
آموزش رایگان HTML – جلسه 5 – جدول ها در HTML

 

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

بخش های یک جدول

برای ایجاد یک جدول باید از تگ باز <table> شروع کنیم. در داخل این تگ، جدول را با استفاده از سطرها <tr> و سلول ها <td> ترسیم می کنیم.

یک مثال از جدول HTML به شرح زیر است:

<table>
<tr>
<td>Row 1 – Column 1</td>
<td>Row 1 – Colunm 2 </td>
<td>Row 1 – Column 3 </td>
</tr>
<tr>
<td>Row 2 – Column 1</td>
<td>Row 2 – Column 2</td>
<td>Row 2 – Column 3</td>
</tr>
</table>

این کدها یک جدول 2 در 3 تولید می کنند.

تگ های جدول

سعی کنید تگ های جدول را به خاطر بسپارید تا ضمن شناسایی بهتر آنها بتوانید همزمان با پیشرفت مهارت هایتان از آنها استفاده کنید.
تگ های جدول زیر برای ترسیم جدول ها در HTML مورد استفاده قرار میگیرد؛

 

موقعیت

معنی

تگ جدول

بالای جدول

سرجدول (Table Head) <thead>
محتوای جدول بدنه جدول (Table Body) <tbody>
قسمت پایین جدول فوتر جدول (Table Foot)

<tfoot>

درون جدول

گروه ستونهای جدول (Column Group) <colgroup>
محتوای سلول های هدر جدول هدر جدول (Table Header)

<th>

 

سلول های جدول که به عنوان هدرهای ستون یا سرصفحه های ردیف عمل می کنند باید از عنصر <th> (هدر جدول) استفاده کنند.
برای تعریف ستون های جدول برای یک ظاهر طراحی شده می توانید از <col> و <colgroup> استفاده کنید. با این حال ، تعدادی از محدودیت ها با این عمل وجود دارد.

با استفاده از عنصر <caption> می توان عنوان را به جدول اضافه کرد.

بیایید یک جدول درست کنیم 🤗

آموزش رایگان html - جلسه 5 - جدول ها در html
بیایید یک جدول درست کنیم – جدول ها در HTML

خب آماده اید؟✌

در ویرایشگرتان به یک خط جدید, در صفحه index.html بروید. کد HTML زیر را وارد کنید:

<table>
<tr>
<td>Row 1 – Column 1</td>
<td>Row 1 – Column 2 </td>
</tr>
<tr>
<td>Row 2 – Column 1</td>
<td>Row 2 – Column 2 </td>
</tr>
</table>

به همین راحتی…. حالا تغییرات را ذخیره کنید و در پیش نمایش آنچه نوشته اید را مشاهده کنید.

ترکیب چند سلول

گاهی در یک جدول نیاز است که دو یا چند سلول با هم ادغام شوند. این کار میتواند دلایل مختلفی داشته باشد, ازجمله خالی بودن محتوای یکی از سلول ها, محتوای مشابه چند سلول یا حتی گاهی برای تغییر استایل ها نیاز به ادغام ستون ها می باشد. در این مواقع لازم است سلول ها با هم ادغام شوند. اما این کار را چطور روی جدول طراحی شده انجام دهیم؟

برای این کار لازم است تا از خواص colspan و rowspan استفاده ‌کنیم. این خواص بر روی تگ‌های <td> و <th> کار می‌کنند.
colspan برای تحت پوشش قرار دادن یک سلول در بین چند ستون است و rowspan برای زیر پوشش قرار دادن یک سلول در بین چند ردیف مورد استفاده قرار می گیرد.

هر خاصیت یک مقدار عدد صحیح را برای تعداد سلول‌هایی که تحت پوشش قرار می‌دهد قبول می‌کند. عدد 1 به صورت پیش فرض در این دو خاصیت تعریف شده است.

 

چگونه یک سند HTML را ببندیم؟

آموزش رایگان html - جلسه 5 - جدول ها در html
چگونه یک سند HTML را ببندیم؟

خبر خوب اینکه از این مرحله به بعد, آموزش ها به صورت حرفه ای تر خواهد بود و شما به عنوان خواننده ی این مطالب, دیگر یک مبتدی نیستید.

مرحله آخری که باید تکمیل کنیم بستن تگ <body> و <html> در انتهای هر صفحه با استفاده از کد HTML زیر است:

</body>
</html>

مثال کاملی از جدول؛

<table>
<caption>A complex table</caption>
<thead>
<tr>
<th colspan=”3″>فاکتور</th>
<th>14 January 2025 </th>
</tr>
<tr>
<td colspan=”2″> <strong>پرداخت به:</strong><br> علی حسینی</td>
<td colspan=”2″> <strong>مشتری:</strong><br> سارا کمالی </td>
</tr>
</thead>
<tbody>
<tr>
<th>نام / توضیحات</th>
<th>تعداد</th>
<th colspan=”2″>قیمت</th>
</tr>
<tr>
<td>کتاب</td>
<td>100</td>
<td colspan=”2″>تومان100000</td>
</tr>
<tr>
<td>خودکار</td>
<td>1000</td>
<td colspan=”2″>تومان10000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan=”3″>جمع کل</th>
<td> 110000</td>
</tr>
</tfoot>
</table>

برای داشتن یک جدول, مثال بالا را در سند HTML وارد کنید و آن را اجرا کنید. برای اینکه این جدول ظاهری مناسب هم داشته باشد کافی است از CSS استفاده کنید.برای این منظور کد زیر را در تگ <head></head> قرار دهید.

<style>
tr, th, td {
padding: 10px;
}
table {
border-collapse: collapse !important;
width: 50%;
}
th {
background: #dcdcdc;
}
td, th {
border: 1px solid black;
}
</style>

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

آموزش بعدی چیه✏📄 ؟؟؟؟

در حال حاضر می توانید از اطلاعاتی که در این جلسه و جلسات قبل به دست آوردید برای ایجاد صفحات وب اختصاصی با این ویژگی ها و پیوند دادن آنها به هم استفاده کنید.

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

 

😊✌ از بقیه‌ی جلسات  آموزش رایگان HTML جا نمونید✌😊

 

 

منبع؛ www.html.com

5/5 - (1 امتیاز)

4 نظر

ارسال نظر

آدرس ایمیل شما منتشر نخواهد شد.