Table ها

شروع آموزش html جلسه ششم

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

این ساختار کلی در اکثریت موارد به وسیله table  ها و در طراحی مدرن به وسیله تگ های div  (که کاربرد بسیار زیادی در طراحی و ساخت صفحات وب دارد) صورت می گیرد.

در اینجا به table  ها می پردازیم و در قسمتهای آینده به صورت مفصل به تگهای div خواهیم پرداخت.

Table  ها به وسیله تگ  <table>  به مرورگرها معرفی میشوند و دارای ستون وسطر هستند.

ستون ها به وسیله تگهای <td>  و سترها به وسیله تگهای <tr>  مشخص میشوند.لازم به ذکر است که تگهای <tr>  و <td> به تنهایی کاربردی ندارند و لزوما باید همراه تگ <table> در کدها قرار بگیرند.

در زیر نمونه ای از یک  table  با یک ستون و یک سطر می بینید.

<table>

<tr>

<td></td>

</tr>

</table>

به نحوه باز شدن وبسته شدن تگها توجه کنید ( قانون تگهای باز و بسته – قسمت اول آموزش html )

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

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

طول و عرض table ها

دو خصوصیت width    و height  این توانایی را به ما میدهد که طول و ارتفاع این جدولها را تععین کنیم.

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

<table width=”۲۰۰” height=”۲۰۰”>

<tr>

<td></td>

<td></td>

</tr>

</table>

این جدول دارای دو ستون و یک سطر با ارتفاع  و عرض ۲۰۰ پیکسل است.

<table width=”۸۰%” height=”۸۰%”>

<tr>

<td></td>

<td></td>

</tr>

</table>

صوصیت Border

مرز بین این سطر ها وستونها با استفاده از خطوط (border  ) مشخص میشود که میتوان با استفاده از این خصوصیت آن را کنترل کرد.

<table width=”۲۰۰” height=”۲۰۰” border=”۱”>

<tr>

<td></td>

<td></td>

</tr>

</table>

مقدار خصوصیت    border نشان دهنده ضخامت آن است ) واحد پیکسل (  و در صورتی که مقدار آن صفر باشد ( border=”۰”  ) هیچ border نمایش داده نمیشود .

Align و یا چینش در سطرها و ستون ها

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

به طور مثال :

<table width=”۲۰۰” height=”۲۰۰” border=”۰” align=”center”>

<tr>

<td>ستون اول – سطر اول</td>

<td> ستون دوم – سطر اول </td>

</tr>

<tr>

<td> ستون اول – سطر دوم </td>

<td> ستون دوم – سطر دوم </td>

</tr>

</table>

در این مثال جدول از دو سطر و دو ستون تشکیل شده است که در مثال مشخص شده است.

کلیه سطر ها وستون ها از چینشی که به تگ table  در ابتدای مثال داده شده است پیروی میکنند و چینش همه سطرها و ستونها center  است .

میتوان به هر یک از سطرها و ستونها نیز به تنهایی چینش و align  داد به مثال زیر توجه کنید:

<table width=”۲۰۰” height=”۲۰۰” border=”۰” align=”center”>

<tr>

<td   align=”right”>ستون اول – سطر اول</td>

<td    align=”left”> ستون دوم – سطر اول </td>

</tr>

<tr>

<td> ستون اول – سطر دوم </td>

<td> ستون دوم – سطر دوم </td>

</tr>

</table>

در مثالها ملاحضه میکنید که نوشته هایی که در بین تگهای <td> </td>  نوشته شده اند در آن سلول نمایش داده میشوند و در صورتی که هیچ عنصری در بین این تگها نباشد سلول به صورت خالی نمایش داده می شود.

عناصر کوچکتر تشکیل دهنده هر جدول را سلول می نامیم.در مثال بالا جدول دارای چهار سلول است.

Table های تو در تو

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

<table width=”۲۰۰” height=”۲۰۰” border=”۰” align=”center”>

<tr>

<td   align=”right”>ستون اول – سطر اول</td>

<td    align=”left”>

<table width=”۲۰۰” height=”۲۰۰” border=”۰” align=”center”>

<tr>

<td   align=”right”>ستون اول – سطر اول </td>

<td    align=”left”> ستون دوم – سطر اول </td>

</tr>

<tr>

<td> ستون اول – سطر دوم </td>

<td> ستون دوم – سطر دوم </td>

</tr>

</table>

</td>

</tr>

<tr>

<td> ستون اول – سطر دوم </td>

<td> ستون دوم – سطر دوم </td>

</tr>

</table>

در این مثال ملاحظه می کنید که یک جدول با ۲ سطر و ستون داخل یکی از سلولهای جدول بالاتری خود با ۲ سطر و ستون قرار گرفته این قابلیت کمک بسیاری به طراحان صفحات وب در چینش این صفحات می کند.

Background color ( رنگ پس زمینه )

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

<table width=”۲۰۰” height=”۲۰۰” border=”۰” align=”center” bgcolor=”red”>

<tr>

<td   align=”right” bgcolor=”blue”>ستون اول – سطر اول</td>

<td    align=”left”> ستون دوم – سطر اول </td>

</tr>

<tr>

<td> ستون اول – سطر دوم </td>

<td> ستون دوم – سطر دوم </td>

</tr>

</table>

ملاحضه مینمایید که رنگ پس زمینه جدول به رنگ قرمز است ولی رنگ سلول ستون اول – سطر اول به رننگ آبی است و چون خودش دارای رنگ پس زمینه است از رنگ پس زمینه کل جدول پیروی نمی کند.

‍‍پایان آموزش html جلسه ششم