اُپن تگ | منابع و محتوای آموزشی برای طراحان وب
بدون نتیجه
نمایش همه نتایج
  • ثبت نام / ورود
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS
اپن تگ
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS
بدون نتیجه
نمایش همه نتایج
بدون نتیجه
نمایش همه نتایج
اپن تگ

خانه › مقالات › آموزش سریع ساخت جدول (table) در HTML و استفاده بهینه از آن

آموزش سریع ساخت جدول (table) در HTML و استفاده بهینه از آن

آموزش سریع ساخت جدول در HTML

استفاده از جدول‌ های HTML در صفحات وب معمولا برای نمایش منظم و طبقه بندی شده‌ی دسته‌ای از اطلاعات کاربرد بسیاری دارد. بسیاری از جدول‌های قیمت و پلن‌های فروش در وبسایت‌های مختلف توسط جدول‌ های HTML ساخته می‌شوند. البته بعضی از آنها توسط تگ‌های لیست ul ایجاد می‌شوند که با کمک CSS مکاندهی شده و شبیه جدول می‌شوند.

در طرف دیگر اگر قصد دارید تا حجم زیادی از داده‌های پیچیده را بصورت منظم و ساختارمند نمایش دهید باید از جدول‌های HTML بهره ببرید.

آنچه در ادامه می‌خوانید:
1. ساختارمند کردن یک جدول (table)
2. افزودن عنوان به جدول (table) HTML
3. ادغام چند سلول در جدول (table) با استفاده از صفات rowspan و colspan
4. ترکیب تمام آنچه تا به حال در این مقاله ذکر شده است
4.1. جمع بندی

ساختارمند کردن یک جدول (table)

جدول‌ها توسط عناصر تودرتویی داخل تگ table ایجاد می‌شوند. جدول‌ها بصورت ردیف چیده می‌شوند و نه ستون. این کار توسط تگ <tr> انجام می‌شود. هر ردیف در جدول از یک یا چند سلول داده (تگ td) در جدول تشکیل می‌شوند.  و ستونها در واقع از کنار هم قرار گرفتن عناصر ردیف کنار همدیگر تشکیل می‌شند.

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

html

<table>
   <tr>
      <td>ردیف</td>
      <td>رنگ</td>
      <td>اندازه</td>
      <td>جنس</td>
   </tr>
   <tr>
      <td>۱</td>
      <td>قرمز</td>
      <td>کوچک</td>
      <td>نخ</td>
   </tr>
   <tr>
      <td>۲</td>
      <td>آبی</td>
      <td>متوسط</td>
      <td>پنبه</td>
   </tr>
   <tr>
      <td>۳</td>
      <td>سبز</td>
      <td>بزرگ</td>
      <td>کنف</td>
   </tr>
</table>

مشاهده و ویرایش کد در حالت تمام صفحه

علاوه بر تگ‌های اصلی برای ساخت جدول که ذکر شد، می‌توان از تگ‌هایی جهت افزودن مفهوم منطقی (semantic meaning) به ساختار جدول در ساختار HTML استفاده کرد. مهمترین آنها تگی است که برای شناساندن تیتر استفاده می شود و آن تگ <th> است. این تگ به جای تگ <td> در سلولهایی که در ابتدای هر ستوان قرار گرفته‌اند استفاده می‌شود تا هویت مقادیری که زیر آن قرار می‌گیرند را مشخص کند.

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

  • تگ <thead>: از این تگ برای دربر گرفتن سر تیترها یا تگ‌های <th> استفاده می‌شود.
  • تگ <tfoot>: از این به عنوان دربر گیرنده قسمتهایی از جدول که آخرین ردیف آن را به عنوان فوتر تشکیل می‌دهند استفاده می‌شود.
  • تگ <tbody>: از این تگ برای در بر گرفتن تمام داده‌هایی که در بخش میانی جدول و مابین هدر و فوتر قرار دارند استفاده می شود.

در زیر مثالی از استفاده این عناصر در جدول را می‌بینیم:

