فهرست سرفصل‌های HTML
خانه (HOME) مقدمه (Introduction) ویرایشگرها (Editors) پایه ها (Basic) المان ها (Elements) ویژگی ها (Attributes) سرفصل ها (Headings) پاراگراف ها (Paragraphs) استایل ها (Styles) قالب بندی متن (Formatting) نقل قول ها (Quotations) توضیحات (Comments) رنگ ها (Colors) مدل RGB (RGB) مدل HEX (HEX) مدل HSL (HSL) استفاده از CSS (CSS) لینک ها (Links) رنگ لینک ها (Link Colors) نشانه های لینک (Link Bookmarks) تصاویر (Images) نقشه تصویر (Image Map) تصویر پس زمینه (Background Images) المان Picture (The Picture Element) فاوآیکون (Favicon) عنوان صفحه (Page Title) جداول (Tables) مرزهای جدول (Table Borders) اندازه های جدول (Table Sizes) سربرگ های جدول (Table Headers) فاصله داخلی و بیرونی جدول (Padding & Spacing) ادغام سلول ها (Colspan & Rowspan) استایل دهی جدول (Table Styling) گروه ستون ها (Table Colgroup) فهرست ها (Lists) فهرست نامرتب (Unordered Lists) فهرست مرتب (Ordered Lists) سایر فهرست ها (Other Lists) بلوک ها و درون خطی ها (Block & Inline) المان div (Div) کلاس ها (Classes) شناسه ها (Id) فریم ها (Iframes) جاوااسکریپت (JavaScript) مسیر فایل ها (File Paths) بخش head (Head) چیدمان (Layout) طراحی واکنش گرا (Responsive) کدهای رایانه ای (Computercode) المان های معنایی (Semantics) راهنمای نگارش (Style Guide) نهادها (Entities) نمادها (Symbols) ایموجی ها (Emojis) کدگذاری نویسه ها (Charsets) رمزگذاری URL (URL Encode) مقایسه با XHTML (vs. XHTML) فرم ها (Forms) ویژگی های فرم (Form Attributes) المان های فرم (Form Elements) انواع ورودی (Input Types) ویژگی های ورودی (Input Attributes) بوم نقاشی (Canvas) بردارهای گرافیکی (SVG) رسانه ها (Media) ویدیو (Video) صدا (Audio) افزونه ها (Plug-ins) یوتیوب (YouTube) رابط های وب (Web APIs) مکان یابی جغرافیایی (Geolocation) کشیدن و رها کردن (Drag and Drop) ذخیره سازی وب (Web Storage) کارگران وب (Web Workers) رویدادهای ارسالی از سرور (Server-Sent Events-SSE) توضیح (<!-->) اعلان نوع سند (<!DOCTYPE>) پیوند (a) اختصار (abbr) سرنام (acronym) آدرس (address) اپلت (applet) ناحیه نقشه (area) مقاله (article) کنار نویس (aside) صوت (audio) پررنگ (b) پایه (base) فونت پایه (basefont) جداساز دوطرفه (bdi) جهت متن (bdo) بزرگ (big) بلوک نقل (blockquote) بدنه (body) خط جدید (br) دکمه (button) بوم (canvas) عنوان جدول (caption) مرکز (center) ارجاع (cite) کد (code) ستون (col) گروه ستون (colgroup) داده (data) فهرست داده (datalist) تعریف شرح (dd) حذف (del) جزئیات (details) اصطلاح (dfn) دایرکتوری (dir) بخش (div) فهرست تعاریف (dl) عنوان تعریف (dt) تأکید (em) جاسازی (embed) مجموعه فیلدها (fieldset) عنوان شکل (figcaption) شکل (figure) فونت (font) پاورقی (footer) فرم (form) فریم (frame) مجموعه فریم ها (frameset) سرفصل ها (h1–h6) سر (head) سربرگ (header) گروه عنوان (hgroup) خط افقی (hr) سند HTML (html) مورب (i) چارچوب درون صفحه ای (iframe) تصویر (img) ورودی (input) درج (ins) صفحه کلید (kbd) برچسب (label) افسانه (legend) مورد فهرست (li) پیوند منبع (link) بخش اصلی (main) نقشه تصویر (map) نشانه گذاری (mark) منو (menu) فراداده (meta) سنجش (meter) ناوبری (nav) بدون فریم (noframes) بدون اسکریپت (noscript) شیء (object) فهرست مرتب (ol) گروه گزینه ها (optgroup) گزینه (option) خروجی (output) پاراگراف (p) پارامتر (param) تصویر پاسخ گو (picture) پیش قالب (pre) پیشرفت (progress) نقل قول کوتاه (q) پرانتز روبی (rp) متن روبی (rt) روبی (ruby) خط زده (s) نمونه خروجی (samp) اسکریپت (script) جستجو (search) بخش (section) انتخاب (select) کوچک (small) منبع (source) دامنه (span) خط بطلان (strike) پررنگ معنایی (strong) سبک (style) زیرنویس (sub) خلاصه (summary) بالانویس (sup) بردار گرافیکی (svg) جدول (table) بدنه جدول (tbody) سلول جدول (td) الگو (template) ناحیه متن (textarea) پاورقی جدول (tfoot) سر ستون جدول (th) سربرگ جدول (thead) زمان (time) عنوان (title) سطر جدول (tr) زیرنویس رسانه (track) تله تایپ (tt) زیرخط دار (u) فهرست نامرتب (ul) متغیر (var) ویدیو (video) شکست خط (wbr)
HTML

