کار با جداول در HTML 2

 

یادآوری :در بخش قبل با روش ایجاد یک جدول آشنا شدیم.

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

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

 data )  ( table مورد استفاده قرار می گیرند باید در تگ  <tr> قرار بگیرند.

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

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

 

1 <table border="1">
2 <caption> the table caption come here </caption>
3 <tr>
4 .
5 .
6 .

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

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

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

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

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

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

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

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

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

 

1 <table border="1">
2     <thead>
3          <tr>
4              <th>Name</th>
5              <th>Email</th>
6          <tr>
7     </thead>
8  
9     <tfoot>
10          <tr>
11              <td>Edit by: Sajad</td>
12              <td>Website: 7Learn.com</td>
13          </tr>
14     </tfoot>
15  
16     <tbody>
17          <tr>
18              <td>Janny</td>
19              <td> این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید </td>
20          </tr>
21     </tbody>
22  
23     <tbody>
24          <tr>
25              <td>John</td>
26              <td> این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید </td>
27          </tr>
28     </tbody>
29  
30 </table>

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

table thead tbody tfoot tag <a  style=آموزش HTML (قسمت 8) : کار با جداول در HTML (جلسه دوم)" title="آموزش HTML (قسمت 8) : کار با جداول در HTML (جلسه دوم) 7learn.com" width="378" height="247" />

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

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


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

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

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

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

 

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

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

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

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


1 <table>
2  <colgroup align="center">
3      <col />
4  </colgroup>
5  
6 <colgroup align="left">
7      <col />
8      <col />
9      <col />
10  </colgroup>
11  
12 <colgroup align="right">
13      <col />
14      <col />
15  </colgroup>
16  .
17  .
18  .

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

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

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

ارسال نظر