آموزش کامل کدنویسی Html - جلسه دوم |جدول ها|

ساختار کلی جدول ها:

برای ایجاد جدول یا همون Table از تگ دو طرفه <table></table> استفاده می کنیم.

حالا ساختار کلی را داریم اما برای درج ستون و جدول چیکار کنیم؟

دو تگ دیگه به اسم های <td> و <tr> هم داریم که کارشون همینه، حالا یکم درباره اش توضیح میدم تا بیشتر متوجه شید.

خاصیت های تگ Table :

• width
• height
• border
• background
• bgcolor
• cellpadding
• cellspacing

width :که عرض جدول ما هست، و میتونه به صورت یک عدد یا درصد پر بشه.

height :طول جدول ما هست و میتونه به صورت یک عدد یا درصد پر بشه.

border :به معنای حاشیه یا قاب دور جدولمون هست، اکثر اوقات مقدار کمی مثل 2 یا 3 میگیره.

background :همون طور که از اسمش پیدا است پس زمینه ما را تعیین میکنه که در این حالت حتما باید عکس باشه.

bgcolor :رنگ پس زمینه ما را تعیین میکنه و میتونه به صورت یک کد هگز رنگ باشه.

اما دو خاصیت مهم cellpadding و cellspacing :

cellpadding :به معنای مقدار فاصله محتویات جدول تا کنار سلول ها.

cellspacing :فاصله هر سلول تا سلول کناری.

اما این تگ بدون تگ های <td> و <tr> هیچ کاری نمیکنه.

تگ <tr>:

برای ایجاد یک ردیف به کار میره، یعنی هر جا یک تگ <tr></tr> زدید اونجا یک ردیف اضافه میشه.

نمونه:

الان ما تو جدول بالا 3 تا تگ <tr></tr>زدیم:

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

تگ <td>:

 این تگ داخل تگ <tr> استفاده میشه، مثلا اگر داخل یک <tr> سه عدد تگ <td> بزنیم، در داخل اون ردیف 3 تا ستون اضافه میشه.مثال:

اینم کدش تا بهتر متوجه بشید.

خاصیت های تگ <td>:

• Rowspan
• Colspan
• بقیه خاصیت ها عمومی هستن و مثل همون تگ table میمونه.

این دو خاصیت خیلی مهمن و تا اخر آموزش هامون باهاش کار داریم:

Rowspan: این خاصیت دو ردیف زیر هم را یکی میکند.مثال:

همون جدول قبلی اما این دفعه قسمت 3 و 6 را یکی کردیم، یعنی به تگ td3 خاصیت Rowspan دادیم و td6 را به طور کلی پاک کردیم.

اینم کدش:

Colspan: این خاصیت دقیقا بر عکس قبلی عمل می کنه و دو ستون کنار هم را یکی می کند.

بازم جدول قبلی اما این دفعه به td3 خاصیت Colspan دادیم و td2 را پاک کردیم.

دقت کنید مقداری که در Colspan و Rowspan قرار میدید بستگی به تعداد ردیف ها و ستون هایی هست که میخواید ترکیب کنید که در تمام مثال های بالا ما اون را 2 قرار دادیم چون 2 ردیف و ستون را با هم ترکیب کردیم.

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

حالا کسایی که نصب کردن وارد دریم ویور بشن و ادامه آموزش را دنبال کنن.

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

میسازه.خوب حالا صفحه ای شبیه عکس زیر داریم:در اینجا اولین گزینه یعنی HTML را انتخاب می کنیم.حالا خود نرم افزار یک صفحه خام که شامل body,head ,...

تقریبا تمام توضیحات مورد نیاز روی عکس هست.

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

Rows :تعداد ردیف های هست که میخواید باشه، که بستگی داره بخواید چه قالبی طراحی کنید.

Columns :تعداد ستون های هست که میخواید باشه و معمولا 3 تا میزارن!

Width :عرض قالب که شامل دو بخشه:

• Percent : این حالت عرض قالب را بر اساس درصد معلوم میکنه و هر مقداری بزارید تبدیل به درصد میشه.
• Pixels :این حالت عرض قالب را براساس پیکسل معلوم میکنه.

Border : مقدار قابی هست که میخوایم دور تا دور جدول را بگیره.

cellpadding و cellspacing :قبلا درباره این دوتا توضیح دادیم.

فعلا با بقیه گزینه ها کاری نداریم.

به عنوان آخرین نکته اینم بگم که برای راحت تر شدن کار Rowspan و Colspan یه راه حل ساده تر وجود داره.برای این کار به عکس زیر توجه کنید.

به ناحیه ای که تو عکس مشخص کردم توجه کنید.این قسمت کار Rowspan و Colspan را خیلی ساده تر میکنه:

برای این کار سلول هایی که میخواید یکی کنید را با استفاده از کلید Ctrl انتخاب کنید (توجه داشته باشید که حتما سلول های انتخابی باید کنار هم باشن) و سپس روی گزینه مشخص شده روی تصویر کلیک کنید.

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

به عنوان تمرین هم سعی کنید همچین جدولی بسازید و تا حد امکان اون را پر کنید.

امیدوارم از آموزش امروز نهایت استفاده را ببرید.