تگ Table در HTML

شغل:طراحی وب

درآمد:۱۳۰ هزار دلار سالانه

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

مسیر: ۷ دوره آموزشی

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

منتور ۱ : کافه گپ و گفت

بزن بریم

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

تگ Table در HTML چیست؟

تگ Table در HTML برای نمایش داده ها به صورت جدول (سطر*ستون ) استفاده می شود. تگ جدول در HTML تشکیل شده از عنصر <table> و یک یا چند عنصر <tr>  <th> و <td> می باشد. یک جدول حاوی سطرهایی می باشد (که با تگ <tr> مشخص می شود)، هر سطر شامل تعدادی سلول است (که با تگ <td> مشخص می شود) و یک جدول شامل اطلاعات سرتیتر می باشد (که با تگ <th> مشخص می شود). جداول پیچیده تر نیز شامل عناصر <caption> ،<col> ،<colgroup> ،<thead> ،<tfoot> و <tbody> نیز می باشند.

کاربرد تگ Table در HTML

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

جداول در زندگی روزمره کاربردهای زیادی دارند و بسیاری از اطلاعات در فرمت سطر (Row) و ستون (Column) مرتبط به هم نمایش داده می شوند. نمایش محتوا در جدول این امکان را می دهد که با سرعت بیشتری اطلاعات پیچیده را تحلیل و به ارتباطات بین آنها پی برد و در نهایت به نتیجه مورد نظر رسید. فلسفه اصلی به کارگیری جداول در صفحات وب نیز از این قاعده مستثنی نیست و برای دسته بندی و نمایش محتوایی که نیاز به سطر و ستون دارند، استفاده می شود.

به طور مثال برای اطلاعات آماری، نمایش نمرات، مقایسه محصولات، داده های تحلیلی و هر چیزی که به اصطلاح جدولی یا Tabular است، می توان از تگ Table در HTML استفاده کرد. البته به دلیل استحکام ساختار و راحتی کار مدت ها از جدول در امر طراحی لایه ها و فرم بندی ظاهر صفحات وب نیز استفاده می شد که امروزه به دلیل معرفی زبان CSS توصیه می شود از کاربرد جدول به خصوص در طراحی قالب پروژه هایی که به کسب رتبه بهتر در موتورهای جستجو و اصول سئو (SEO) متکی هستند اجتناب کنید. البته برای طراحی قالب های جدید، تگ های دیگری مانند تگ div گزینه بهتر و توصیه شده است.

کار با تگ Table در HTML

حالا مرحله به مرحله پیش میرویم تا با آمورش تگ Table در HTML یک جدول مانند جدول زیر را بسازید.

قدم اول: ایجاد سطرهای جدول با استفاده از تگ tr

در تگ Table در HTML تگ <tr> که از کلمه table row گرفته شده وظیفه ایجاد سطرهای جدول را دارد. در مثال بالا جدول شما دارای ۴ سطر است که کد HTML ما تا اینجا به اینصورت است:

<table>
 <tr></tr>
 <tr></tr>
 <tr></tr>
 <tr></tr>
</table>

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

قدم دوم: ایجاد خانه‌ های عنوان با استفاده از تگ th

در تگ Table در HTML تگ <th> که از کلمه table heading گرفته شده وظیفه ایجاد خانه‌ های عنوان را دارد. در جدولی که شما دارید ۴ خانه عنوان در سطر اول وجود دارد (نام – نام خانوادگی – سن – شماره تماس). این خانه‌ ها را به راحتی می‌ توان به سطر اول اضافه کرد.

<table>
 <tr>
 <th>نام</th>
 <th>نام خانوادگی</th>
 <th>سن</th>
 <th colspan="1">شماره تماس</th>
 </tr>
 <tr></tr>
 <tr></tr>
 <tr></tr>
</table>

توجه فرمایید در تگ th مربوط به شماره تماس از صفت colspan استفاده شده است. این صفت تعیین می‌ کند که یک خانه فضای چند ستون را اشغال کند. در اینجا به دلیل اینکه سطرهایی با ۱ شماره تماس وجود دارند مقدار این صفت را روی عدد ۱ تنظیم کنید.

قدم سوم: ایجاد خانه‌ های داده با استفاده از تگ td

در تگ Table در HTML تگ <td> که از کلمه table data گرفته شده وظیفه ایجاد خانه‌ های داده را دارد. در جدول شما ۳ سطر برای داده‌ ها وجود دارد. در نهایت کد شما به کد زیر تبدیل می‌ شود:

<table>
 <tr>
 <th>نام</th>
 <th>نام خانوادگی</th>
 <th>سن</th>
 <th colspan="2">شماره تماس</th>
 </tr>
 <tr>
 <td>علی</td>
 <td>اسدی</td>
 <td>22</td>
 <td>09121462657</td>
 </tr>
 <tr>
 <td>محمد</td>
 <td>رضایی</td>
 <td>18</td>
 <td>09367598412</td>
 </tr>
 <tr>
 <td>فرهاد</td>
 <td>محمدی</td>
 <td>09905487632</td>
 </tr>
</table>

تگ های جدول در HTML

مثال از تگ table در HTML

مثال شماره ۱ ساخت تگ Table در HTML: ایجاد یک جدول در یک صفحه (بدون هیچ استایلی)

