سرخط خبرها

تگ table در html

تگ table در html

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

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

شاید زمانیکه بخواهیم برای اولین بار در زبان اچ تی ام ال (html) اقدام به ساخت جدول کنیم، اینکار کمی سخت و پیچیده به نظر برسد اما چنانچه منطق پشت ساخت جداول را در اچ تی ام ال (html) فرا بگیریم اینکار بسیار ساده خواهد شد.

آموزش ایجاد جدول و تگ table در html از جمله مباحثی است که علاوه بر کاربردهای عمومی، برای حرفه ای تر های دنیای وب نیز همواره کاربردی بوده و هست، چرا که از یک طرف دامنه موارد استفاده آن، باعث این امر شده و از طرفی، کمی پیچیدگی ظاهری و جزئیات، کار با آن را دشوار کرده است، البته این گفته که کار با جدول دشوار است، به یقین بعد از تسلط و آشنایی نسبی با تگ ها و نحوه استفاده از آنها، درست نخواهد بود و در ادامه آموزش نیز خواهیم دید که ترسیم جداول در صفحات وب به صورت سفارشی، آنچنان هم سخت و پیچیده نیست.

کاربرد جدول در صفحات html

فلسفه اصلی به کارگیری جداول در صفحات وب، دسته بندی و نمایش محتوایی است که به اصطلاح به صورت جدول بندی شده (tabular) و یا اطلاعات آماری هستند، البته پیش تر از جداول به دلیل استحکام و راحتی کار، در امر طراحی لایه ها و فرم بندی صفحات وب نیز استفاده می شد که امروزه به دلایلی توصیه می شود از آن (حداقل در پروژه هایی که به سئو یا بهینه سازی برای موتورهای جستجو متکی هستند) اجتناب کنید، به هر صورت از جداول به فرض می توان برای نمایش نتایج یک آزمون، نمایش برنامه های زمان بندی شده، اطلاعات آماری و… استفاده کرد.

ایجاد جدول با تگ table

عنصر اصلی ایجاد کننده یک جدول در صفحات وب، تگ کلیدی table است، البته این تگ به تنهایی کار خاصی انجام نمی دهد، ولی با افزودن مواردی درون آن، از جمله تگ های زیر مجموعه th، td و tr به ردیف ها و سلول های جانبی تقسیم می شود.

<table>
</table>

آیا شما می خواهید یک جدول (table) در صفحه خود ایجاد کنید؟ برای ایجاد یک جدول باید از این تگ استفاده کنید:

<table>
  ........محتویات جدول.......
  </table>

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

<table>
  <td>
  ........محتویات جدول......
  </td>
  </table>

جدول به دست آمده مانند زیر به نظر می رسد:

……..محتویات جدول……

 

البته این یک جدول ساده است و شاید در ظاهر زیاد تفاوتی با یک نوشته ساده نداشته باشد.

 

ویژگی border :

ویژگی border برای نمایش خط حاشیه و سلول های داخلی جدول مورد استفاده قرار می گیرد، مقادیر آن با اعداد، به صورت ۱ ، ۲ ، ۳ و… تعیین می شود.

<table border="1">
  </table>

می توانیم برای جدول کادر (border)  هم تعریف کنیم. برای این کار باید شناسه مربوطه را در تگ جدول قرار دهیم. مانند زیر:

<table border="3">
  <td>
  ........محتویات جدول......
  </td>
  </table>

حالا جدول ما کمی مشخص تر شد، به آن نگاه کنید:

……..محتویات جدول……

شما می توانید ضخامت کادر جدول را به دلخواه خود تغییر دهید. برای این کار فقط کافی است تا عددی را که به عنوان مقدار شناسه border به کار بردیم، تغییر دهید. اگر مقدار این عدد را صفر قرار دهید کادر دیده نخواهد شد.

تگ td :

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

<table border="3">
  <td>
  سلول اول
  </td>
  <td>
  سلول دوم
  </td>
  </table>

می توانید سلولهای ایجاد شده را در اینجا مشاهده کنید:

