خب امروز در مورد جداول(table) در html میخوایم صحبت میکنم ...
جدول بندی در html شکل خاصی داره برای شروع یک جدول در html باید از تگ <table> سپس محتویات جدول و برای پایان از تگ </table> استفاده میشود . متاسفانه در اینجا نمیشه از جداول به شکل عملی مثل زد و خودتون باید یک فایل html ایجاد کنید و کد ها رو خودتون تست کنید ...
خب برای اینکه به یک جدول با چند ستون افقی ایجاد کنید باید از تگ <td> در قالب تگ اصلی استفاده نمایید، این تگ که مخفف table data هستش برای ایجاد ستون های افقی کاربرد داره لطفا کد زیر رو خودتون تست کنید تا با منظور بهتر ارتباط برقرار کنید
<table> <td> یک </td> <td> دو </td> <td> سه </td> </table>
نیتجه بالا به شکل : یک دو سه خواهد شد و هیچ چیز مشاهده نمیشود ، حالا برای اینکه جدول شکل پیدا کند باید یک خط بردار بهش اضافه کنید پس کد زیر رو جایگزین و تست کنید
<table border="1"> <td> یک </td> <td> دو </td> <td> سه </td> </table>
حالا جدول ما شمای بهتری پیدا کرد . حالا ما یه جدول داریم دارای سه ستون افقی 
خب حالا میخوایم یک جدول که دارای سه ستون افقی و دو ستون عمودی هست که دارای 6 خانه هست ایجاد کنیم در اینجا باید از یک تگ جانبی جدید به نام <tr> استفاده کنیم ، این تگ وظیفه داره ستونی های افقی که بعدش میاد رو در یه ستون عمودی بارگزاری کنه (حاظرم شرط ببندم نفهمیدید چی گفتم چون خودمم نفهمیدم چی گفتم
)
دور از شوخی به نمونه زیر توجه کنید :
<table border="1"> <td> یک </td> <td> دو </td> <td> سه </td> <tr> <td> چهار </td> <td> پنج </td> <td> شش </td> </tr> </table>
نتیجه میشه یه جدول با دو ستونه عمودی و سه ستون افقی 
جدول همش همین بود ، از اینجا به بعد با امکانات که تگ های این قسمت در دسترس ما میزارن آشنا میشیم .
- اول از همه خاصیت border : این خاصیت کادر جدول رو مشخص میکنه در صورتی که گذاشته نشه معادل 0 خودبخود قرار میگیره یعنی جدول هیچ کادری نداره و شمای کلی جدول مشخص نمیشه این خاصیت در تگ <table> باید به کار برده شود
- خاصیت bgcolor : این تگ اختصاصی جداول نیست جاهای زیادی کاربرد داره،این تگ رنگ زمینه هر قسمتی که گذاشته بشه رو مشخص میکنه از این تگ هم در <table> هم در <tr> و هم در <td> میتوان استفاده کردو توش میشه از نام رنگ ها و کد هگزادیسمال رنگ ها استفاده کرد
- خاصیت cellspacing : این خاصیت فضای خالی بین ستون های جدول رو مشخص میکنه در صورتی گذاشته نشه با توجه به تنظیمات پیش فرض معادل عددی نزدیک دو قرار داده میشه یعنی به طور عادی یه فاصله کوچیک بین ستون های جداولتون در صورتی که این خاصیت معادل 0 قرار نگیره وجود داره ،این خاصیت در تگ <table> باید به کار برده شود
- خاصیت cellpadding : این خاصیت یک فضای خالی بین محتویات ستون ها با کادر ستون ایجاد میکنه، در صورت گذاشته نشدن این تگ معادل 0 طبق تنظیمات پیش فرض قرار میگیره یعنی محتویات ستون ها خر به خر میچسبه به جداول این خاصیت در تگ <table> باید به کار برده شود
- خاصیت align : این خاصیت مختص جداول نیست و توی تگ های زیادی از html میشه استفاده کردش اینجا معرفیش میکنم که سئوالی توی ذهن شما نمونه ، این خاصیت جهت قرار گیری جدول رو مشخص میکنه شما به طور مختص میتونید سه مقدار right,center,left به این خاصیت بدید .از این خاصیت میتوانید در تگ <table> و <td> استفاده نمایید.
- خاصیت valign : این خاصیت را در تگ <td> به کار ببرید ريا، این خاصیت وضعیت عمودی نوشته ها را مشخص میکند که در وسط جدول باشد پایین جدول باشد یا در بالای جدول در این خاصیت میتوانید سه مقدار top,middle,bottom را قرار بدید.
- خاصیت های width & height : این خواض رو میشه توی تگ اصلی جدول <table> نیز استفاده کرد با این خاصیت ها میتونید طول و ارتفاع جدولتون رو تغییر بدید ولی پیشنهاد اینه که از این خاصیت توی تگ <td> بیشتر استفاده کنید این نکته را هم در نظر بگیرید این خاصیت را اگر به تگ <td> به یک سطر داده بهش ستون های زیرین آن هم به آن خاصیت تغییر میکنند البته در صورتی که ستون های زیرین اندازه داده نشده باشند .
- خاصیت های rowspan & colspan : این دو خاطیت مختص تگ <td> هست .با خاصیت rowspan میتوان چند سطر ستون که به شکل عمودی هست را یکی کرد و با خاصیت colspan میتوان چند سطر ستون را به شکل افقی به هم متصل کرد.
خب با توجه به دانسته های بالا مثال زیر را اجرا و مقدار خاصیت ها رو تغییر بدید تا بیشتر این مطلب رو فرا بگیرید ...
<table border="1" bgcolor="#eeeeee" cellspacing="0" cellpadding="4" align="center" width="500" height="150"> <td align="center" colspan="3"> یک </td> <tr bgcolor="brown"> <td align="right" valign="top" width="200"> دو </td> <td align="center" valign="middle" rowspan="2"> سه </td> <td align="left" valign="bottom" width="200"> چهار </td> </tr> <tr> <td bgcolor="lightgreen"> پنج </td> <td bgcolor="green"> شش </td> </tr> </table>
نتیجه به شکل زیر خواهد شد :
، خب اینم از مبحث جداول ببخشید که امروز یکم گنگ توضیح دادم متاسفانه مخم یکم ویروسی شده
توی جلسه بعد در مورد فرم ها صحبت میکنم اگر عمری به دنیا باشد
برچسبها:













