۱۳۹۲/۱/۲۱، ۱۳:۰۰:۳۶ عصر
تگ < img > :
تگ < img > :
از تگ < img > برای قرار دادن عکس يا تصاوير بر روی صفحه استفاده می شود . تگ < img > فقط خصوصيات را نگهداری کرده و دارای تگ پايانی نيست ( در همان تگ ابتدايی بسته می شود ) .
نکات مهم تگ < img > :
در تگ < img > با خاصيت src به مکان فايل عکسی که قرار است نمايش داده شود اشاره می کنيم . تصاوير HTML در مکانی غير از صفحه اصلی ذخيره شده و در هنگام نمايش صفحه از مبدا ، فراخوانی می شوند .
با استفاده از خاصيت alt تگ < img > می توان از قبل يک متن جايگزين تعيين کرد ، که چنانچه مرورگر به هر دليلي نتوانست عکس را نمايش دهد ، به جای آن متن جايگزين را نشان دهد . اين متن در هنگام قرار گيری موس بر روی عکس در يک کادر زرد رنگ نيز نمايش داده می شود . متن جايگزين می تواند شامل توضيحی راجع به عکس اصلی باشد .
</ img src ="http://www.DeveloperStudio.ir/Pic/imgexample.jpg"alt ="DeveloperStudio PICTURE" >
خواص مهم تگ Img
نام خاصيت نوع خاصيت شرح
align top
bottom
middle
left
right
نحوه ترازبندی عکس را نسبت به محتويات ديگر صفحه و متن دور آن را تعيين می کند ، که يکی از حالت های زير می تواند باشد :
1) top : عکس در بالای متن و محتويات ديگر قرار می گيرد .
2) bottom : عکس در پايين متن و محتويات ديگر قرار می گيرد .
3) middle : عکس در وسط متن و محتويات ديگر قرار می گيرد .
4) left : عکس در سمت چپ متن و محتويات ديگر قرار می گيرد .
5) right : عکس در سمت راست متن و محتويات ديگر قرار می گيرد .
border pixel تعيين کننده ضخامت خط حاشيه دور عکس است .
height pixel
درصد % ميزان ارتفاع عکس را تعيين می کند .
hspace pixel ميزان فضايی خالی در 2 طرف راست و چپ عکس را تعيين می کند .
ismap URL
مسير فايل تعيين کننده اين است که عکس به عنوان يک نقشه تصويری سمت سرور استفاده می شود . برای اطلاعات بيشتر به قسمت تگ < map > برويد .
longdesc URL
مسير فايل مسير فايلی که اطلاعات کاملی راجع به عکس مورد نظر نگهداری می کند را مشخص می کند .
src URL
مسير فايل مسير کامل فايل نگهدارنده عکس را تعيين می کند .
usemap URL
مسير فايل تعيين کننده اين است که عکس به عنوان يک نقشه تصويری سمت کلاينت استفاده می شود . برای اطلاعات بيشتر به قسمت تگ < map > برويد .
vspace pixel......... ميزان فضاي خالی به دور عکس در بالا و پايين را مشخص می کند .
width pixel
درصد % میزان عرض عکس را تعيين می کند .
تگ table
آموزش ایجاد جدول و تگ table در html از جمله مباحثی است که علاوه بر کاربردهای عمومی، برای حرفه ای تر های دنیای وب نیز همواره کاربردی بوده و هست، چرا که از یک طرف دامنه موارد استفاده آن، باعث این امر شده و از طرفی، کمی پیچیدگی ظاهری و جزئیات، کار با آن را دشوار کرده است، البته این گفته که کار با جدول دشوار است، به یقین بعد از تسلط و آشنایی نسبی با تگ ها و نحوه استفاده از آنها، درست نخواهد بود و در ادامه آموزش نیز خواهیم دید که ترسیم جداول در صفحات وب به صورت سفارشی، آنچنان هم سخت و پیچیده نیست.
کاربرد جدول در صفحات html
فلسفه اصلی به کارگیری جداول در صفحات وب، دسته بندی و نمایش محتوایی است که به اصطلاح به صورت جدول بندی شده (tabular) و یا اطلاعات آماری هستند، البته پیش تر از جداول به دلیل استحکام و راحتی کار، در امر طراحی لایه ها و فرم بندی صفحات وب نیز استفاده می شد که امروزه به دلایلی توصیه می شود از آن (حداقل در پروژه هایی که به سئو یا بهینه سازی برای موتورهای جستجو متکی هستند) اجتناب کنید، به هر صورت از جداول به فرض می توان برای نمایش نتایج یک آزمون، نمایش برنامه های زمان بندی شده، اطلاعات آماری و... استفاده کرد.
ایجاد جدول با تگ table
عنصر اصلی ایجاد کننده یک جدول در صفحات وب، تگ کلیدی table است، البته این تگ به تنهایی کار خاصی انجام نمی دهد، ولی با افزودن مواردی درون آن، از جمله تگ های زیر مجموعه th، td و tr به ردیف ها و سلول های جانبی تقسیم می شود.
<table>
</table>
ویژگی های زیادی را می توان به تگ table نسبت داد که در ادامه به آنها اشاره می کنیم.
ویژگی align
ویژگی align در یک جدول، تنظیم کننده موقعیت آن در سمت راست، چپ یا وسط صفحه است و با سه عنصر زیر تعریف می شود.
center: تنظیم جدول در وسط صفحه
left: تنظیم جدول در سمت چپ صفحه
right: تنظیم جدول در سمت راست صفحه
<table align="right">
</table>
ویژگی background
ویژگی background تصویر پس زمینه جدول را تعریف می کند که مقادیر آن باید با آدرس تصویر مورد نظر، جایگزین شود.
<table background="/portals/0/../html.jpg">
</table>
ویژگی bgcolor
ویژگی bgcolor در یک جدول، رنگ پس زمینه آن را تعیین می کند و با مقادیر کدهای هگز مشخص می شود.
<table bgcolor="#CCCCCC">
</table>
ویژگی border
ویژگی border برای نمایش خط حاشیه و سلول های داخلی جدول مورد استفاده قرار می گیرد، مقادیر آن با اعداد، به صورت 1 ، 2 ، 3 و... تعیین می شود.
<table border="1">
</table>
ویژگی bordercolor
ویژگی bordercolor رنگ خط حاشیه جدول و سلول های داخلی آن را مشخص می کند، مقادیر این ویژگی نیز با کدهای هگز تنظیم می شود.
<table border="1" bordercolor="#FF6600">
</table>
علاوه بر این، دو ویژگی bordercolordark و bordercolorlight نیز وجود دارد که در مرورگر اینترنت اکسپلورر و برخی مرورگرهای دیگر پشتیبانی می شود، bordercolordark رنگ زاویه پائینی جدول و bordercolorlight رنگ زاویه بالایی آن را تنظیم می کند.
<table border="1" bordercolor="#FF6600" bordercolordark="#FFCC00">
</table>
ویژگی cellpadding
ویژگی cellpadding میزان فاصله محتوای سلول ها، از خطوط کناری (حاشیه) آنها را مشخص می کند، هر چه مقدار آن بیشتر باشد، فضای داخلی سلول ها نیز بیشتر شده و محتوای درون آنها با فاصله بیشتری از خطوط دربرگیرنده، نمایش داده می شود.
<table border="1" cellpadding="4">
</table>
ویژگی cellspacing
ویژگی cellspacing میزان فضا و فاصله بین سلول های داخل یک جدول را مشخص می کند، مقادیر آن نیز به صورت اعداد 1 ، 2 ، 3 و... تعیین می شود.
<table border="1" cellpadding="4" cellspacing="4">
</table>
ویژگی height
برای تنظیم ارتفاع کلی جدول، از ویژگی height استفاده می کنیم، مقادیر آن می تواند به صورت اعداد 1 ، 2 ، 3 و... باشد که در واقع نمایانگر تعداد پیکسل است.
<table border="1" cellpadding="4" cellspacing="4" height="600">
</table>
ویژگی width
ویژگی width نیز جهت تعیین عرض کلی جدول مورد استفاده قرار می گیرد، مقادیر آن نیز به صورت اعداد 1 ، 2 ، 3 و... تعیین می شود.
<table border="1" cellpadding="4" cellspacing="4" height="600" width="800">
</table>
ویژگی rules
ویژگی rules برای تعیین نحوه ترسیم خطوط میانی جدول به کار می رود، در حالت معمول، برای تمام سلول ها، ردیف ها و ستون ها، خطوط پیش فرض ترسیم می شود، اما با تعیین ویژگی rules، می توان نمایش خطوط را سفارشی کرد، ویژگی rules با چند مقدار زیر تنظیم می شود.
all: خطوط در راستای ردیف ها و ستون ها ایجاد می شود.
cols: خطوط در راستای ستون ها ترسیم می شود.
rows: خطوط در راستای ردیف ها ترسیم می شود.
groups: خطوط برای گروهی از ردیف ها یا ستون ها ترسیم می شود.
none: هیچ خطی داخل جدول ترسیم نمی شود.
<table border="1" cellpadding="4" cellspacing="4" height="600" width="800" rules="all">
</table>
ویژگی title
از ویژگی title برای ایجاد یک متن جهت معرفی جدول استفاده می شود، این متن در هنگامی که ماوس را داخل آن جدول ببریم، به صورت یک بالن (tooltip) در کنار نشانه گر ظاهر می شود.
<table border="1" cellpadding="4" cellspacing="4"
height="600" width="800" rules="all" title="عنوانی برای جدول">
</table>
ایجاد یک سطر جدید در جدول با تگ tr
از تگ tr برای ایجاد سطر جدید در جدول استفاده می شود که شباهت زیادی به عملکرد تگ پرکاربرد br در صفحات وب دارد، البته تگ tr یکتا نیست و باید پایان آن، با یک تگ دیگر بسته شود.
<table border="1">
<tr>
</tr>
</table>
ایجاد سرتیتر ها با تگ th
تگ th در جداول، نشانگر سرتیتر ها است، با استفاده از این ویژگی به راحتی می توان انبوهی از اطلاعات را به زیبایی دسته بندی کرد.
<table border="1">
<tr>
<th>تیتر جدول</th>
</tr>
</table>
ویژگی های فرعی تگ th
در زیر به صورت مختصر اشاره ای می کنیم به برخی ویژگی های فرعی تگ th و معنی آنها.
abbr: عبارت abbr مخفف abbreviation یا اختصار است و کاربرد آن در سرتیترهای جداول، به جهت تعیین یک متن مختصر و معرفی آن تیتر است، این ویژگی در حالت معمول قابل رویت نیست اما برای موارد خاص مانند موتورهای جستجو، می تواند مفید باشد.
<th abbr="abbr text">تیتر جدول</th>
axis: ویژگی axis (به معنی محور، قطب) برای تیترهای جداول، معرف دسته بندی آنها است و در حالت معمول کاربرد خاصی ندارد، اما مانند abbr می تواند برای موارد خاص مورد استفاده قرار گیرد.
<th axis="category">تیتر جدول</th>
colspan: ویژگی colspan در واقع طول یک تیتر را نسبت به تگ ها td زیرمجموعه خود مشخص می کند، به فرض ممکن است یک تیتر برای دو سلول به کار رود، لذا با تنظیم colspan با مقدار 2، آن تیتر به اندازه دو سلول کشیده می شود.
<table border="1">
<tr>
<th colspan="2">تیتر جدول</th>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</table>
نکته: تنظیم colspan با عدد صفر تنها برای موارد ستون های گروهی کاربرد دارد.
rowspan: ویژگی rowspan ارتفاع تیتر را نسبت به ردیف ها تعیین می کند، به فرض تنظیم عدد 2 برای مقادیر آن، تیتر را به اندازه دو ردیف ارتفاع می دهد.
<table border="1">
<tr>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
<th rowspan="3">تیتر rowspan</th>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</table>
valign: عنصر valign برای تیتر جداول به جهت تنظیم محل نمایش آنها از لحاظ موقعیت عمودی (vertical) کاربرد دارد، valign می تواند مقادیر زیر را دارا باشد.
- top (بالا)
- baseline (خط مبنا)
- bottom (پائین)
- middle (وسط)
<th valign="middle">تیتر جدول</th>
ایجاد سلول با تگ td
همانطور که پیش تر گفتیم، table به تنهایی معمولا کاربرد خاصی ندارد و سلول های ساخته شده با th و td هستند که به آن فرم می دهند، تگ td سلول های داخلی و در واقع محتوای داخل یک جدول را دربرمی گیرد.
<table border="1" bordercolor="#FF6600">
<tr>
<th>تیتر جدول</th>
</tr>
<tr>
<td>محتوای درون سلول های جدول</td>
</tr>
</table>
بیشتر مواردی که در مورد تگ th گفتیم، در باره تگ td نیز به همان صورت کاربرد دارند، افزون بر این، ویژگی nowrap با مقادیر nowrap را نیز می توان به آن افزود، از nowrap برای نمایش یک متن، در یک سطر، بدون شکستگی استفاده می شود، البته این ویژگی ممکن است در برخی نسخه های html معتبر نباشد و بهتر است به جای آن از css استفاده کنید (white-space: nowrap).
ایجاد عنوان با تگ caption
تگ caption در جداول، برای ایجاد یک عنوان (سرلوحه) استفاده می شود، این عنوان در قسمت بالای جدول قرار می گیرد و معرف آن است، برای هر جدول تنها می توان از یک caption استفاده کرد و این تگ باید بلافاصله بعد از تگ table قرار گیرد.
<table border="1" cellpadding="4" cellspacing="4">
<caption>عنوان جدول</caption>
<tr>
<th rowspan="2" valign="middle">تیتر جدول</th>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</table>
گروه بندی ستون ها با تگ colgroup و col
از تگ colgroup و col برای فرمت بندی ستون های جدول به صورت تفکیک شده و گروهی استفاده می شود، به فرض در یک جدول با سه ستون و سه ردیف متفاوت، می توان سه فرمت بندی متفاوت داشت، تگ colgroup و col را باید بلافاصله بعد از تگ table قرار داد، از colgroup می توان بدون col یا با آن استفاده کرد.
<table border="1">
<colgroup style="background-color:#6CF"></colgroup>
<colgroup style="background-color:#CCC"></colgroup>
<colgroup style="background-color:#FC0;"></colgroup>
<tr>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</table>
استفاده از colgroup به همراه تگ col:
<table border="1">
<colgroup>
<col style="background-color:#6CF"></colgroup>
<col style="background-color:#CCC"></colgroup>
<col style="background-color:#FC0;"></colgroup>
</colgroup>
<tr>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
تگ p
تگ <P> یکی از پرکاربردترین تگ های html هست . با استفاده از این تگ شما می تونید یک پاراگراف ایجاد کنید که این پاراگراف با تگ <P> شروع و با <P/> تموم میشه . حالا من در زیر بهتون یاد میدم که چطور یک پاراگراف رو ایجاد کنید و یا ویرایش کنید . مثلا فاصله ی بین سطر ها رو کم یا زیاد کنید ، نحوه ی قرار گیری پاراگراف چطور باشه ( چپ چین ، راست چین یا وسط بودن) و ...
خوب کد یه پاراگراف ساده به شکل زیره که نمایشش رو در زیر میبینید :
<p>متن پاراگراف</p> ======> متن پاراگراف
برای تغیر نحوه ی قرار گیری پاراگراف در صفحه از میانکد align استفاده میکنیم . در زیر به مقدار هایی که باید برای میانکد align قرار بدید اشاره کردم و نمایش هر کدوم رو در زیرش گذاشتم :
اگر خواستید پاراگرافتون راست چین باشه ( ) باید به میانکد align مقدار right رو بدید . مثل زیر :
<p align="right">متن پاراگراف</p>
متن پاراگراف
اگر خواستید پاراگرافتون چپ چین باشه ( ) باید به میانکد align مقدار left رو بدید . مثل زیر :
<p align="left">متن پاراگراف</p>
متن پاراگراف
اگر خواستید پاراگرافتون وسط باشه ( ) باید به میانکد align مقدار center رو بدید . مثل زیر :
<p align="center">متن پاراگراف</p>
متن پاراگراف
حالا اگه خواستید پاراگرافتون از دو طرف میزون باشه ( ) باید به میانکد align مقدار justify رو بدید . مثل زیر :
<p align="justify">متن پاراگراف</p>
متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف
برای متن های فارسی که از راست به چپ نوشته میشن از میانکد dir استفاده کنید و مقدار اون رو rtl بزارید که مخفف right to left هست یعنی راست به چپ .
<p dir="rtl">متن پاراگراف</p> <=== برای متون فارسی
طراحی سایت
برای متن های انگلیسی که از چپ به راست نوشته میشن بازم از میانکد dir استفاده می کنید و حتما حدس میزنید که مقدارش رو چی باید گذاشت . آره ، مقدار اون رو ltr بزارید که مخفف left to right هست یعنی چپ به راست .
<p dir="ltr">متن پاراگراف</p> <=== برای متون انگلیسی
تگ < img > :
از تگ < img > برای قرار دادن عکس يا تصاوير بر روی صفحه استفاده می شود . تگ < img > فقط خصوصيات را نگهداری کرده و دارای تگ پايانی نيست ( در همان تگ ابتدايی بسته می شود ) .
نکات مهم تگ < img > :
در تگ < img > با خاصيت src به مکان فايل عکسی که قرار است نمايش داده شود اشاره می کنيم . تصاوير HTML در مکانی غير از صفحه اصلی ذخيره شده و در هنگام نمايش صفحه از مبدا ، فراخوانی می شوند .
با استفاده از خاصيت alt تگ < img > می توان از قبل يک متن جايگزين تعيين کرد ، که چنانچه مرورگر به هر دليلي نتوانست عکس را نمايش دهد ، به جای آن متن جايگزين را نشان دهد . اين متن در هنگام قرار گيری موس بر روی عکس در يک کادر زرد رنگ نيز نمايش داده می شود . متن جايگزين می تواند شامل توضيحی راجع به عکس اصلی باشد .
</ img src ="http://www.DeveloperStudio.ir/Pic/imgexample.jpg"alt ="DeveloperStudio PICTURE" >
خواص مهم تگ Img
نام خاصيت نوع خاصيت شرح
align top
bottom
middle
left
right
نحوه ترازبندی عکس را نسبت به محتويات ديگر صفحه و متن دور آن را تعيين می کند ، که يکی از حالت های زير می تواند باشد :
1) top : عکس در بالای متن و محتويات ديگر قرار می گيرد .
2) bottom : عکس در پايين متن و محتويات ديگر قرار می گيرد .
3) middle : عکس در وسط متن و محتويات ديگر قرار می گيرد .
4) left : عکس در سمت چپ متن و محتويات ديگر قرار می گيرد .
5) right : عکس در سمت راست متن و محتويات ديگر قرار می گيرد .
border pixel تعيين کننده ضخامت خط حاشيه دور عکس است .
height pixel
درصد % ميزان ارتفاع عکس را تعيين می کند .
hspace pixel ميزان فضايی خالی در 2 طرف راست و چپ عکس را تعيين می کند .
ismap URL
مسير فايل تعيين کننده اين است که عکس به عنوان يک نقشه تصويری سمت سرور استفاده می شود . برای اطلاعات بيشتر به قسمت تگ < map > برويد .
longdesc URL
مسير فايل مسير فايلی که اطلاعات کاملی راجع به عکس مورد نظر نگهداری می کند را مشخص می کند .
src URL
مسير فايل مسير کامل فايل نگهدارنده عکس را تعيين می کند .
usemap URL
مسير فايل تعيين کننده اين است که عکس به عنوان يک نقشه تصويری سمت کلاينت استفاده می شود . برای اطلاعات بيشتر به قسمت تگ < map > برويد .
vspace pixel......... ميزان فضاي خالی به دور عکس در بالا و پايين را مشخص می کند .
width pixel
درصد % میزان عرض عکس را تعيين می کند .
تگ table
آموزش ایجاد جدول و تگ table در html از جمله مباحثی است که علاوه بر کاربردهای عمومی، برای حرفه ای تر های دنیای وب نیز همواره کاربردی بوده و هست، چرا که از یک طرف دامنه موارد استفاده آن، باعث این امر شده و از طرفی، کمی پیچیدگی ظاهری و جزئیات، کار با آن را دشوار کرده است، البته این گفته که کار با جدول دشوار است، به یقین بعد از تسلط و آشنایی نسبی با تگ ها و نحوه استفاده از آنها، درست نخواهد بود و در ادامه آموزش نیز خواهیم دید که ترسیم جداول در صفحات وب به صورت سفارشی، آنچنان هم سخت و پیچیده نیست.
کاربرد جدول در صفحات html
فلسفه اصلی به کارگیری جداول در صفحات وب، دسته بندی و نمایش محتوایی است که به اصطلاح به صورت جدول بندی شده (tabular) و یا اطلاعات آماری هستند، البته پیش تر از جداول به دلیل استحکام و راحتی کار، در امر طراحی لایه ها و فرم بندی صفحات وب نیز استفاده می شد که امروزه به دلایلی توصیه می شود از آن (حداقل در پروژه هایی که به سئو یا بهینه سازی برای موتورهای جستجو متکی هستند) اجتناب کنید، به هر صورت از جداول به فرض می توان برای نمایش نتایج یک آزمون، نمایش برنامه های زمان بندی شده، اطلاعات آماری و... استفاده کرد.
ایجاد جدول با تگ table
عنصر اصلی ایجاد کننده یک جدول در صفحات وب، تگ کلیدی table است، البته این تگ به تنهایی کار خاصی انجام نمی دهد، ولی با افزودن مواردی درون آن، از جمله تگ های زیر مجموعه th، td و tr به ردیف ها و سلول های جانبی تقسیم می شود.
<table>
</table>
ویژگی های زیادی را می توان به تگ table نسبت داد که در ادامه به آنها اشاره می کنیم.
ویژگی align
ویژگی align در یک جدول، تنظیم کننده موقعیت آن در سمت راست، چپ یا وسط صفحه است و با سه عنصر زیر تعریف می شود.
center: تنظیم جدول در وسط صفحه
left: تنظیم جدول در سمت چپ صفحه
right: تنظیم جدول در سمت راست صفحه
<table align="right">
</table>
ویژگی background
ویژگی background تصویر پس زمینه جدول را تعریف می کند که مقادیر آن باید با آدرس تصویر مورد نظر، جایگزین شود.
<table background="/portals/0/../html.jpg">
</table>
ویژگی bgcolor
ویژگی bgcolor در یک جدول، رنگ پس زمینه آن را تعیین می کند و با مقادیر کدهای هگز مشخص می شود.
<table bgcolor="#CCCCCC">
</table>
ویژگی border
ویژگی border برای نمایش خط حاشیه و سلول های داخلی جدول مورد استفاده قرار می گیرد، مقادیر آن با اعداد، به صورت 1 ، 2 ، 3 و... تعیین می شود.
<table border="1">
</table>
ویژگی bordercolor
ویژگی bordercolor رنگ خط حاشیه جدول و سلول های داخلی آن را مشخص می کند، مقادیر این ویژگی نیز با کدهای هگز تنظیم می شود.
<table border="1" bordercolor="#FF6600">
</table>
علاوه بر این، دو ویژگی bordercolordark و bordercolorlight نیز وجود دارد که در مرورگر اینترنت اکسپلورر و برخی مرورگرهای دیگر پشتیبانی می شود، bordercolordark رنگ زاویه پائینی جدول و bordercolorlight رنگ زاویه بالایی آن را تنظیم می کند.
<table border="1" bordercolor="#FF6600" bordercolordark="#FFCC00">
</table>
ویژگی cellpadding
ویژگی cellpadding میزان فاصله محتوای سلول ها، از خطوط کناری (حاشیه) آنها را مشخص می کند، هر چه مقدار آن بیشتر باشد، فضای داخلی سلول ها نیز بیشتر شده و محتوای درون آنها با فاصله بیشتری از خطوط دربرگیرنده، نمایش داده می شود.
<table border="1" cellpadding="4">
</table>
ویژگی cellspacing
ویژگی cellspacing میزان فضا و فاصله بین سلول های داخل یک جدول را مشخص می کند، مقادیر آن نیز به صورت اعداد 1 ، 2 ، 3 و... تعیین می شود.
<table border="1" cellpadding="4" cellspacing="4">
</table>
ویژگی height
برای تنظیم ارتفاع کلی جدول، از ویژگی height استفاده می کنیم، مقادیر آن می تواند به صورت اعداد 1 ، 2 ، 3 و... باشد که در واقع نمایانگر تعداد پیکسل است.
<table border="1" cellpadding="4" cellspacing="4" height="600">
</table>
ویژگی width
ویژگی width نیز جهت تعیین عرض کلی جدول مورد استفاده قرار می گیرد، مقادیر آن نیز به صورت اعداد 1 ، 2 ، 3 و... تعیین می شود.
<table border="1" cellpadding="4" cellspacing="4" height="600" width="800">
</table>
ویژگی rules
ویژگی rules برای تعیین نحوه ترسیم خطوط میانی جدول به کار می رود، در حالت معمول، برای تمام سلول ها، ردیف ها و ستون ها، خطوط پیش فرض ترسیم می شود، اما با تعیین ویژگی rules، می توان نمایش خطوط را سفارشی کرد، ویژگی rules با چند مقدار زیر تنظیم می شود.
all: خطوط در راستای ردیف ها و ستون ها ایجاد می شود.
cols: خطوط در راستای ستون ها ترسیم می شود.
rows: خطوط در راستای ردیف ها ترسیم می شود.
groups: خطوط برای گروهی از ردیف ها یا ستون ها ترسیم می شود.
none: هیچ خطی داخل جدول ترسیم نمی شود.
<table border="1" cellpadding="4" cellspacing="4" height="600" width="800" rules="all">
</table>
ویژگی title
از ویژگی title برای ایجاد یک متن جهت معرفی جدول استفاده می شود، این متن در هنگامی که ماوس را داخل آن جدول ببریم، به صورت یک بالن (tooltip) در کنار نشانه گر ظاهر می شود.
<table border="1" cellpadding="4" cellspacing="4"
height="600" width="800" rules="all" title="عنوانی برای جدول">
</table>
ایجاد یک سطر جدید در جدول با تگ tr
از تگ tr برای ایجاد سطر جدید در جدول استفاده می شود که شباهت زیادی به عملکرد تگ پرکاربرد br در صفحات وب دارد، البته تگ tr یکتا نیست و باید پایان آن، با یک تگ دیگر بسته شود.
<table border="1">
<tr>
</tr>
</table>
ایجاد سرتیتر ها با تگ th
تگ th در جداول، نشانگر سرتیتر ها است، با استفاده از این ویژگی به راحتی می توان انبوهی از اطلاعات را به زیبایی دسته بندی کرد.
<table border="1">
<tr>
<th>تیتر جدول</th>
</tr>
</table>
ویژگی های فرعی تگ th
در زیر به صورت مختصر اشاره ای می کنیم به برخی ویژگی های فرعی تگ th و معنی آنها.
abbr: عبارت abbr مخفف abbreviation یا اختصار است و کاربرد آن در سرتیترهای جداول، به جهت تعیین یک متن مختصر و معرفی آن تیتر است، این ویژگی در حالت معمول قابل رویت نیست اما برای موارد خاص مانند موتورهای جستجو، می تواند مفید باشد.
<th abbr="abbr text">تیتر جدول</th>
axis: ویژگی axis (به معنی محور، قطب) برای تیترهای جداول، معرف دسته بندی آنها است و در حالت معمول کاربرد خاصی ندارد، اما مانند abbr می تواند برای موارد خاص مورد استفاده قرار گیرد.
<th axis="category">تیتر جدول</th>
colspan: ویژگی colspan در واقع طول یک تیتر را نسبت به تگ ها td زیرمجموعه خود مشخص می کند، به فرض ممکن است یک تیتر برای دو سلول به کار رود، لذا با تنظیم colspan با مقدار 2، آن تیتر به اندازه دو سلول کشیده می شود.
<table border="1">
<tr>
<th colspan="2">تیتر جدول</th>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</table>
نکته: تنظیم colspan با عدد صفر تنها برای موارد ستون های گروهی کاربرد دارد.
rowspan: ویژگی rowspan ارتفاع تیتر را نسبت به ردیف ها تعیین می کند، به فرض تنظیم عدد 2 برای مقادیر آن، تیتر را به اندازه دو ردیف ارتفاع می دهد.
<table border="1">
<tr>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
<th rowspan="3">تیتر rowspan</th>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</table>
valign: عنصر valign برای تیتر جداول به جهت تنظیم محل نمایش آنها از لحاظ موقعیت عمودی (vertical) کاربرد دارد، valign می تواند مقادیر زیر را دارا باشد.
- top (بالا)
- baseline (خط مبنا)
- bottom (پائین)
- middle (وسط)
<th valign="middle">تیتر جدول</th>
ایجاد سلول با تگ td
همانطور که پیش تر گفتیم، table به تنهایی معمولا کاربرد خاصی ندارد و سلول های ساخته شده با th و td هستند که به آن فرم می دهند، تگ td سلول های داخلی و در واقع محتوای داخل یک جدول را دربرمی گیرد.
<table border="1" bordercolor="#FF6600">
<tr>
<th>تیتر جدول</th>
</tr>
<tr>
<td>محتوای درون سلول های جدول</td>
</tr>
</table>
بیشتر مواردی که در مورد تگ th گفتیم، در باره تگ td نیز به همان صورت کاربرد دارند، افزون بر این، ویژگی nowrap با مقادیر nowrap را نیز می توان به آن افزود، از nowrap برای نمایش یک متن، در یک سطر، بدون شکستگی استفاده می شود، البته این ویژگی ممکن است در برخی نسخه های html معتبر نباشد و بهتر است به جای آن از css استفاده کنید (white-space: nowrap).
ایجاد عنوان با تگ caption
تگ caption در جداول، برای ایجاد یک عنوان (سرلوحه) استفاده می شود، این عنوان در قسمت بالای جدول قرار می گیرد و معرف آن است، برای هر جدول تنها می توان از یک caption استفاده کرد و این تگ باید بلافاصله بعد از تگ table قرار گیرد.
<table border="1" cellpadding="4" cellspacing="4">
<caption>عنوان جدول</caption>
<tr>
<th rowspan="2" valign="middle">تیتر جدول</th>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</table>
گروه بندی ستون ها با تگ colgroup و col
از تگ colgroup و col برای فرمت بندی ستون های جدول به صورت تفکیک شده و گروهی استفاده می شود، به فرض در یک جدول با سه ستون و سه ردیف متفاوت، می توان سه فرمت بندی متفاوت داشت، تگ colgroup و col را باید بلافاصله بعد از تگ table قرار داد، از colgroup می توان بدون col یا با آن استفاده کرد.
<table border="1">
<colgroup style="background-color:#6CF"></colgroup>
<colgroup style="background-color:#CCC"></colgroup>
<colgroup style="background-color:#FC0;"></colgroup>
<tr>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</table>
استفاده از colgroup به همراه تگ col:
<table border="1">
<colgroup>
<col style="background-color:#6CF"></colgroup>
<col style="background-color:#CCC"></colgroup>
<col style="background-color:#FC0;"></colgroup>
</colgroup>
<tr>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
<th>تیتر جدول</th>
</tr>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
تگ p
تگ <P> یکی از پرکاربردترین تگ های html هست . با استفاده از این تگ شما می تونید یک پاراگراف ایجاد کنید که این پاراگراف با تگ <P> شروع و با <P/> تموم میشه . حالا من در زیر بهتون یاد میدم که چطور یک پاراگراف رو ایجاد کنید و یا ویرایش کنید . مثلا فاصله ی بین سطر ها رو کم یا زیاد کنید ، نحوه ی قرار گیری پاراگراف چطور باشه ( چپ چین ، راست چین یا وسط بودن) و ...
خوب کد یه پاراگراف ساده به شکل زیره که نمایشش رو در زیر میبینید :
<p>متن پاراگراف</p> ======> متن پاراگراف
برای تغیر نحوه ی قرار گیری پاراگراف در صفحه از میانکد align استفاده میکنیم . در زیر به مقدار هایی که باید برای میانکد align قرار بدید اشاره کردم و نمایش هر کدوم رو در زیرش گذاشتم :
اگر خواستید پاراگرافتون راست چین باشه ( ) باید به میانکد align مقدار right رو بدید . مثل زیر :
<p align="right">متن پاراگراف</p>
متن پاراگراف
اگر خواستید پاراگرافتون چپ چین باشه ( ) باید به میانکد align مقدار left رو بدید . مثل زیر :
<p align="left">متن پاراگراف</p>
متن پاراگراف
اگر خواستید پاراگرافتون وسط باشه ( ) باید به میانکد align مقدار center رو بدید . مثل زیر :
<p align="center">متن پاراگراف</p>
متن پاراگراف
حالا اگه خواستید پاراگرافتون از دو طرف میزون باشه ( ) باید به میانکد align مقدار justify رو بدید . مثل زیر :
<p align="justify">متن پاراگراف</p>
متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف متن پاراگراف
برای متن های فارسی که از راست به چپ نوشته میشن از میانکد dir استفاده کنید و مقدار اون رو rtl بزارید که مخفف right to left هست یعنی راست به چپ .
<p dir="rtl">متن پاراگراف</p> <=== برای متون فارسی
طراحی سایت
برای متن های انگلیسی که از چپ به راست نوشته میشن بازم از میانکد dir استفاده می کنید و حتما حدس میزنید که مقدارش رو چی باید گذاشت . آره ، مقدار اون رو ltr بزارید که مخفف left to right هست یعنی چپ به راست .
<p dir="ltr">متن پاراگراف</p> <=== برای متون انگلیسی