css

html {
    direction: rtl;
    font-family: "Segoe UI";
}
table {
    border-collapse: collapse;
    text-align: center;
}
td,
th {
    border: 1px solid #ccc;
    padding: 12px 25px;
}
th {
    background-color: #676767;
    color: #ffffff;
}
tbody td {
    background-color: #f5f5f5;
}
tfoot td {
    background-color: #eafad8;
}

html

<table>
    <thead>
       <tr>
           <th>ردیف</th>
           <th>رنگ</th>
           <th>اندازه</th>
           <th>جنس</th>
       </tr>
    </thead>
    <tbody>
        <tr>
           <td>۱</td>
           <td>قرمز</td>
           <td>کوچک</td>
           <td>نخ</td>
        </tr>
        <tr>
           <td>۲</td>
           <td>آبی</td>
           <td>متوسط</td>
           <td>نخ</td>
        </tr>
        <tr>
           <td>۳</td>
           <td>سبز</td>
           <td>بزرگ</td>
           <td>پنبه</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
           <td>قیمت</td>
           <td>۱۵۰۰۰</td>
           <td>۱۵۰۰۰</td>
           <td>۱۵۰۰۰</td>
        </tr>
    </tfoot>
</table>

مشاهده و ویرایش کد در حالت تمام صفحه

افزودن عنوان به جدول (table) HTML

بعضی وقتها قصد داریم تا اطلاعاتی راجع به جدول به مخاطب بدهیم. یکی از چیزهایی که جدول‌ها از داشتن آن محروم هستند، عنوان برای آنهاست. برای اینکار میتوان از تگ h2 استفاده که البته باید بیرون از ساختار جدول از آن استفاده کرد. اما اگر بخواهیم عنوانی درون ساختار <table> برای آن استفاده کنیم می‌توان از تگ <caption> استفاده کرد. برای این منظور عبارت مورد نظرمان داخل تگ <caption> و در ابتدای تگ <table> قرار می‌دهیم.

html

<table>
    <caption>
        این یک جدول HTML است.
    </caption>
    <tr>
        <th>ردیف</th>
        <th>رنگ</th>
        <th>اندازه</th>
        <th>جنس</th>
    </tr>
    <tr>
        <td>۱</td>
        <td>قرمز</td>
        <td>کوچک</td>
        <td>نخ</td>
    </tr>
    <tr>
        <td>۲</td>
        <td>آبی</td>
        <td>متوسط</td>
        <td>نخ</td>
    </tr>
    <tr>
        <td>۳</td>
        <td>سبز</td>
        <td>بزرگ</td>
        <td>پنبه</td>
    </tr>
    <tr>
        <td>قیمت</td>
        <td>۱۵۰۰۰</td>
        <td>۱۵۰۰۰</td>
        <td>۱۵۰۰۰</td>
    </tr>
</table>

مشاهده و ویرایش کد در حالت تمام صفحه

ادغام چند سلول در جدول (table) با استفاده از صفات rowspan و colspan

می‌توان با ادغام سلولهایی که از جدول که محتوای یکسان دارند کمی ظاهر جدول را منظم‌تر کرد. برای این منظور میتوان از صفت rowspan در یکی از سلول‌های جدول (تگ td) استفاده کرد تا سلولهای همجوار که داده‌های تکراری دارند در راستای عمودی یا ستون را با آن ادغام نمود.  صفت colspan هم همانند rowspan عمل می‌کند با این تفاوت که اینبار سلول‌های همجوار در راستای افقی یا ردیف با هم ادغام می‌شوند. در مثال زیر نحوه عمکرد این صفت را می‌بینیم.

html

