دنیای برنامه نویسی و اپلیکیشن

baner-telegram
شما اینجا هستید : صفحه اول » طراحی سایت » آموزش HTML » آموزش ساختن جدول ( Table ) در HTML
آموزش ساختن جدول ( Table ) در HTML

آموزش ساختن جدول ( Table ) در HTML

در این قسمت از آموزش HTML به آموزش ساختن جدول در html می پردازیم :

هر چند که دیگر از جدول برای طراحی وب استفاده نمی شود بنا به دلایل و از Div به جای آن استفاده می شود ولی بعضی از جاها نیاز است تا از جدول استفاده کنیم . برای ایجاد جدول باید از تگ <table> استفاده کنیم ، این تگ را جایی قرار دهید که می خواهید آن جا جدول درست کنید و در پایان جدول هم از تگ پایانی آن یعنی <table/>  استفاده کنید . همان طور که می دانید در جدول یک یا چندتا سطر داریم و همین طور یک یا چندتا ستون داریم همانند تصویر زیر :

آموزش ساختن جدول ( Table ) در HTML

آموزش ساختن جدول ( Table ) در HTML

برای این که جدول را کامل کنیم باید سطر و ستون داشته باشیم ، برای درست کردن ستون از تگ <td> استفاده می کنیم و برای درست کردن سطر از تگ <tr> استفاده می کنیم . همانند کدهای زیر که در این کد من تعداد چهارتا سطر و چهارتا ستون ایجاد کرده ام :

در کد بالا عنصر border ضخامت کادر جدول را معین می کند ، اگر از این عنصر استفاده نکنید ، در ظاهر شاید جدول ما تفاوتی با یک نوشته ساده نداشته باشد . ولی اگر از این عنصر استفاده کنید و مقدار آن را به صورت عددی معین کنید می بینید که کادر جدول نمایان می شود . همان طور که می بینید چهارتا ستون در هر سطر یا ردیف داریم ، پس تگ ستون را داخل تگ سطر قرار می دهیم . نتیجه کدهای بالا :  

سطر اول ، ستون اول سطر اول ، ستون دوم سطر اول ، ستون سوم سطر اول ، ستون چهارم
سطر دوم ، ستون اول سطر دوم ، ستون دوم سطر دوم ، ستون سوم سطر دوم ، ستون چهارم
سطر سوم ، ستون اول سطر سوم ، ستون دوم سطر سوم ، ستون سوم سطر سوم ، ستون چهارم
سطر چهارم ، ستون اول سطر چهارم ، ستون دوم سطر چهارم ، ستون سوم سطر چهارم ، ستون چهارم

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

عناصری که میتوان در تگ <table> استفاده کرد :

cellspacing : برای ایجاد فاصله بین سلول ها عدد مورد نظر را برابر مقدار این عنصر قرار می دهیم . به این صورت :

اینم نتیجه اش :

سطر اول ، ستون اول سطر اول ، ستون دوم
سطر دوم ، ستون اول سطر دوم ، ستون دوم

cellpadding : از این شناسه برای افزودن فضای خالی در داخل یک سلول استفاده می شود . به این صورت :

اینم نتیجه اش :

سطر اول ، ستون اول سطر اول ، ستون دوم
سطر دوم ، ستون اول سطر دوم ، ستون دوم

می توان هرد مثال بالا را باهم نوشت یعنی هر دو شناسه بالا را در تگ جدول قرار داد . هم چنین شما می توانید هر چیزی را که بخواهید داخل سلول ها وارد کنید . مانند عکس ، لینک ، پاراگراف و … برای این کار کافی است که کد مورد نظر را بین تگ <td> و <td/> وارد کنید .

ادامه آموزش را در جلسه بعد پی خواهیم گرفت .

برای یادگیری بهتر می توانید به سایت  W3school مراجعه کنید .

موفق باشید .

پیشنهاد می کنیم حتما بخوانید :

درباره : رضا طوماری

دانشجوی رشته نرم افزار ، عاشق برنامه نویسی

نظرات کاربران :



جواب سوال چیه ؟ *