جلسه ی سیزدهم : تگ Table در HTML

جلسه ی سیزدهم : تگ Table در HTML
5 (100%) 1 vote
جلسه ی سیزدهم : تگ Table در HTML
5 (100%) 1 vote

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

 

تگ Table

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

درچه مکان هایی از تگ table استفاده می کنیم؟

شاید از خود بپرسید که در چه مواردی از تگ Table استفاده می شود باید بگوییم که استفاده ی این تگ در مکان هایی می باشد که ما می خواهیم اطلاعات آماری را در اختیار افراد بگذاریم. برای مثال اطلاعاتی مثل تاریخ، زمان، اطلاعات دسته بندی شده و… از این تگ استفاده می کنیم.

نکته: امروزه توصیه می شود که از تگ table استفاده ی زیادی نشود حداقل در پروژه هایی که بر سئو (بهینه سازی برای موتور های جست و جو) متکی هستند.

 

تگ th

از تگ th برای ایجاد سر فصل های یک جدول استفاده می شود که می تواند به صورت افقی یا عمودی باشد. تگ th از نوع تگ های دوتایی می باشد که با یک تگ باز و با یک تگ دیگر بسته می شود.


<th></th>

تگ tr

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


<tr></tr>

تگ td

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


<td></td>

چگونه به کمک تگ table یک جدول بسازیم؟

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

قدم اول: برای ساخت یک جدول ابتدا باید یک تگ table ایجاد نماییم.


<table>...</table>

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


<table>

<tr></tr>

</table>

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

ابتدا باید یک سطر ایجاد کنیم و عنوان های خود را در آن قرار دهیم سپس باید سطر دیگری ایجاد نماییم و زیر مجموعه های عنوان های بالا را به ترتیب در آن ها قرار دهیم به مثال زیر توجه کنید:

 

کد HTML:


<table>

<tr>

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

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

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

</tr>

<tr>

<td>سلول ۱</td>

<td>سلول ۲</td>

<td>سلول ۳</td>

</tr>

</table>

کد های CSS:


body {

background-color: #eeeeee

}

table {

padding: 3px;

border: 5px solid #000

}

table tr th {

padding: 10px;

border:2px dashed #000

}

table tr td {

padding: 10px;

border:1px solid #000

}

خروجی کد بالا:

تگ tr، th، td

 

حال فکر کنید می خواهیم یک جدول عمودی بسازید برای اینکار پس از اینکه یک تگ tr باز نمودیم باید یک تگ th و یک تگ td را با هم در یک tr باز نماییم. ب مثال زیر توجه کنید:

 

کد HTML:


<table>

<tr>

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

<td>سلول ۱</td>

</tr>

<tr>

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

<td>سلول ۲</td>

</tr>

<tr>

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

<td>سلول ۳</td>

</tr>

</table>

کد CSS:


body {

background-color: #eeeeee

}

table {

padding: 3px;

border: 5px solid #000

}

table tr th {

padding: 10px;

border:2px dashed #000

}

table tr td {

padding: 10px;

border:1px solid #000

}

خروجی کد بالا:

تگ tr، th، td

 

حال شاید بخواهیم به یکی از سلول ها یا th ها فضای بیشتری بدهیم و به نوعی دو سلول را با هم ادغام کنیم در این صورت باید از ویژگی های colspan و یا rowspan استفاده می کنیم در پایین مکان استفاده از هر کدام را آموزش می دهیم.

 

در صورتی که جدول ما به صورت افقی بود از خاصیت colspan برای ادغام سلول ها استفاده می کنیم. به نمونه کد زیر توجه کنید:

 

کد HTML:


<table>

<tr>

<th colspan="2">عنوان ۱</th>

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

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

</tr>

<tr>

<td>سلول ۱</td>

<td>سلول ۲</td>

<td>سلول ۳</td>

<td>سلول ۴</td>

</tr>

</table>

کد CSS:


body {

background-color: #eeeeee

}

table {

padding: 3px;

border: 5px solid #000

}

table tr th {

padding: 10px;

border:2px dashed #000

}

table tr td {

padding: 10px;

border:1px solid #000

}

خروجی کد بالا:

تگ tr، th، td

 

حال اگر جدول ما به صورت عمودی باشد از خاصیت rowspan برای ادغام سلول ها استفاده می کنیم.به نمونه کد زیر توجه کنید:

 

کد HTML:


<table>

<tr>

<th rowspan="2">عنوان ۱</th>

<td>سلول ۱</td>

</tr>

<tr>

<td>عنوان ۲</td>

</tr>

<tr>

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

<td>سلول ۲</td>

</tr>

<tr>

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

<td>سلول ۳</td>

</tr>

</table>

کد CSS:


body {

background-color: #eeeeee

}

table {

padding: 3px;

border: 5px solid #000

}

table tr th {

padding: 10px;

border:2px dashed #000

}

table tr td {

padding: 10px;

border:1px solid #000

}

خروجی کد بالا:

تگ tr، th، td, rowspan

 

خلاصه مطلب:

  1. برای ایجاد جدول ها از تگ table استفاده می کنیم.
  2. از تگ th برای ایجاد سر فصل های یک جدول استفاده می شود.
  3. از تگ tr برای ایجاد یک سطر در جدول استفاده می شود.
  4. از تگ td برای ایجاد سلول های یک جدول استفاده می شود.
  5. برای ساخت یک جدول ابتدا باید یک تگ table ایجاد نماییم.
  6. پس از ایجاد یک تگ table کافیست یک تگ tr ایجاد نماییم.
  7. برای ایجاد یک جدول افقی ابتدا باید یک سطر ایجاد می کنیم و عنوان های خود را در آن قرار می دهیم سپس باید سطر دیگری ایجاد نماییم و زیر مجموعه های عنوان های بالا را به ترتیب در آن ها قرار دهیم.
  8. حال فکر کنید می خواهیم یک جدول عمودی بسازید برای اینکار پس از اینکه یک تگ tr باز نمودیم باید یک تگ th و یک تگ td را با هم در یک tr باز نماییم.
  9. در صورتی که جدول ما به صورت افقی بود از خاصیت colspan برای ادغام سلول ها استفاده می کنیم.
  10. اگر جدول ما به صورت ستونی باشد از خاصیت rowspan برای ادغام سلول ها استفاده می کنیم.
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

آخرین ارسالی های وبلاگ

لوگو

logo-samandehi

تاییدیه ها