<table>
    <caption>
        این یک جدول HTML است.
    </caption>
    <thead>
       <tr>
           <th>ردیف</th>
           <th>رنگ</th>
           <th>اندازه</th>
           <th>جنس</th>
       </tr>
    </thead>
    <tbody>
        <tr>
           <td>۱</td>
           <td>قرمز</td>
           <td>کوچک</td>
           <td rowspan="2">نخ</td>
        </tr>
        <tr>
           <td>۲</td>
           <td>آبی</td>
           <td>متوسط</td>
        </tr>
        <tr>
           <td>۳</td>
           <td>سبز</td>
           <td>بزرگ</td>
           <td>پنبه</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
           <td>قیمت</td>
           <td colspan="3">۱۵۰۰۰</td>
        </tr>
    </tfoot>
</table>

مشاهده و ویرایش کد در حالت تمام صفحه

ترکیب تمام آنچه تا به حال در این مقاله ذکر شده است

در مثال زیر تمام آنچه را که در این مقاله برای ساختارمندی و نظم بیشتر کدهای HTML برای ساخت جدول عنوان شده بکار می‌بریم:

css

html {
    direction: rtl;
    font-family: "Segoe UI";
}
table {
    border-collapse: collapse;
    text-align: center;
}
caption {
    padding-bottom: 7px;
    color: #777777;
    font-style: italic;
}
td,
th {
     border: 1px solid #ccc;
     padding: 12px 25px;
}
th {
     background-color: #676767;
     color: #ffffff;
}
tbody td {
     background-color: #f5f5f5;
}
tfoot td {
     background-color: #eafad8;
}

html

<table>
    <caption>
        این یک جدول HTML است.
    </caption>
    <thead>
       <tr>
           <th>ردیف</th>
           <th>رنگ</th>
           <th>اندازه</th>
           <th>جنس</th>
       </tr>
    </thead>
    <tbody>
        <tr>
           <td>۱</td>
           <td>قرمز</td>
           <td>کوچک</td>
           <td rowspan="2">نخ</td>
        </tr>
        <tr>
           <td>۲</td>
           <td>آبی</td>
           <td>متوسط</td>
        </tr>
        <tr>
           <td>۳</td>
           <td>سبز</td>
           <td>بزرگ</td>
           <td>پنبه</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
           <td>قیمت</td>
           <td colspan="3">۱۵۰۰۰</td>
        </tr>
    </tfoot>
</table>

مشاهده و ویرایش کد در حالت تمام صفحه

جمع بندی

جدول‌ها می‌توانند راهی مناسب را برای نمایش و ارائه‌ی داده‌ها در اختیار ما قرار دهند. دستورات جدول در HTML ساده است و با کمی تمرین می‌توانید حتی جداول پیچیده را طراحی و پیاده‌سازی نمایید.

پست قبلی

واحد‌های اندازه در CSS

پست بعدی

آموزش ریسپانسیو کردن تصاویر در صفحات وب

پست بعدی
آموزش تصاویر ریسپانسیو

آموزش ریسپانسیو کردن تصاویر در صفحات وب

دیدگاهتان را بنویسید لغو پاسخ

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

*

code

بنر مرجع html
بنر مرجع css

اُپن تگ

اپن تگ در تلاش است با گردآوری منابع و ارائه محتوای آموزشی در حوزه طراحی وب، راه را برای دسترسی طراحان وب و علاقه‌مندان به آخرین روش‌ها و تکنولوژی‌های این بخش از صنعت توسعه وب هموارتر سازد.

با خبر باشید!

برای اطلاع از مطالب ويژه و دوره های آموزشی جدید در خبرنامه اُپن‌تگ عضو شوید.

  • درباره
  • ارتباط با ما

تمامی حقوق برای اپن تگ محفوظ است. استفاده از مطالب تنها با ذکر منبع مجاز است.

  • ورود
  • ثبت نام
  • سبد خرید
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS

خوش آمدید!

به حساب خود وارد شوید

فراموشی رمز عبور ؟ ثبت نام

ساخت حساب کاربری!

فرم زیر را برای ثبت نام تکمیل نمایید

همه فیلد ها ضروری اند وارد شدن

رمز عبور خود را بازیابی کنید

لطفاً ایمیل یا نام کاربری خود را جهت بازیابی رمز عبور وارد نمایید

وارد شدن