آموزش طراحی وب – جلسه هفتم – جدول

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

برچسب دوطرفه table

جدول در html موارد استفاده فراوانی دارد که می توان بنا به نیاز آن را شخصی سازی کرد. برای مثال میتوان از جدول ها برای ایجاد لیست حضور و غیاب یا لیست خرید وغیره استفاده کرد. البته ویژگی و استفاده جدول در همینجا خلاصه نشده و می توان در کارهای مختلف از آن استفاده کرد. table یک برچسب دوطرفه است که برچسب های زیرمجموعه جدول را در بر می گیرد.

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

<table></table>

نکته: هر جدول از یک یا چند سطر (row) و سلول (cell) تشکیل شده است.

برچسب دوطرفه th

هر جدول ممکن است دارای یک عنوان برای هر یک از ستون های خود باشد. عنوان ستون، معرف محتوای داخل آنهاست. این برچسب می تواند به دسته بندی بهتر یک جدول، هماهنگی بین آنها و همچنین خواناتر بودن محتوای درون جدول کمک کند.

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

<table>
<th>عنوان</th>
</table>

برچسب دو طرفه tr

وقت آن رسیده تا سطرهای یک جدول را ایجاد کنید! این برچسب این امکان را فراهم می کند تا با قرار دادن هریک از آنها در جدول یک سطر اضافه شود.

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

<table>
<tr>ایجاد یک سطر</tr>
</table>

برچسب دوطرفه td

کار این برچسب ایجاد سلول است. هریک از سلولها محتوایی را در میان میگیرد. برای مثال شما در یک سطر می توانید به تعداد مورد نیازتان از سلولها بهره ببرید.

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

<table>
<td>ایجاد یک سلول</td>
</table>

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

<table>
<th>عنوان یک</th>
<th>عنوان دو</th>
<tr>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</table>

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

حال در اینجا باید از یک ویژگی به نام border استفاده شود تا مرزبندی برچسب ها از یکدیگر مشخص شود. این کار خوانایی یک جدول را بیشتر خواهد کرد. هرچه مقدار پس از مساوی که روبروی border قرار می گیرد بیشتر باشد قطر مرز میان سلولها نیز بیشتر خواهد شد. البته برای ایجاد این ویژگی ها می توان از CSS نیز استفاده کرد.

<table border=1>
<th>عنوان یک</th>
<th>عنوان دو</th>
<tr>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</table>

خروجی:

برچسب دوطرفه thead

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

اولین برچسب گروهی thead بوده که مربوط به عناوین می باشد. به وسیله این برچسب میتوان مدیریت بهتری بر روی برچسب های th داشت. برای مثال می توان با نوشتن یک ویژگی CSS آن را برای تمام برچسب های th اعمال کرد.

<table border=1>
<thead>
<th>عنوان یک</th>
<th>عنوان دو</th>
</thead>
<tr>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</table>

برچسب دوطرفه tbody

کارکرد این برچسب نیز مانند thead است با این تفاوت که از tbody برای اثرگذاری بر روی بدنه و محتوای داخلی یک جدول استفاده می شود.

<table border=1>
<thead>
<th>عنوان یک</th>
<th>عنوان دو</th>
</thead>
<tbody>
<tr>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</tbody>
</table>

برچسب دوطرفه tfoot

توضیح این برچسب نیز مانند دو برچسب قبلی بوده با این تفاوت که ردیف یا سطر انتهایی جدول را تحت تاثیر قرار می دهد.

<table border=1>
<thead>
<th>عنوان یک</th>
<th>عنوان دو</th>
</thead>
<tbody>
<tr>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</tbody>
<tfoot>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</tfoot>
</table>

نکته: برچسب های گروهی thead, tbody و tfoot زمانی قابلیت تاثیرگذاری دارند که از ویژگی ها CSS استفاده شود وگرنه هیچ تاثیری نخواهند داشت.

برچسب دوطرفه caption

معمولا از این برچسب برای توضیح کوتاه درباره محتوای قرار گرفته در جدول استفاده می شود. طریقه استفاده از این برچسب قرارگیری آن در ابتدای جدول بصورت زیر است:

<table border=1>
<caption>شرح جدول</caption>
<thead>
<th>عنوان یک</th>
<th>عنوان دو</th>
</thead>
<tr>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</table>

برچسب table دارای ویژگی های مختلفی است که باعث ایجاد قابلیت هایی از جمله تغییر رنگ، اندازه و… در آن می شود البته این ویژگی ها در نسخه‌ی HTML5 پشتیبانی نمی شود. آن هم به این علت که این ویزگی ها می تواند با استفاده از CSS در جدول اعمال شود. برای همین سعی می کنم تا در جلسات مربوط به CSS درباره آنها توضیح دهم.

2 پاسخ به “آموزش طراحی وب – جلسه هفتم – جدول”

  1. علی گفت:

    سلام
    من جاهایی دیدم که اون سلولها رنگبندی دارن. میشه اینکارو کرد؟

    • مدیریت گفت:

      سلام
      بله می شود برای آنها رنگ در نظر گرفت. در جلسات بعدی این موضوع را بیشتر باز می کنم.
      ممنون از نظر شما

پاسخ دهید

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

زمانیکه به دیدگاه من پاسخ داده شد مرا باخبر کن! مدیریت اشتراک ها