ساخت جدول در html

ساخت جدول با html

آموزش ساخت جدول در html و آموزش تگ tr، تگ td، تگ th و تگ table

تگ table و ساخت جدول

ساخت جدول در html کاربرد های زیادی در طراحی صفحات وب دارد که معولا در تمامی صفحات وب از جدول و تگ table استفاده شده است.

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

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

ما برای ساخت جدول به سه تگ دیگر هم نیازمندیم.

  • تگ hr
  • تگ tr
  • تگ td

تگ th مشخص می کند که جدول ما دارنده ی چند ستون باشد. و اینکه متونی که درون این تگ قرار می گیرد به صورت bold نمایش داده می شود.

تگ tr مشخص می کند که جدول ما دارنده ی چند طبقه باشد.

تگ td هم کاملا شبیه به تگ th است با این تفاوت که متون درون تگ td به بصورت bold نمایش داده نمی شوند.

برای این که بهتر متوجه شوید. به مثال زیر و خروجی آن دقت کنید.

خروجی

خروجی جدول با تگ table

توضیح کد مثال ساخت جدول در html

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

سپس درون تگ tr اول سه بار تگ th را تکرار کرده ایم که همان عناوین جدول هستند(name و…)

سپس در سه تگ tr باقیمانده سه بار از تگ td استفاده کرده ایم و با این کار هر کدام از طبقه ها را به سه ستون تقسیم کرده ایم. یعنی درون هر تگ tr هر چند تا تگ td قرار دهیم به تعداد تگ های td آن طبقه به ستون تقسیم می شود.

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

استفاده از کد های Css برای ساخت جدول

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

روش دوم به این گونه است که ما کد های css خود را درون تگی تحت عنوان تگ stye قرار می دهیم.

اما به مرورگر ها چگونه بگوییم که کدام استایل(منظور همان دستورات css است) برای کدام تگ است!؟

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

بعد از آن کل دستورات را درون باز و بسته شدن آکولاد {} قرار می دهید. و سپس برای آنها یک کلاس یا یک آی دی تعریف می کنیم.

برای اینکه کلاس تعریف کنید اول یک (.) قرار می دهید و بعد نام مرود نظر .

برای تعریف آی دی اول (#) و بعد نام مورد نظر

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

توضیحات بیشتر و مثال ها در مورد با نوشتن کدهای Css در html

به کد زیر دقت کنید.

همانطور که در کد بالا مشاهد می کنید ما درون تگ style کد های css خود را نوشته ایم و سپس یک کلاس که دارنده ی استایل color:red است را تحت عنوان testname تعریف نموده ایم.

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

به مثال زیر توجه کنید خروجی را مشاهده کنید و توضیحات را با دقت بخوانید.چون این بحث خیلی مهم است.(به احتمال زیاد هیچ چیز متوجه نمی شوید.)

توضیح کد بالا:

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

سپس شما مشاهده می کنید که تگ style بسته شده است.

بعد از آن هم  تگ p قرار وجود دارد و صفت class را در آن جای داده ایم. سپس ما مقدار این صفت را برابر با نام کلاسی که که در تگ style نوشته بودیم کردیم.

پس متون درون این تگ تحت تاثیر دستور color:red قرار می گیرند و رنگ قرمز پیدا می کنند.

خروجی:

hello world

 دسته بندی دستورات css با id در جلسه ی ساخت جدول زیبا در html

در بالا گفته شد که می توانیم دسته ای از کد های css را با کلاس و یا با آی دی نام گذاری کنیم. آی دی هم کامل شبیه به کلاس است با این تفاوت که ما برای اینکه تعدادی یا یک دستور css را با آی دی مورد نظر نام گذاری کنیم، باید اول (#) قرار دهیم و بعد نام مورد نظر دسته ای از کد های Css.

و اینکه اگر خواستیم دسته کد های css را که به روش آی دی نام گذاری شده اند برای یک تگ اعمال کنیم در آن تگ از صفت id استفاده می کنیم. و نام آی دی که برای دسته ای از کدها ی css قرار داده ایم را به عنوان مقدار این صفت قرار می دهید.

کد بالا هم همان خروجی کد قبلی را دارد. و اصلا تفاوتی در خروجی در آنها دیده نمی شود.

اگر متوجه نشدید نگران نباشید و این موارد را نمی توان با خواند توضیح آموخت و خودتان باید با این موارد کار کنید. و اینکه در جلسات آینده مقدار بیشتری توضیح داده خواهد شد، حال برای اینکه به صورت کامل همکاری css و همکاری html را با هم ببینید به مثال های زیر توجه کنید.

زمانی که شما قصد داشته باشید چند دستور css را دورن یک کلاس یا id قرار دهید کافی آنها را با سمیکالن (;) از هم جدا کنید.

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

مثال هایی برای درک بهتر

گذاشتن استایل بر روی تگ ها به صورت مستقیم.

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

برای این کار کافی است که فقط نام خود تگ مورد نظر را بنویسید. و سپس دستورات مورد نظر را دورن باز و بسته شدن آکولاد بنویسید مانند زیر:

مثال

 

خروجی

hello world

نحوه ی گذاشتن حاشیه بر روی جداول در جلسه ی آموزش ساخت جدول در html

برای این کار ما از دستور  border در css استفاده می کنیم.

و بعد یک مقدار بر جسب px یا % و یا هر چیز دیگری را به  آن می دهیم. این مقدار اندازه ی ضخامت آن است.

بعد از اینکه میزان ضخامت را وارد کردید عبارت solid را بنویسید. سپس در جلوی solid رنگی که برای حاشیه مد نظر است را قرار دهید.

کد ما باید به صورت زیر باشد.

 

آخرین خروجی در جلسه ی ساخت جدول در html

خروجی ما

 

 

نوشتهٔ قبلی
صفت alt صفت width صفت height صفت dir و چند پروژه با این صفت ها
نوشتهٔ بعدی
ساخت جدولی زیبا در html

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.

فهرست