نظاره گر پیشرفت کسب و کار خود باشید ، وقتی اسپیناس وب جرئی از تیم شما می شود

در این جلسه در طراحی سایت با کار با جداول در HTML آشنا می شویم:
گفتیم که یک جدول در html با تگ <table> ساخته می شود و از تگ <tr> برای ساختن ردیف و از تگ <th> و <td> برای ساختن ستون ھای جدول استفاده می کنیم.
گفتیم که ھمیشه تگ ھای <th>که برای نوشتن تیترھای جدول ( heading table ) و تگ <td> که برای نوشتنداده ھای جدولی ساده ( data table ) استفاده میکنیم. حتما باید در تگ <tr> قرار بگیرند.
با صفت ھای این تگ ھا آشنا شدیم از جمله align , bgcolor , border و … که کار ھر کدام را نیز در جلسه قبلتوضیح دادیم. در این جلسه با طریقه گروه بندی سلول ھا آشنا خوھیم شد.
تگ <caption> : از این تگ برای ایجاد یک عنوان برای جدول استفاده می شود. این تگ باید بلافاصله بعد از تگ:

آغازین table و قبل از اولین ردیف جدول قرار گیرد. به صورت زیر:

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

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

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

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

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

ما می توانیم سلول ھای جدول را به صورت گروھی از ستون ھا و گروھی از ردیف ھا تقسیم بندی کرده و خواصمشابھی را به آن ھا اعمال کنیم. گروه بندي ردیفیما می توانیم ردیف ھای جدول را به سه نوع گروه ردیفی تقسیم کنیم : head , body , foot و برای اینکار از سه تگ<thead> , <tbody> , <tfoot> استفاده می کنیم.
ھر سه این عنصر ھا داری صفات align و valign می باشند که در جلسه قبل به آن ھا اشاره شده است.
معمولا از گروه بندی ھای ردیفی ھنگامی استفاده می شود که جدول بسیار طولانی است. یکی از مزیت ھای این نوع گروه بندی ھنگام print گرفتن از این نوع جدول ھاست که معمولا چند صفحه ای می شوند و میخواھیم که عنوانو پایه جداول در ھمه صفحات چاپی تکرار شوند. یک نمونه از این گروه بندی ردیفی را در زیر مشاھده می کنید.

<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<tr>
</thead>
<tfoot>
<tr>
<td>Edit by: Saj ad</td>
<td>Website:sitedp. com</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Janny</td>
<td>j anny@websitename. com</td>
</tr>
</tbody>
<tbody>
<tr>
<td>John</td>
<td>j ohn@websitename. com</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> ایجاد می شوند. گروه ھای ستونی غیر ساختاری می گویند.
تفاوت گروه ھای ساختاری و غیر ساختاری است که از صفت “group”=rules برای نمایش مرز گروه ھا در جداول استفاده می شود است. در این صورت فقط مرز گروه ھای ستونی ساختاری نمایش داده خوھد شد.
بسیار خب تا به اینجا با تگ table و تگ ھا و صفت ھای آن .و طریقه ایجاد یک جدول و گروه بندی ھای آن آشنا شدیم. در مطلب بعدی به کار با فرم ھا و معرفی تگ <form> می پردازیم

طراحی سایت اسپیناس همیشه سعی در استفاده از به روز ترین تکتینک ها و ابزارها در  طراحی سایت دارد  در اسپیناس از تکنولوژی ها روز دنیا مانند CSS3 , HTML5 , Jquery , JAVASCRIPT   در طراحی وب سایت استفاده می شود و همچنین زبانهایی مانند PHP , ASP  در شرکت اسپیناس مشتری مداری حرف اول را می زند