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

نویسنده: بابک حبیبی
تاریخ: ۱۳۹۱ - ۰۵ - ۰۴
دسته بندی: HTML اچ تی ام ال

در ادامه ی آموزش 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

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

Caption در HTML

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

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

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

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

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

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

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

برچسب: - - - -

درباره ی

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

۲ نظر به “آموزش HTML – جلسه ششم – Table” ثبت شده است

  1. امیر گفت:

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

    • بابک حبیبی گفت:

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