سلول اول سلول دوم

 

تگ tr=table row :

از تگ tr برای ایجاد سطر جدید در جدول استفاده می شود که شباهت زیادی به عملکرد تگ پرکاربرد br در صفحات وب دارد، البته تگ tr یکتا نیست و باید پایان آن، با یک تگ دیگر بسته شود.

<table border="1">
  <tr>
  </tr>
  </table>

حالا فرض کنید می خواهیم به خط بعدی یا به اصطلاح به ردیف بعدی برویم. برای این کار باید از تگ tr استفاده کنیم. این تگ با <tr> شروع و با <tr/> پایان می پذیرد. مانند زیر:
 

<table border="3">
  <td>
  سطر اول و سلول اول
  </td>
  <td>
  سطر اول و سلول دوم
  </td>
  <tr>
  <td>
  سطر دوم و سلول اول
  </td>
  <td>
  سطر دوم و سلول دوم
  </td>
  </tr>
  </table>

نتیجه به این صورت مشاهده می شود:
 

سطر اول و سلول اول سطر اول و سلول دوم
سطر دوم و سلول اول سطر دوم و سلول دوم

 

ویژگی cellspacing :

برای ایجاد فاصله بین سلولها عدد مورد نظر خود را در این فرمان وارد کنید.
ویژگی cellspacing میزان فضا و فاصله بین سلول های داخل یک جدول را مشخص می کند، مقادیر آن نیز به صورت اعداد ۱ ، ۲ ، ۳ و… تعیین می شود.

<table border="1" cellpadding="4" cellspacing="4">
  </table>

فرض کنید می خواهیم در مثال قبل بین سلولها یک فاصله به اندازه ۱۰ ایجاد کنیم. تگ جدول را مطابق زیر تغییر می دهیم:

<table border="3" cellspacing="10">

جدول به دست آمده به شکل زیر خواهد بود:

سطر اول و سلول اول سطر اول و سلول دوم
سطر دوم و سلول اول سطر دوم و سلول دوم

 

ویژگی cellpadding

از این فرمان برای افزودن فضا به داخل یک سلول استفاده کنید. مقدار فضای مورد نظر خود را در این فرمان وارد کنید.

ویژگی cellpadding میزان فاصله محتوای سلول ها، از خطوط کناری (حاشیه) آنها را مشخص می کند، هر چه مقدار آن بیشتر باشد، فضای داخلی سلول ها نیز بیشتر شده و محتوای درون آنها با فاصله بیشتری از خطوط دربرگیرنده، نمایش داده می شود.

<table border="1" cellpadding="4">
</table>

حالا فرض کنید می خواهیم یک فاصله به اندازه ۱۰ را به داخل سلولهای جدول مثال قبل اضافه کنیم. تگ جدول را به این صورت تغییر می دهیم:

<table border="3" cellpadding="10">

جدول به دست آمده به صورت زیر خواهد بود:

سطر اول و سلول اول سطر اول و سلول دوم
سطر دوم و سلول اول سطر دوم و سلول دوم

حالا می خواهیم هر دو مثال قبل را با هم امتحان کنیم، یعنی تگ جدول را مطابق زیر تغییر دهیم:

<table border="3" cellspacing="10" cellpadding="10">

نتیجه را ملاحظه کنید:

سطر اول و سلول اول سطر اول و سلول دوم
سطر دوم و سلول اول سطر دوم و سلول دوم

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

<table border="2">
  <td>
  <a href="../javascript/index.html">آموزش جاوا اسکرپت</a>
  </td>
  </table>

این هم جدولی که بیننده نهایی در صفحه مشاهده می کند:

آموزش جاوا اسکرپت

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

<table border="2">
  <td>
  <img src="learn_html.gif">
  </td>
  </table>

این هم نتیجه کد:

اصول کار با جدولها

ویژگی های زیادی را می توان به تگ table نسبت داد که در ادامه به آنها اشاره می کنیم.

ویژگی align

