جدول ها مجموعه ای از ردیف ها و ستون ها هستند که اطلاعات در آنها قرار می گیرد. این کار باعث میشود تا خواندن مطلب برای کاربر بسیار راحت باشد. استفاده از جدول ها در HTML روشی بسیار مناسب است که سبب میشود اطلاعات به خوبی به نمایش گذاشته شوند. در ابتدا که زبان CSS به صورت گسترده مورد استفاده قرار نمی گرفت, از جدول ها برای طراحی قالب و نمای وب سایت ها استفاده میشد.
از آنجایی که جدول در HTML برای سازماندهی اطلاعات مورد استفاده قرار میگیرد, استفاده از آن برای طراحی ساختار وب سایت مشکلاتی را به وجود آورده بود.خوشبختانه امروزه استفاده از جدول در HTML محدود به مشخص کردن اطلاعات است و استفاده از آن برای طراحی صفحات وب سایت ها منسوخ شده است.
در جلسه ی قبل(جلسه 4) در مورد اضافه کردن تصاویر و لیست ها در HTML صحبت کردیم, انواع لیست ها را توضیح دادیم و تگ های هر کدام را با مثال هایی به شما معرفی کردیم. در این جلسه قصد داریم به آموزش استفاده از تگ table برای ایجاد جدول بپردازیم. پس با ما همراه باشید.
استفاده از جدول یکی از رایج ترین روش ها برای مرتب کردن وب سایت ها و اطلاعات مورد نظر است.
شاید توضیح این قسمت سخت ترین بخش این جلسه باشد اما به یادگیری و استفاده از آن می ارزد 👌 چون جدولها یک راه خیلی خوب برای انتقال و ارائه ی مفاهیم به بازدید کننده ها هستند.
برای ایجاد یک جدول باید از تگ باز <table> شروع کنیم. در داخل این تگ، جدول را با استفاده از سطرها <tr> و سلول ها <td> ترسیم می کنیم.
<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> می توان عنوان را به جدول اضافه کرد.
خب آماده اید؟✌
در ویرایشگرتان به یک خط جدید, در صفحه 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 به صورت پیش فرض در این دو خاصیت تعریف شده است.
خبر خوب اینکه از این مرحله به بعد, آموزش ها به صورت حرفه ای تر خواهد بود و شما به عنوان خواننده ی این مطالب, دیگر یک مبتدی نیستید.
مرحله آخری که باید تکمیل کنیم بستن تگ <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
سلام
اگر تگ های thead و tbody را نزاریم چه اتفاقی میوفته؟
گذاشتن این ها اجباریه؟
خیر اجباری نییست و مشکلی پیش نمیاد
سلام
در thead باید از tr استفاده کنیم یا th
تفاوت این ها چیه؟
متوجه سوالتون نشدم