میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

جدول در Html

با سلام به خدمت دوستان عزیز و گرامی در این آموزش قصد داریم جدول در Html مطالبی را یاد بدهیم .

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

 

استانمرکز استان
آذربایجان شرقیتبریز
تهرانتهران
خزاسان رضویمشهد

 

تگ <table> 

تگ <table> جدول در HTML را تعریف می کند.
هر سطر جدول با برچسب <tr> تعریف می شود.
هر سربرگ جدول با برچسب <th> تعریف می شود.
هر داده / سلول جدول با برچسب <td> تعریف می شود.
به طور پیش فرض ، متن در عناصر <th> پررنگ و مرکز است.
به طور پیش فرض ، متن در عناصر <td> منظم و تراز از چپ است.
به مثال زیر توجه کنید

<table>
<tr>
<th>استان</th>
<th>مرکز استان</th>
</tr>
<tr>
<td>آذربایجان شرقی</td>
<td>تبریز</td>
</tr>
<tr>
<td>تهران</td>
<td>تهران</td>
</tr>
<tr>
<td>خزاسان رضوی</td>
<td>مشهد</td>
</tr>
</table>

صفت colspan

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

به مثال زیر نگاه کنید :

 

<table>
<tr>
<th>نام</th>
<th colspan=”2″>تلفن</th>
</tr>
<tr>
<td>امیر</td>
<td>09351111</td>
<td>09361111</td>
</tr>
</table>

 

نامتلفن
امیر۰۹۳۵۱۱۱۱۰۹۳۶۱۱۱۱

 

حال اگر بخواهیم همین کار را با ردیف انجام دهیم از صفت زیر استفاده می کنیم

 

صفت rowspan 

ایجاد یک بازه سلول بیش از یک ردیف در جدول

 

<table>
<tr>
<th>نام :</th>
<td>امیر</td>
</tr>
<tr>
<th rowspan=”2″>تلفن :</th>
<td>09361111</td>
</tr>
<tr>
<td>09351111</td>
</tr>
</table>

 

 

نام :امیر
تلفن :۰۹۳۶۱۱۱۱
۰۹۳۵۱۱۱۱

 

تگ <caption>

برای افزودن عنوان به جدول در Html ، از تگ  <caption> استفاده کنیم که بعد از تگ جدول <table> استفاده می شودو در بالای جدول نمایش داده می شود .
<table>
<caption>نام مراکز استان ها</caption>
</table>

تگ <colgroup> : گروهی از یک یا چند ستون را در جدول برای قالب بندی مشخص می کند

تگ <col> : خصوصیات ستون را برای هر ستون در یک عنصر <colgroup> مشخص می کند

تگ <thead> : محتوای عنوان را در یک جدول گروه بندی کنید

تگ <tbody> : محتوای بدن را در یک جدول گروه بندی کنید

تگ <tfoot> : محتوای پاورقی را در یک جدول گروه بندی کنید

 

 

 

امیدواریم این بخش از آموزش در مورد جدول در Html و تگ <table> نیز برای شما مفید واقع شده باشد و ما را در تلگرام و اینستاگرام دنبال کنید .

 

ارسال دیدگاه

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

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