window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-22241525-4'); آموزش HTML – جلسه ششم – Table

آموزش HTML – جلسه ششم – Table

در ادامه ی آموزش HTML که پایه ی طراحی سایت هست به بخش جدول سازی Table و خصوصیات پیشرفته ی آن می پردازیم.

Table

برای ساختن هر سایت بر پایه ای HTML از ساختار اصلی Table برای جدول سازی و قسمت کردن و مرتب کردن سایت استفاده می شده است . در حال حاضر Div بیشتر در این امر مشارکت دارد که بعد ها به آن می پردازیم ولی هنوز نیز Table کاربرد دارد.پس باید طریقه ی کد نوشتن Table و ساختن جداول را با Table بدانیم.برای درست کردن یک Table به این صورت عمل می کنیم:


<table>

</table>

Table row

بعد از اینکه ساختار کل Table را پیاده سازی کردیم باید شروع به درست کردن اجزای Table کنیم.یکی از تگ های مهم برای ساخت جزئیات Table تگ tr یا همون ردیف هست که به ازای هر تگ یک ردیف در جدول ساخته خواهد شد.تگ tr


<table>
 <tr>
 </tr>
</table>

Table data

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


<table>
 <tr>
 <td>zoopirnet</td>
 <td>HTML</td>
 </tr>
</table>

Table heading

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


<table border="1">
 <tr>
 <th>Version</th>
 <th>Published year</th>
 </tr>
 <tr>
 <td>HTML+</td>
 <td>1993</td>
 </tr>
</table>

Heading در HTML


Captions

این تگ برای قرار دادن عنوان بیرون جدول هست.تگ:Caption


< table border="1">
 <caption>HTML History</caption>
 <tr>
 <th>Version</th>
 <th>Published year</th>
 </tr>
 <tr>
 <td>HTML+</td>
 <td>1993</td>
 </tr>
</table>

Caption در HTML

بعضی خصوصیات Table 

Border : حاشیه ی جدول که اگر بطور پیش فرض ۰ است و نمایش داده نمیشود مثلا ما در مثال بالا Border را مساوی ۱ قرار دادیم که نمایش داده شود.

bgcolor : برای استفاده ی رنگ در پیش زمینه هست.بطور مثال : bgcolor=”#00FF00″

cellpadding : برای قرار دادن حاشیه خالی بین سلول هاست.بطور مثال : cellpadding=”10″

cellspacing : برای تعیین فاصله بین سلول هاست.بطور مثال : cellspacing=”10″

align : برای تراز بندی جداول بکار می رود.بطور مثال : align=”right”

width : برای تعیین عرض جداول و سلول ها بکار میرود. بطور مثال :width=”400″

بابک حبیبی @http://twitter.com/babakhabibi

بابک حبیبی،دانشجوی لیسانس نرم افزار،برنامه نویس پی اچ پی،طراح وب،یه سری تخصص هم در شبکه و مباحث امنیتی دارم.

View Comments

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

    • سلام
      در تلاش هستیم فایل های ویدئویی آموزشی رو نیز اضافه کنیم ولی متاسفانه از کمبود وقت فعلا داریم ضربه می خوریم.در اولین فرصت حتما اینکارو خواهیم کرد

Comments are closed.

Share
Published by
بابک حبیبی @http://twitter.com/babakhabibi
Tags: HTML Webdesign اچ تی ام ال طراحی سایت طراحی وب

Recent Posts

  • اخبار سایت

شروعی دوباره برای زوپیرنت

با سلام. با عرض پوزش فراوان بدلیل غیبت طولانی ما که دلیل‌های ریز و درشتی داشت. خیلی خلاصه و سریع…

5 سال ago
  • اندروید

چگونه حافظه ی داخلی اندرویدتان را آزاد کنید

اکثر موبایل هایی که سیستم عامل اندروید بر رویشان نصب هست دارای حافظه داخلی محدودی هستند و بعد از مدتی…

6 سال ago
  • توییتر
  • فایرفاکس
  • فیس بوک

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

وقتی که فعالانه به زندگی مجازی بپردازید کم کم تعداد سایت های که عضو میشید زیاد خواهد شد مخصوصا سایت…

6 سال ago
  • PHP برنامه نویسی

آموزش PHP – حلقه ها – جلسه هفتم

در ادامه مبحث آموزش PHP امروز به آموزش حلقه ها می رسیم که با ذکر مثال دستوراتن While , for…

7 سال ago
  • بازی

چرا در هنگام بازی در ویندوز دچار مشکل می شوید؟

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

7 سال ago
  • ویکی پدیا

پربازدیدترین صفحات فارسی در ویکی پدیا ۲۰۱۲

با تمام شدن سال میلاد 2012 آماری از پر بازدید ترین صفحات ویکی پدیا در زبان ها مختلف ارائه شده…

7 سال ago