HTML — بدنه جدول (tbody)

آخرین بروزرسانی: 1404/08/07

بدنه جدول (tbody)

تگ «tbody» بدنه جدول را گروه بندی می کند. «بدنه جدول (Table Body)» یعنی ردیف های اصلیِ داده. مثل سطرهای نمره ها در کارنامه، جدا از عنوان و جمع بندی.

تعریف و جای درستِ استفاده

«بدنه جدول (tbody)» بخشی از جدول است. کنارِ «سربرگ (thead)» و «پاورقی (tfoot)» می آید. مرورگر می تواند بدنه را جدا اسکرول کند.

همیشه <tbody> بعد از <caption>، <colgroup> و <thead> باشد. داخلش حتماً یک یا چند <tr> قرار بده.

برای آشنایی با ساختار کامل، صفحه جدول (table) و سربرگ (thead) و پاورقی (tfoot) را ببین.

مثال: جدول با thead، tbody و tfoot

&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Month&lt;/th&gt;
      &lt;th&gt;Savings&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;January&lt;/td&gt;
      &lt;td&gt;$100&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;February&lt;/td&gt;
      &lt;td&gt;$80&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;tfoot&gt;
    &lt;tr&gt;
      &lt;td&gt;Sum&lt;/td&gt;
      &lt;td&gt;$180&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tfoot&gt;
&lt;/table&gt;

مشاهده در ادیتور

استایل دهی بخش ها با CSS

&lt;html&gt;
  &lt;head&gt;
    &lt;style&gt;
      thead {
        color: green;
      }
      tbody {
        color: blue;
      }
      tfoot {
        color: red;
      }
      table, th, td {
        border: 1px solid black;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;table&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Month&lt;/th&gt;
          &lt;th&gt;Savings&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;January&lt;/td&gt;
          &lt;td&gt;$100&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;February&lt;/td&gt;
          &lt;td&gt;$80&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;tfoot&gt;
        &lt;tr&gt;
          &lt;td&gt;Sum&lt;/td&gt;
          &lt;td&gt;$180&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tfoot&gt;
    &lt;/table&gt;
  &lt;/body&gt;
&lt;/html&gt;

مشاهده در ادیتور

تراز متن داخل tbody

&lt;table style="width:100%;"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Month&lt;/th&gt;
      &lt;th&gt;Savings&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody style="text-align:right;"&gt;
    &lt;tr&gt;
      &lt;td&gt;January&lt;/td&gt;
      &lt;td&gt;$100&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;February&lt;/td&gt;
      &lt;td&gt;$80&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;

مشاهده در ادیتور

تراز عمودی در tbody

&lt;table style="width:50%;"&gt;
  &lt;tr&gt;
    &lt;th&gt;Month&lt;/th&gt;
    &lt;th&gt;Savings&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tbody style="vertical-align:bottom;"&gt;
    &lt;tr style="height:100px;"&gt;
      &lt;td&gt;January&lt;/td&gt;
      &lt;td&gt;$100&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr style="height:100px;"&gt;
      &lt;td&gt;February&lt;/td&gt;
      &lt;td&gt;$80&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;

مشاهده در ادیتور

مقادیر پیش فرض CSS برای tbody

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

مشاهده در ادیتور

نکته: از tr برای سطرها و از td برای خانه ها استفاده کن. همچنین لینک بدنه جدول (tbody) همیشه مرجع سریع تو است.

جمع بندی سریع

  • tbody بدنه داده های جدول است.
  • همیشه بعد thead و قبلِ tfoot بیاید.
  • داخل tbody فقط سطرهای tr می آیند.
  • می توان تراز افقی و عمودی داد.
  • اسکرول بدنه مستقل ممکن است.