جلسه ی بیست و هشتم: تگ Table (پیشرفته)

تگ Table

در جلسه ی سیزدهم از طراحی وب سایت ما در مورد تگ Table و نحوه کار با آن توضیحاتی دادیم و گفتیم که چگونه می توانیم یک جدول زیبا و ساده بسازیم (برای دیدن آموزش مورد نظر کلیک کنید). حال در این جلسه از آموزش تگ Table می خواهیم به آموزش استفاده از تگ های پیشرفته و حرفه ای تر در این زمینه بپردازیم.

 

تگ Table چیست؟

همانطور که گفتیم تگ های Table از تگ هایی به نام th (برای نوشتن عنوان ها از این تگ استفاده می کنیم)، Tr (از این تگ برای ایجاد سطر های یک جدول استفاده می شود)، Td (برای ایجاد اعضای جدول از آن ها استفاده می شود)، ساخته شه است.

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

  1. <table>
  2. <thead>
  3. <tbody>
  4. <tfoot>
  5. <col>
  6. <colgroup>
  7. <caption>

 

تگ Table

درباره این تگ در جلسه ی سیزدهم از جلسات طراحی وب صحبت نموده ایم (برای دیدن آموزش مورد نظر کلیک کنید). اما در کل باید بدانید برای اینکه بخواهیم یک جدول بسازیم ابتدا باید یک تگ Table را ایجاد نماییم.

 

تگ Thead

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

تگ Tbody

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

تگ Tfoot

از این تگ برای ایجاد قسمت پایینی یا همان Footer یک جدول استفاده می شود.

مبحث تکمیلی

برای استفاده از تگ های بالا ابتدا باید یک تگ Table ایجاد نماییم، سپس از تگ Tr برای ایجاد یک سطر استفاده می کنیم. حال باید از تگ Td برای ایجاد سلول های (اعضای) جدول خود استفاده کنیم. به نمونه کد بالا توجه کنید:

<table border="1px">

<thead>

<tr>

<td>نام درس</td>

<td>نمره</td>

</tr>

</thead>

<tbody>

<tr>

<td>علوم</td>

<td>20</td>

</tr>

<tr>

<td>ریاضی</td>

<td>18</td>

</tr>

</tbody>

<tfoot>

<tr>

<td>میانگین</td>

<td>19</td>

</tr>

</tfoot>

خروجی کد بالا:

تگ table

 

نکته: یادتان باشد که جدول نیز می تواند استایل های CSS را دریافت کند. برای مثال می توان از مقدار Text-align استفاده کرد که از طریق این خاصیت می توان متن داخل جدول را در جهتی که دلمان می خواهد قرار دهیم.

اما اگر بخواهیم تمامی جدول را به سمتی خاصی بفرستیم باید از خاصیت Align درون کد Html خود استفاده کنیم خود استفاده کنیم به نمنه کد زیر دقت کنید:

<table border="1px" align="center" > ... </table>

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

 

تگ Col و colgroup

از تگ Col برای ایجاد ستون های یک جدول استفاده می شود زمانی که ما از تگ Col استفاده می کنیم می توانیم هر یک از ستون های جدول را به اندازه های مورد نظر خود تبدیل کنیم (از نظر عرض). تگ Col عموما خواص موجود در ستون ها را مشخص می کند.

تگ Colgroup نگهدارنده ی تگ های Col می باشد از این تگ فقط درون تگ Table استفاده می شود. این تگ نوعی تگ مادر برای تگ Col می باشد. یادتان باشد که این تگ جز تگ های دوتایی می باشد.

نکته: درون تگ Colgroup از یک تگ به نام Span استفاده می شود که تعداد تگ های Col ما را مشخص می کند.

نکته: تگ colgroup بعد از تگ caption وقبل از تگ های thead،tbody ،tfoot  و tr قرار می گیرد.

به نمونه کد زیر توجه کنید:

<table border="1" >

<colgroup span="2">

<col width="150px" > </col>

<col width="300px" > </col>

</colgroup>

<tr>

<td>کمیابی ها</td>

<td> kamyabiha</td>

</tr>

</table>

خروج کد بالا:

تگ Table

 

تگ caption

فرض کنید یک سری اعداد درون یک جدول را در مقابل شما قرار بدهیم. آیا شما می توانید بگوید که این اعداد چه کاربردی دارند؟؟ ممکن است نمرات یک دانش اموز باشد ممکن است تعداد دانش اموزان یک کلاس باشند.

برای اینکه بتوانیم کاربرد یک جدول و اعضای درون آن را برای کاربر توضیح دهیم باید یک عنوان برای آن بنویسیم. تگ Caption یک توضیح برای جدول مورد نظر ما ارائه می دهد که این توضیح عنوان جدول ما می باشد.

نکته: تگ Captoin بعد از تگ Table استفاده می شود.

نکته: برای هر جدول شما می توانید فقط یک عنوان مشخص کنید.

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

به نمونه کد زیر توجه کنید:

<table border="1" >

<caption>جدول کمیابی ها</caption>

<colgroup span="2">

<col width="150px" > </col>

<col width="300px" > </col>

</colgroup>

<tr>

<td>کمیابی ها</td>

<td> kamyabiha</td>

</tr>

</table>

خروجی کد بالا:

تگ Table

 

خلاصه مطلب

  1. همانطور که گفتیم تگ های Table از تگ هایی به نام th، Tr، Td، ساخته شه است.
  2. برای اینکه بخواهیم یک جدول بسازیم ابتدا باید یک تگ Table را ایجاد نماییم.
  3. از تگ Thead برای ایجاد سر فصل های یک جدول استفاده می شود.
  4. از تگ Tbody برای ایجاد اعضای داخل یک جدول استفاده می شود.
  5. از این تگ برای ایجاد قسمت پایینی یا همان Footer یک جدول استفاده می شود.
  6. تگ Col عموما خواص موجود در ستون ها را مشخص می کند.
  7. تگ Colgroup نگهدارنده ی تگ های Col می باشد.
  8. درون تگ Colgroup از یک تگ به نام Span استفاده می شود که تعداد تگ های Col ما را مشخص می کند.
  9. تگ colgroup بعد از تگ caption وقبل از تگ های thead،tbody ،tfoot و tr قرار می گیرد.
  10. تگ Caption یک توضیح برای جدول مورد نظر ما ارائه می دهد که این توضیح عنوان جدول ما می باشد.
  11. تگ Captoin بعد از تگ Table استفاده می شود.
  12. برای هر جدول شما می توانید فقط یک عنوان مشخص کنید.
  13. به طور پیش فرض عنوان جدول در قسمت بالایی و وسط جدول قرار می گیرد.
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

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