فروردین, ۱۳۹۸ بدون نظر HTML, طراحی سایت

آموزش جدول در HTML

جدول های HTML به نویسندگان وب اجازه می دهند تا داده هایی مانند متن، تصاویر، لینک ها، جدول های دیگر و غیره در ردیف ها و ستون ها تنظیم کنید. جدول های HTML با استفاده از برچسب <table> ایجاد می شوند که در آن برچسب <tr> برای ایجاد ردیف ها و برچسب <td> برای ایجاد داده های سلول ها استفاده می شوند.

مثال:

<!DOCTYPE html>
<html> 
<head> 
<title>HTML Table Cellpadding</title> 
</head> 
<body> 
<table border=”1″ cellpadding=”5″ cellspacing=”5″> 
<tr> <th>Name</th> <th>Salary</th> </tr> 
<tr> <td>Ali</td> <td>5000</td> </tr>
<tr> <td>Reza</td> <td>7000</td> </tr> 
</table> 
</body> 
</html> 

 

در اینجا border یک ویژگی از برچسب <table> می باشد و برای قرار دادن حاشیه در پهنای همه ی سلول ها استفاده می شود. اگر به حاشیه احتیاج نداشته باشید می توانید از border=”0″ استفاده کنید.

تیتر جدول

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

ویژگی های cellpadding و cellspacing

دو ویژگی به نام های Cellpadding و Cellspacing وجود دارند که برای تنظیم محیط سفید در سلول های جدول استفاده می شوند. ویژگی cellspacing عرض حاشیه را تعریف می کند، در حالیکه cellpadding فاصله ی بین حاشیه ی سلول و محتوای آن را تعریف می کند.

ویژگی های colspan و rowspan

اگر بخواهید دو یا بیشتر از دو ستون را با هم تلفیق کنید از ویژگی colspan استفاده می کنید. به طور مشابه اگر بخواهید دو یا بیشتر از دو ردیف را در یک ردیف تلفیق کنید از rowspan استفاده کنید.

پس زمینه ی جدول

می توانید به دو روش زیر برای جدول خود زمینه ای تنظیم کنید .
ویژگی Bg color می توانید رنگ زمینه را برای همه ی جدول و یا تنها برای یک سلول تنظیم کنید.
ویژگی background می توانید یک تصویر را برای کل جدول یا تنها یک سلول تنظیم کنید.
همچنین می توانید با استفاده از ویژگی bordercolor رنگ حاشیه را نیز تنظیم کنید.

طول و عرض جدول

شما می توانید طول و عرض جدولی را با استفاده از ویژگی های width و height تنظیم کنید. شما می توانید طول و عرض جدول را به پیکسل و یا متناسب با درصد صفحه ی جاری تنظیم کنید.

شرح جدول

برچسب caption یک توضیح یا یک تیتر برای جدول می باشد که در بالای جدول نمایش داده می شود. این برچسب در ورژن های جدید HTML/XHTML توصیه می شود.

تیتر، بدنه و پاورقی جدول

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

سه عنصر برای مجزا کردن عنوان، بدنه و فوت در یک جدول عبارتند از:

  • <thead> برای ایجاد یک تیتر مجزا
  • <tbody> برای نشان دادن بدنه ی اصلی جدول
  • <tfoot> برای ایجاد یک پاورقی مجزا در یک جدول

یک جدول برای نشان دادن صفحات و گروه های مختلف یک داده، ممکن است دارای عناصر <tbody> مختلفی باشد، اما ظاهر شدن برچسب های <thead> و <tfoot> قبل از <tbody> زیاد مهم نیست.

برچسب ها

ارسال نظر شما

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