آموزش HTML (قسمت 8) : کار با جداول در HTML (جلسه دوم)

دسته بندی: آموزش
زمان مطالعه: 5 دقیقه
۱۰ مهر ۱۳۹۱
یاداوری :

در جلسه قبل با طریقه ایجاد یک جدول آشنا شدیم.

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

گفتیم که همیشه تگ‌های <th>که برای نوشتن تیترهای جدول ( table heading ) و تگ <td> که برای نوشتن داده‌های جدولی ساده ( table data ) استفاده میکنیم. حتما باید در تگ <tr> قرار بگیرند.

با صفت‌های این تگ‌ها آشنا شدیم از جمله border , bgcolor , align و ... که کار هر کدام را نیز در جلسه قبل توضیح دادیم. در این جلسه با طریقه گروه بندی سلول‌ها آشنا خوهیم شد. 

تگ <caption> : از این تگ برای ایجاد یک عنوان برای جدول استفاده می‌شود. این تگ باید بلافاصله بعد از تگ آغازین table و قبل از اولین ردیف جدول قرار گیرد. به صورت زیر :

<table border="1">
<caption> the table caption come here </caption>
<tr>
.
.
.

به صورت پیش فرض مرورگر‌ها متن داخل این تگ را بالا و وسط جدول نمایش می‌دهند. تگ <caption> از صفت زیر پشتیبانی میکند.

align : محل قرارگیری عنوان جدول را مشخص می‌کند و مقادیر زیر را می‌پذیرد:

  • right : عنوان در سمت راست جدول قرار میگیرد.
  • left : عنوان در سمت چپ جدول قرار میگیرد.
  • top : عنوان در بالای جدول نمایش داده می‌شود.
  • bottom : عنوان جدول در پایین جدول نمایش داده می‌شود.

فهرست محتوای این مقاله

گروه بندی ردیفی و ستونی جداول

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

گروه بندی ردیفی

ما می‌توانیم ردیف‌های جدول را به سه نوع گروه ردیفی تقسیم کنیم : foot , body , head و برای اینکار از سه تگ <tfoot> , <tbody> , <thead> استفاده می‌کنیم.

هر سه این عنصر‌ها داری صفات align و valign می‌باشند که در جلسه قبل به آن‌ها اشاره شده است.

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

<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<tr>
</thead>

<tfoot>
<tr>
<td>Edit by: Sajad</td>
<td>Website: 7Learn.com</td>
</tr>
</tfoot>

<tbody>
<tr>
<td>Janny</td>
<td>[email protected]</td>
</tr>
</tbody>

<tbody>
<tr>
<td>John</td>
<td>[email protected]</td>
</tr>
</tbody>

</table>

نتیجه در مرورگر :

نکته :

همیشه ردیف هایی که داخل تگ <thead> قرار می‌گیرند بالای جدول و ردیف هایی که داخل تگ <tfoot> قرار می‌گیرند در پایین جدول ظاهر میشوند.

نکته :

هر جدول می‌تواند شامل چندین عنصر <tbody> اما فقط دارای یک عنصر <tfoot> و <thead> باشد. نکته دیگر اینکه طریقه قرار گرفتن این تگ‌ها به این صورت است که اول تگ <thead> سپس تگ <tfoot> و در آخر تگ یا تگ‌های <tbody> قرار می‌گیرند

گروه بندی‌های ستونی 

به وسیله این نوع گروه بندی میتوانیم سلول‌های چندین ستون را به نوعی با هم مرتبط کرده و یکسری خواص مشترک را برای آن‌ها تعیین کنیم. برای گروه بندی‌های ستونی به دو طریق می‌توان عمل کرد:

استفاده از تگ </ col> : با اسنفاده از این تگ تهی که نیز باید بعد از تگ آغازین جدول قرار بگیرد می‌توان یک یا چند ستون را به هم مربوط و در واقع با هم گروه بندی کرد:

بدین منظور هر عنصر  </ col> نشان دهنده یک گروه ستونی خواهد بود. اما می‌توان با استفاده از صفت span مشخص کرد که گروه ما شامل چند ستون از جدول باشد. به عنوان مثال در کد زیر سه گروه تشکیل می‌شود. که گروه ستونی اول شامل اولین ستون جدول، گروه دوم شامل سه ستون بعدی آن و گروه سوم شامل دو ستون بعد از آن‌ها خوهد بود:

<table border="1">
<col align="center" span="1" />
<col align="left" span="3" />
<col align="right" span="2" />
.
.
.

دقت کنید که تگ colgroup جزء تگ‌های تهی نیست اما محتوای آن در این حالت می‌بایست خالی باشد.

برای مشخص کردن اینکه یک گروه ایجاد شده به وسیله تگ <colgroup> شامل چند ستون از جدول باشد دو راه وجود دارد: یکی از استفاده از صفت span که تعداد گروه‌های هر ستون را مشخص می‌کند. به این مورد در بالا اشاره کردیم.

راه دیگر استفاده از تعدادی تگ <col> داخل تگ <colgroup> است. در واقع تعداد تگ‌های <col> به کار رفته در داخل هر <colgroup> تعداد  ستون‌های آن گروه ستونی را مشخص می‌کند. به عنوان مثال کد زیر دقیقا همان نتیجه ای را خواهد داشت که کد فوق با استفاده از صفت span می‌کرد:

<table>
<colgroup align="center">
<col />
</colgroup>

<colgroup align="left">
<col />
<col />
<col />
</colgroup>

<colgroup align="right">
<col />
<col />
</colgroup>
.
.
.

اصطلاحا به گروه‌های ستونی که با استفاده از تگ <colgroup> ایجاد می‌شوند، گروه ستونی ساختاری و به گروه هایی با استفاده از تگ <col> ایجاد می‌شوند. گروه‌های ستونی غیر ساختاری می‌گویند.

تفاوت گروه‌های ساختاری و غیر ساختاری است که از صفت "rules="group برای نمایش مرز گروه‌ها در جداول استفاده می‌شود است. در این صورت فقط مرز گروه‌های ستونی ساختاری نمایش داده خوهد شد.

بسیار خب تا به اینجا با تگ table و تگ‌ها و صفت‌های آن .و طریقه ایجاد یک جدول و گروه بندی‌های آن آشنا شدیم. در مطلب بعدی به کار با فرم‌ها و معرفی تگ <form> می‌پردازیم.

چه امتیازی به این مقاله می دید؟
نویسنده طاها دریس

جلسات دوره

نظرات کاربران

Sahar66

سلام وقتتون بخیر…
فرض کنیم که ما توی یک ردیف چند تا سلول داریم و میخوایم که یک صفت مثل رنگ آبی رو برای همشون اعمال کنیم، باز هم میشه از تگ col استفاده کرد؟

لقمان آوند

به td هایی که می خواید یک کلاس css نسبت بدید و در css رنگ آبی رو برای اون کلاس بزارید .

HassanTakno

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

سجاد دریس

سلام.
این یه نمونه.

&lt;table width=&quot;100%&quot; border=&quot;1&quot;&gt;
  &lt;col align=&quot;left&quot; /&gt;
  &lt;col align=&quot;center&quot; /&gt;
  &lt;col align=&quot;right&quot; /&gt;
  &lt;tr&gt;
 &lt;th&gt;#&lt;/th&gt;
 &lt;th&gt;Name&lt;/th&gt;
 &lt;th&gt;Age&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
 &lt;td&gt;346&lt;/td&gt;
 &lt;td&gt;Sajad Deris&lt;/td&gt;
 &lt;td&gt;17&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;

البته این تگiهای col و colgroup منسوخ شده iهستند و فقط مرورگرهای قدیمی ازشون پشتیبانی میکنن

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.