آموزش جدول در HTML

آموزش جدول در HTML

در این مطلب از سری مقالات آموزشی آموزشگاه طراحی سایت پرتو، به مبحث جداول در HTML  میپردازیم.

جدول‌ها در HTML برای نمایش داده‌های ساختار یافته استفاده می‌شوند، اما در طراحی سایت، اغلب با CSS Grid یا Flexbox جایگزین می‌شوند تا سایت‌ها واکنش گرا و موبایل‌فرندلی باشند.

با این حال، تگ

همچنان برای داده‌های جدولی واقعی (مانند گزارش‌ها یا مقایسه‌ها) ضروری است و نقش مهمی در سئو ایفا می‌کند.اگر می‌خواهید جدول‌های پیشرفته بسازید، در کلاس آموزش HTML-CSS شرکت کرده تا این مفاهیم را به صورت عملی و پروژه‌محور یاد بگیرید.

ساختار جدول در HTML5

جدول‌ها از سطرها (TR) و ستون‌ها تشکیل شده‌اند که سلول‌ها را ایجاد می‌کنند.

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

تگ اصلی TABLE است و ساختار پایه به این شکل است

HTML

<table>
  <tr>
    <td>محتوای سلولtd>

محتوای سلولtd>
  tr>
table>

مثال ساده جدول

HTML

<table>
  <tr>
    <td>سلول ۱td>

سلول ۲td>
tr>

سلول ۳td>

سلول ۴td>
  tr>
table>

برای اضافه کردن حاشیه (border) در جدول

CSS

table {
  border-collapse: collapse; /* حذف فاصله بین سلول‌ها */
  width: 100%;
}

td, th {
  border: 1px solid #ddd;
  padding: 8px;
}

افزودن فضا داخل سلول

در سلول‌ها می‌توانید هر محتوایی قرار دهید: متن، لینک، تصویر یا حتی لیست.

مثال:

HTML

<td>
  <a href="https://pan-ac.ir/">بازدید از آموزشگاه پرتوa>
  
td>

در کلاس آموزش طراحی سایت، یاد می‌گیرید چگونه با padding و margin در CSS فضای داخلی سلول‌ها را حرفه‌ای مدیریت کنید.

تعیین عنوان برای جدول

برای اضافه کردن عنوان (caption) از تگ caption, و برای ساختار معنایی بهتر استفاده کنید. این مطلب برای سئو شدن سایت بسیار مفید است. برای یادگیری نحوه بهنیه سازی یک سایت میتوانید در کلاس اموزش سئو شرکت نمایید.

<table>
  <caption>جدول مثال: خدمات آموزشگاه طراحی سایت پرتوcaption>
  <tr>
    <td>سلول ۱td>
    <td>سلول ۲td>
  tr>
table>

تغییر رنگ سلول یا سطر

به جای ویژگی‌های inline قدیمی، از CSS استفاده کنید:

<tr style="background-color: #f2f2f2;">
  <td>سلول با رنگ پس‌زمینهtd>
tr>

.highlight {
  background-color: #ffcccc;
}

td.highlight {
  color: white;

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

<table>
  <thead>
    <tr>
      <th>ستون ۱th>
      <th>ستون ۲th>
      <th>ستون ۳th>
    tr>
  thead>
  <tbody>
    <tr>
      <td>داده ۱td>
      <td>داده ۲td>
      <td>داده ۳td>
    tr>
  tbody>
table>

ویژگی‌های پیشرفته جدول در HTML:

<td colspan="2">ادغام دو ستونtd>
<td rowspan="3">ادغام سه سطرtd>

<td> td>