دوره مقدماتی آموزش HTML و CSS | قسمت پنجم – تگ های مرتبط با جداول HTML

موضوع : HTML
تاریخ : 1399/09/25
مجموع پسند شده : 0
بازدید : 1.004 K

در این جلسه به بررسی تگهای مربوط به جداول HTML خواهیم پرداخت.

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

مانند نتایج ورزشی یا نتایج افراد مبتلا به کرونا و مثال های فراوان دیگر که مطمئنا نمونه های مختلفی از آنها را در صفحات وب مشاهده کرده اید.

یک جدول ، اطلاعات را در یک فرمت شبکه ای یا شبکه مانند نشان می دهد و هر بخش از شبکه را اصطلاحا یک cell (سلول) می نامند.

خب بریم سراغ تگ های مهم جداول HTML که باهاشون خیلی کار داریم.

تگ های مهم در جداول HTML

در این قسمت ما با همه تگ های مهم جداول HTML آشنا خواهیم شد و خاصیت های این تگ ها را با هم بررسی خواهیم نمود.

پس با ما همراه باشید.

تگ table در جداول وب

برای ساخت یک جدول باید ابتدا و انتهای آنرا با تگtable مشخص کنیم.

یعنی به عبارت دیگر ستونها و سطرها باید درون تگ table نوشته شوند.

تگ table یک جمع کننده یا به اصطلاح wrapper میباشد.

تگ thead

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

تگ tbody

ما بایستی محتوای جدول خود را داخل تگ tbody قرار دهیم. در واقع تگ tbody در برگیرنده محتوای اصلی جدول ما می باشد.

تگ tfoot

این تگ جهت قرار دادن اطلاعات در پاورقی جدول استفاده می شود.

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

نکته : در صورتی که از تگ های thead و tfoot استفاده کنید ؛ در پرینت از جداول بزرگ که چند صفحه می شوند ، محتوای این تگ ها در تمامی صفحات چاپ خواهند شد.

توجه : شما می توانید بدون استفاده از این تگ ها هم جداول خودتون رو ایجاد کنید اما روش اصولی استفاده از این تگ ها می باشد. البته لازم به ذکر است که شاید شما مثلا به تگ thead یا tfoot یا اصلا هر دو احتیاجی نداشته باشید که در این صورت نباید این تگ ها را در جداول خود استفاده کنید.

تگ tr در جداول وب

یکی از تگ های مهم و اساسی جداول HTML همین تگ tr می باشد.

شما برای ایجاد یک سطر در جدول بایستی از تگ tr استفاده کنید.

شکل کلی چیدمان تگ ها در جداول HTML به صورت زیر می باشد :

<table>
    <thead>
    <tr></tr>
    </thead>
    <tbody>
    <tr></tr>
    </tbody>
    <tfoot>
    <tr></tr>
    </tfoot>
</table>

۱۰

۱۱

<table>

<thead>

</thead>

<tbody>

</tbody>

<tfoot>

</tfoot>

</table>

خب حالا ما سطرهای خود را ایجاد کردیم پس زمان آن است که ستون های خود را وارد سطرهای مورد نظر کرده و به جدول خود سر و شکل بدهیم.

تگ td در جداول وب

هر سلول از جداول HTML با تگ td نماش داده میشود.

توجه کنید از تگ td در داخل تگ tr که داخل تگ tbody تعریف شده استفاده می کنیم.

ساختار کلی جداول HTML

توجه : برخی از مرورگرها به طور پیشفرض دور هر سلول جدول یک خط حاشیه ای ایجاد می کنن که سلول هارا از هم جدا می کند که در جلسات بعدی بیشتر درباره کنترل کردن خط های دور سلول (border) صحبت خواهیم کرد.

ساختار کلی ایجاد یک جدول ساده در HTML به صورت زیر است :

<table>
    <tbody>
    <tr>
        <td>ستون اول </td>
        <td>ستون دوم </td>
        <td>ستون سوم </td>
    </tr>
    </tbody>
</table>

<table>

<tbody>

<tr>

</tr>

</tbody>

</table>

تگ th در جداول وب

این تگ نیز مانند تگ td استفاده میشود ولی با این تفاوت که هدف استفاده از این تگ نشان دادن تیتر هر ستون یا سطر می باشد.

تگ th بهتر است در داخل تگ tr که داخل تگ thead تعریف شده است مورد استفاده قرار گیرد.