<body>
 
<table>
 <tr>
  <td>A</td>
  <td>B</td>
  <td>C</td>
 </tr>
 <tr>
  <td>D</td>
  <td>E</td>
  <td>F</td>
 </tr>
</table>
 
</body>

مثال شماره ۲ : ساخت یک جدول با ستون های مشخص + استایل از طریق CSS

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

مثال شماره ۳ : مشخص کردن کپشن(Caption) برای جدول

<table>
<caption>belearn.ir</caption>
<tr>
 ...
</tr>
</table>

مثال شماره ۴ : استفاده از تگ های thead و tbody و tfoot برای مشخص کردن هدر، بدنه اصلی و فوتر جدول

<table>
 
<thead>
 <tr>
  ...
 </tr>
</thead>
 
<tbody>
 <tr>
  ...
 </tr>
</tbody>
 
<tfoot>
 <tr>
  ...
 </tr>
</tfoot>
 
</table>

مثال شماره ۵ : ادغام کردن سطرها با استفاده از صفت rowspan

<tr>
 <td rowspan="2">A</td>
 <td>B</td>
 <td>C</td>
</tr>

مثال شماره ۶ : ادغام کردن ستون ها با استفاده از صفت colspan

<tr>
  <td colspan="2">سایت آموزشی بی لرن</td>
 </tr>

چه مرورگرها از تگ Table در HTML پشتیبانی می کنند؟

بررسی تگ <table> در HTML 4.01 و HTML5

خصوصیت های”align” ،”bgcolor” ،”border” ،”cellpadding” ،”cellspacing” ،”frame” ،”rules” ،”summary” و “width” در HTML5 پشتیبانی نمی شود.

پشتیبانی تگ Table در HTML از صفات و رویدادهای عمومی

تگ جدول از صفات عمومی (Global Attributes) و نیز از رویدادهای عمومی (Event Attributes) در HTML پشتیبانی می کند.

دستورات CSS پیش فرض در تگ جدول

معمولا مرورگرها تگ table در html را به صورت پیش فرض با دستورات CSS زیر نمایش می دهند:

table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}

استایل دهی به جدول

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

table, th, td {
 border: 1px solid black;
 border-collapse: collapse;
}

در این دستور ابتدا ۳ تگ table و th و td انتخاب شدند و در ادامه ویژگی border و border-collapse را به آنها اعمال کنید. این ویژگی ها خطوط جدول را ترسیم می‌ کنند. برای اینکه خانه‌ های جدول حاشیه‌ ای به خود بگیرند تا متن‌ ها واضح تر دیده شوند، می‌توان به کل خانه‌ های جدول ویژگی padding را اعمال کرد.

th, td {
 padding: 10px;
}

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

صفت های تگ های thead ،tbody ،tfoot

۳ تگ thead ،tbody و tfoot شیوه دیگری از فرمت بندی را در جداول html ارائه می کنند. با thead می توان سرتیترها را به صورت گروهی و متمایز نشان داد، تگ tbody بر روی عناصر داخلی جدول تاثیر گذار است و tfoot ردیف پایانی یک جدول را تحت تاثیر قرار می دهد. تگ های مذکور به خودی خود تغییر خاصی ایجاد نمی کنند و باید با ویژگی های css تنظیم شوند.

ادغام سلول ها در جدول

اگر بخواهید اندازه (عرض) یک سلول بیش از اندازه یک ستون باشد، می توانید از صفت colspan استفاده کنید. این صفت چندین ستون را با هم ترکیب می کند و مقدار صفت colspan تعداد ستون های ادغامی را تعیین می کند. مثال زیر، یک خانه از جدول با اندازه دو ستون را نمایش می دهد:

کد HTML

<table style=”width:100%”>

  <tr>

  <th>Name</th>

  <th colspan=”2″>Mobile No.</th>

  </tr>

  <tr>

  <td>Ajeet Maurya</td>

  <td>7503520801</td>

  <td>9555879135</td>

  </tr>

</table>

کد CSS

<style>

table, th, td {

  border: ۱px solid black;

  border-collapse: collapse;

}

th, td {

  padding: ۵px;

}

</style>

خروجی ادغام سلول ها در جدول

ادغام سطرها در جدول

اگر بخواهید اندازه (ارتفاع) یک سلول بیش از اندازه یک ردیف باشد، می توانید از صفت rowspan استفاده کنید. این صفت چندین ردیف را با هم ترکیب می کند. تعداد ردیف های ادغام شده به مقدار صفت rowspan بستگی دارد. در مثال زیر یک خانه از جدول به اندازه دو ردیف را نشان می دهد:

کد HTML

<table>

<tr><th>Name</th><td>Ajeet Maurya</td></tr>

<tr><th rowspan=”2″>Mobile No.</th><td>7503520801</td></tr>

<tr><td>9555879135</td></tr>

</table>

کد CSS

<style>

table, th, td {

  border: ۱px solid black;

  border-collapse: collapse;

}

th, td {

  padding: ۱۰px;

}

</style>

خروجی ادغام سطر ها در جدول

سخن پایانی

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

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

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

شغل:طراحی وب

درآمد:۱۳۰ هزار دلار سالانه

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

مسیر: ۷ دوره آموزشی

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

منتور ۱ : کافه گپ و گفت

بزن بریم