Table ها
همیشه برای ساختن هر سازه ای احتیاج به یک استخوانبندی وجود دارد. این موضوع در مورد یک صفحه وب نیز صادق است و برای ساختن یک صفحه وب ( با توجه به ایده ما برای طراحی ظاهر آن صفحه ) احتیاج به یک ساختار کلی است که در اکثر موارد از دید کاربران و باز دیدکنندگان صفحات وب مخفی می ماند.
این ساختار کلی در اکثریت موارد به وسیله 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>
ملاحضه می نمایید که رنگ پس زمینه جدول به رنگ قرمز است ولی رنگ سلول ستون اول – سطر اول به رنگ آبی است و چون خودش دارای رنگ پس زمینه است از رنگ پس زمینه کل جدول پیروی نمی کند.
Table ها دارای خصوصیات بسیاری هستند که در طول تمرین با آنها آشنا خواهید شد و آنها را تجربه می کنید.