همچنین وقتی یک سلول هیچ محتوایی ندارد شما می توانید از این تگ برای نمایش یک سلول خالی استفاده کنید.

توجه : استفاده از این تگ برای تیترهای جداول موجب مرور سریع جداول , بهتر شدن سئو سایت و همچنین کنترل بهتر جدول با دستوراتcss میشود.

نکته : میتوانید با استفاده از ویژگی scope مشخص کنید که تیتر بین این تگ برای سطر ها می باشد یا ستون ها.

نکته : مرورگرها اکثرا محتوای درون این تگ را به صورت bold نشان میدهند.

<table>
    <thead>
    <tr>
        <th></th>
        <th scope="col">Saturday</th>
        <th scope="col">Sunday</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">Tickets sold:</th>
        <td>120</td>
        <td>135</td>
    </tr>
    <tr>
        <th scope="row">Total sales:</th>
        <td>$600</td>
        <td>$675</td>
    </tr>
    </tbody>
</table>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

<table>

<thead>

<tr>

<th scope="col">Saturday</th>

<th scope="col">Sunday</th>

</tr>

</thead>

<tbody>

<tr>

<th scope="row">Tickets sold:</th>

</tr>

<tr>

<th scope="row">Total sales:</th>

</tr>

</tbody>

</table>

خروجی کد بالا به شکل زیر می باشد :

تگ th در جداول HTML

تغییر اندازه ستون ها و سطرها در جداول HTML

در برخی موارد لازم است شما اندازه ستونها یا سطرها را با توجه به محتوای درون انها تغییر دهید.

برای این کار می توانیم از ویژگی colspan استفاده کنیم.

با این خاصیت می توانید اندازه ستونهای موجود در جدول را تغییر دهید.

توجه : جهت تغییر ستون ها به اندازه های دلخواه می توانید از دستورات CSS نیز استفاده کنید.

<table>
    <thead>
    <tr>
        <th></th>
        <th>9am</th>
        <th>10am</th>
        <th>11am</th>
        <th>12am</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th>Monday</th>
        <td colspan="2">Geography</td>
        <td>Math</td>
        <td>Art</td>
    </tr>
    <tr>
        <th>Tuesday</th>
        <td colspan="3">Gym</td>
        <td>Home Ec</td>
    </tr>
    </tbody>
</table>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<th>Monday</th>

<td colspan="۲">Geography</td>

</tr>

<tr>

<th>Tuesday</th>

</tr>

</tbody>

</table>

خروجی کد بالا به شکل زیر خواهد بود :

تغییر اندازه سطر و ستون ها در جداول HTML

توجه : ما در شکل با استفاده از css استایل جدول را متفاوت کرده ایم تا شما کاربر گرامی به صورت کامل عملکرد کدها را متوجه شوید.

شما می توانید به راحتی همین کار را برای سطرها نیز انجام دهید ولی به جای ویژگی colspan از ویژگی rowspan برای تگ های tr استفاده کنید.

جهت بررسی بیشتر تگ های جداول HTML به لینک زیر مراجعه نمایید :

table in html – w3school

قسمت پنجم دوره مون هم با عنوان جداول HTML به پایان رسید.

کماکان از شما کاربران گرامی استدعا داریم نظرات و پیشنهادات خودتون رو در مورد این مطلب و کل سایت را از طریق فرم دیدگاه برای ما ارسال نمایید.

دوره مقدماتی آموزش HTML و CSS | قسمت پنجم – تگ های مرتبط با جداول HTML

تگ های مهم در جداول HTML

تگ table در جداول وب

تگ thead

تگ tbody

تگ tfoot

تگ tr در جداول وب

تگ td در جداول وب

تگ th در جداول وب

تغییر اندازه ستون ها و سطرها در جداول HTML

کلمات کلیدی

مهدی امیرخیزی

آیا این مقاله برای شما مفید بود ؟

دیدگاه ها خود را با ما در میان بگذارید!

تگ های مهم در جداول HTML

تگ table در جداول وب

تگ thead

تگ tbody

تگ tfoot

تگ tr در جداول وب

تگ td در جداول وب

تگ th در جداول وب

تغییر اندازه ستون ها و سطرها در جداول HTML

مهدی امیرخیزی

آیا این مقاله برای شما مفید بود ؟

عضویت در خبرنامه