ویژگی align در یک جدول، تنظیم کننده موقعیت آن در سمت راست، چپ یا وسط صفحه است و با سه عنصر زیر تعریف می شود.
center: تنظیم جدول در وسط صفحه
left: تنظیم جدول در سمت چپ صفحه
right: تنظیم جدول در سمت راست صفحه

<table align="right">
</table>

ویژگی background

ویژگی background تصویر پس زمینه جدول را تعریف می کند که مقادیر آن باید با آدرس تصویر مورد نظر، جایگزین شود. 

<table background="../html.jpg">
</table>

ویژگی bgcolor

ویژگی bgcolor در یک جدول، رنگ پس زمینه آن را تعیین می کند و با مقادیر کدهای هگز مشخص می شود.

<table bgcolor="#CCCCCC">
</table>

ویژگی bordercolor

ویژگی bordercolor رنگ خط حاشیه جدول و سلول های داخلی آن را مشخص می کند، مقادیر این ویژگی نیز با کدهای هگز تنظیم می شود.

<table border="1" bordercolor="#FF6600">
  </table>

علاوه بر این، دو ویژگی bordercolordark و bordercolorlight نیز وجود دارد که در مرورگر اینترنت اکسپلورر و برخی مرورگرهای دیگر پشتیبانی می شود، bordercolordark رنگ زاویه پائینی جدول و bordercolorlight رنگ زاویه بالایی آن را تنظیم می کند.

<table border="1" bordercolor="#FF6600" bordercolordark="#FFCC00">
  </table>

 

ویژگی height

برای تنظیم ارتفاع کلی جدول، از ویژگی height استفاده می کنیم، مقادیر آن می تواند به صورت اعداد ۱ ، ۲ ، ۳ و… باشد که در واقع نمایانگر تعداد پیکسل است.

<table border="1" cellpadding="4" cellspacing="4" height="600">
</table>

ویژگی width

ویژگی width نیز جهت تعیین عرض کلی جدول مورد استفاده قرار می گیرد، مقادیر آن نیز به صورت اعداد ۱ ، ۲ ، ۳ و… تعیین می شود.

<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>

ایجاد سرتیتر ها با تگ th

از این تگ برای ایجاد یک سر عنوان ( Header ) در بالای ستون های یک جدول استفاده می شود . متنی که قرار است به عنوان سر عنوان قرار بگیرد ، در درون تگ باز و بسته < th > تعریف شده و معمولا به صورت درشت ( Bold ) توسط مرورگر نمایش داده می شود . تگ سر عنوان باید در اولین سطر جدول قرار گرفته و برای هر ستون به طور مجزا تعریف شوند . 

 

تگ th در جداول، نشانگر سرتیتر ها است، با استفاده از این ویژگی به راحتی می توان انبوهی از اطلاعات را به زیبایی دسته بندی کرد.

نکته تمام توضیحات برای خصوصیات تگ ht همانند تگ td است

 

< table border="1" >
< tr >
  < th >Month< /th >
  < th >Savings< /th > < /tr >
  < tr>
  < td >January< /td >
  < td >$100< /td >
  < /tr >
< /table >

مثال

Savings Month
$۱۰۰ January

<table border=”1″>

<tr>
<th>تیتر جدول</th>
</tr>
</table>

مثال :

جدولی با ۲ سطر و ۲ ستون می سازیم :

 
<html>
  <head>
  </head>
<body>
<table border="1">
  <tr>
  <td>cell number 1</td>
  <td>cell number 2</td>
  </tr>
  <tr>
  <td>cell number 3</td>
  <td>cell number 4</td>
  </tr>
  </table>
</body>
  </html>
نتیجه :
cell number 1 cell number 2
cell number 3 cell number 4

باید دقت داشته باشید که برای تگ <table> ، مشخصه border را برابر ۱ قرار داده ایم . اگر این مشخصه را تعیین نکنیم ، جدول بدون دیواره نمایش داده می شود . 

QR Code For: تگ table در html

درباره ی jizjiz

پاسخ دهید

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

Time limit is exhausted. Please reload CAPTCHA.