زبان سلام
ویرایشگر آنلاین

درس ۲۸ از ۴۵ · صفحه‌های وب

جدول‌ها

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

در این درس
  1. جدول را کِی به کار ببریم
  2. اجزای یک جدول
  3. خانه‌های سرستون و دامنه
  4. خانه‌هایی که چند جا را می‌پوشانند
  5. جدول‌های پیچیده و سرستون‌ها
  6. آراستن ستون‌های کامل
  7. جدول را زیبا کنیم
  8. جدول پهن روی صفحه‌ی کوچک
  9. جدول دسترس‌پذیر، خلاصه
  10. مرجع: همه‌ی عنصرهای جدول
  11. خودتان امتحان کنید

جدول را کِی به کار ببریم

جدول برای داده‌هایی است که در یک صفحه‌ی گسترده هم می‌گذاشتید: هر خانه به‌خاطر ردیف و ستونش معنا دارد. فهرست قیمت‌ها، برنامه‌ی هفتگی مدرسه و جدول نتیجه‌ها همه جدول‌اند. صفحه‌ای که منو در یک طرف و متن در طرف دیگر دارد جدول نیست: آن کار چیدمان با CSS است که درس چیدمان یادتان می‌دهد. صفحه‌خوان‌ها جدول را به‌عنوان جدول اعلام می‌کنند و هر خانه را همراه با سرستون‌هایش می‌خوانند؛ پس جدولی که برای چیدمان به کار رفته باشد فهم صفحه را برای کسانی که به صفحه‌خوان تکیه دارند سخت می‌کند.

اجزای یک جدول

جدول ردیف‌ها را نگه می‌دارد و ردیف خانه‌ها را. خانه در سلام ستون نوشته می‌شود. این نام ممکن است گمراهتان کند: ستون یک خانه است (در HTML همان td) و ستون‌های واقعی از کنار هم قرار گرفتن خانه‌ها پدید می‌آیند. ردیف‌ها را می‌شود مستقیم درون جدول گذاشت، اما جدول‌های واقعی سه بخش دارند: سرصفحه برای سرستون‌ها، اصلی برای داده‌ها و پاورقی برای جمع‌ها. این سه واژه درون جدول همان thead و tbody و tfoot در HTML‌اند. بیرون از جدول همین واژه‌ها سرصفحه، بخش اصلی و پاورقی‌ی صفحه‌اند و مترجم از جای نوشتنشان می‌فهمد کدام را می‌خواهید.

عنوان جدول (caption) نام جدول است. باید اولین چیز درون جدول باشد، وگرنه مترجم با خطا می‌ایستد. هر جدول فقط یک سرصفحه و یک پاورقی دارد، اما هر تعداد بخش اصلی که برای دسته‌کردن ردیف‌ها لازم دارید.

web-tables-basic.salam
صفحه:
    عنوان = "فهرست قیمت"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    سراسری: گزینشگر = "th, td" فاصله = "8px 14px" کادر پایین = "1px solid #cbd5e1" ترازمتن = "start" پایان
    سراسری: گزینشگر = "table" ادغام کادر = collapse پایان
    جدول:
        عنوان جدول: محتوا = "قیمت میوه‌ها در این هفته" پایان
        سرصفحه:
            ردیف:
                ستون: محتوا = "میوه" پایان
                ستون: محتوا = "کیلو" پایان
                ستون: محتوا = "قیمت (هزار تومان)" پایان
            پایان
        پایان
        اصلی:
            ردیف:
                ستون: محتوا = "سیب" پایان
                ستون: محتوا = "۳" پایان
                ستون: محتوا = "۴۵۰" پایان
            پایان
            ردیف:
                ستون: محتوا = "گلابی" پایان
                ستون: محتوا = "۲" پایان
                ستون: محتوا = "۳۲۰" پایان
            پایان
        پایان
        پاورقی:
            ردیف:
                ستون: محتوا = "جمع" پایان
                ستون: محتوا = "۵" پایان
                ستون: محتوا = "۷۷۰" پایان
            پایان
        پایان
    پایان
پایان

دو قاعده‌ی سراسری آراستن را انجام می‌دهند. th, td همه‌ی خانه‌ها را برمی‌گزیند و به آن‌ها فاصله‌ی داخلی و یک خط زیرشان می‌دهد، و table با ادغام کادر = collapse خط‌های خانه‌های همسایه را یکی می‌کند. جدول بی‌CSS هیچ کادری ندارد، پس هر جدولی که بخواهد جدول به نظر برسد کمی CSS لازم دارد.

خانه‌های ردیف سرصفحه، بی‌آنکه خواسته باشید، th شدند. این همان قاعده‌ی بافت است: ستون درون سرصفحه خانه‌ی سرستون است. مرورگرها خانه‌ی سرستون را پررنگ و وسط‌چین می‌کشند و مهم‌تر اینکه به فناوری کمکی می‌گویند این خانه‌ها سرستون‌اند. پاورقی فرق دارد: مگر خودتان بخواهید فقط خانه‌ی داده دارد، پس واژه‌ی «جمع» در ردیف آخر اینجا ساده است. بخش بعد این را درست می‌کند.

خانه‌های سرستون و دامنه

سرستون فقط در ردیف بالا نیست. وقتی نخستین خانه‌ی هر ردیف آن ردیف را نام می‌برد، آن هم سرستون است. روی یک ستون بنویسید سرستون = درست تا th شود. دقت کنید سرستون این‌جا ویژگی خانه است، نه عنصر سرتیتر درس متن؛ و با سرستون‌ها (فهرست شناسه‌ها، در بخش «جدول‌های پیچیده») اشتباه نشود.

بعد با دامنه بگویید سرستون به کدام سو اشاره می‌کند: ستون (به انگلیسی col) برای سرستونی که خانه‌های زیرش را توضیح می‌دهد و ردیف (row) برای سرستونی که خانه‌های کنارش را. دو مقدار دیگر هم برای سرستونی هست که یک گروه ردیف یا ستون را در بر می‌گیرد: گروه ردیف و گروه ستون. در جدول ساده مرورگرها دامنه را درست حدس می‌زنند، اما نوشتنش هزینه‌ای ندارد و حدس را برمی‌دارد.

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

web-tables-scope.salam
صفحه:
    عنوان = "سرستون و سرردیف"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    سراسری: گزینشگر = "th, td" فاصله = "8px 16px" کادر = "1px solid #cbd5e1" پایان
    سراسری: گزینشگر = "table" ادغام کادر = collapse پایان
    جدول:
        عنوان جدول: محتوا = "نمره‌ی آزمونک‌ها" پایان
        سرصفحه:
            ردیف:
                ستون: محتوا = "دانش‌آموز" دامنه = ستون پایان
                ستون: محتوا = "آزمونک ۱" دامنه = ستون کوته‌نوشت = "آ۱" پایان
                ستون: محتوا = "آزمونک ۲" دامنه = ستون کوته‌نوشت = "آ۲" پایان
            پایان
        پایان
        اصلی:
            ردیف:
                ستون: سرستون = درست دامنه = ردیف محتوا = "سارا" پایان
                ستون: محتوا = "۱۷" پایان
                ستون: محتوا = "۱۹" پایان
            پایان
            ردیف:
                ستون: سرستون = درست دامنه = ردیف محتوا = "امید" پایان
                ستون: محتوا = "۱۴" پایان
                ستون: محتوا = "۱۸" پایان
            پایان
        پایان
    پایان
پایان

header column و heading column دو نامی‌اند که مرجع پایین به خانه‌ی سرستون می‌دهد: اولی خانه‌ای است که در ردیف سرصفحه ایستاده و دومی خانه‌ای که با سرستون = درست علامت زده‌اید. در برنامه‌ی شما هر دو ستون نوشته می‌شوند و هر دو th می‌سازند.

خانه‌هایی که چند جا را می‌پوشانند

یک خانه می‌تواند بیش از یک جا را بگیرد. پوشش ستون (colspan) آن را روی چند ستون و پوشش ردیف (rowspan) روی چند ردیف می‌کشد. وقتی خانه‌ای را می‌کشید، خانه‌هایی را که می‌پوشاند نباید بنویسید: ردیفی که خانه‌ای با پوشش ستون = 2 دارد یک خانه‌ی کمتر می‌نویسد، و ردیف زیر خانه‌ی پوشش ردیف = 2 در آن سو یک خانه‌ی کمتر. اگر زیاد بنویسید جدول به هم می‌ریزد و خطایی هم نمی‌آید، پس خانه‌های هر ردیف را همان لحظه‌ای که می‌نویسید بشمارید.

web-tables-span.salam
صفحه:
    عنوان = "برنامه‌ی هفتگی"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    سراسری: گزینشگر = "th, td" فاصله = "10px 18px" کادر = "1px solid #94a3b8" ترازمتن = center پایان
    سراسری: گزینشگر = "table" ادغام کادر = collapse پایان
    جدول:
        عنوان جدول: محتوا = "سه‌شنبه" پایان
        سرصفحه:
            ردیف:
                ستون: محتوا = "ساعت" پایان
                ستون: محتوا = "کلاس الف" پایان
                ستون: محتوا = "کلاس ب" پایان
            پایان
        پایان
        اصلی:
            ردیف:
                ستون: سرستون = درست محتوا = "۰۹:۰۰" پایان
                ستون: محتوا = "ریاضی" پوشش ردیف = 2 پس زمینه = "#dbeafe" پایان
                ستون: محتوا = "نقاشی" پایان
            پایان
            ردیف:
                ستون: سرستون = درست محتوا = "۱۰:۰۰" پایان
                ستون: محتوا = "موسیقی" پایان
            پایان
            ردیف:
                ستون: سرستون = درست محتوا = "۱۲:۰۰" پایان
                ستون: محتوا = "ناهار برای همه" پوشش ستون = 2 پس زمینه = "#fef3c7" پایان
            پایان
        پایان
    پایان
پایان

در برنامه‌ی هفتگی، خانه‌ی ریاضی پوشش ردیف = 2 دارد، پس ردیف دوم فقط موسیقی را می‌نویسد که جای کلاس ب را پر می‌کند. ردیف ناهار پوشش ستون = 2 دارد و هر دو کلاس را می‌گیرد.

جدول‌های پیچیده و سرستون‌ها

گاهی یک سرستون برای توضیح یک خانه کافی نیست. در جدولی با دو سطح سرستون یا با خانه‌های ادغام‌شده، یک خانه‌ی داده ممکن است به چند سرستون تعلق داشته باشد. به هر خانه‌ی سرستون یک شناسه بدهید و آن شناسه‌ها را با فاصله از هم در ویژگی سرستون‌ها (headers) خانه‌ی داده بنویسید. سلام می‌سنجد که هر شناسه وجود داشته باشد. نمونه‌ی زیر به هر خانه‌ی داده هر دو سرستونش، سرستون ردیف و سرستون ستون را می‌دهد تا شکل کار را ببینید. روی جدول ساده سرستون‌ها ننویسید: همان‌جا دامنه بس است و کار بسیار کمتری دارد.

web-tables-headers.salam
صفحه:
    عنوان = "ساعت کار"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    سراسری: گزینشگر = "th, td" فاصله = "8px 16px" کادر = "1px solid #cbd5e1" پایان
    سراسری: گزینشگر = "table" ادغام کادر = collapse پایان
    جدول:
        عنوان جدول: محتوا = "ساعت کار دو فروشگاه" پایان
        ردیف:
            ستون: سرستون = درست شناسه = "shop" محتوا = "فروشگاه" پایان
            ستون: سرستون = درست شناسه = "wk" محتوا = "روزهای کاری" پایان
            ستون: سرستون = درست شناسه = "we" محتوا = "آخر هفته" پایان
        پایان
        ردیف:
            ستون: سرستون = درست شناسه = "bk" محتوا = "کتاب" پایان
            ستون: محتوا = "۹ تا ۱۸" سرستون‌ها = "bk wk" پایان
            ستون: محتوا = "۱۰ تا ۱۴" سرستون‌ها = "bk we" پایان
        پایان
        ردیف:
            ستون: سرستون = درست شناسه = "cf" محتوا = "قهوه" پایان
            ستون: محتوا = "۷ تا ۲۰" سرستون‌ها = "cf wk" پایان
            ستون: محتوا = "۸ تا ۲۲" سرستون‌ها = "cf we" پایان
        پایان
    پایان
پایان

آراستن ستون‌های کامل

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

web-tables-columns.salam
صفحه:
    عنوان = "سبک دادن به ستون‌ها"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    سراسری: گزینشگر = "th, td" فاصله = "8px 16px" پایان
    سراسری: گزینشگر = "table" ادغام کادر = collapse پایان
    جدول:
        گروه ستون:
            تعریف ستون: پس زمینه = "#e2e8f0" پایان
            تعریف ستون: پوشش = 2 پس زمینه = "#ecfccb" پایان
            تعریف ستون: پس زمینه = "#fee2e2" پایان
        پایان
        سرصفحه:
            ردیف:
                ستون: محتوا = "شهر" پایان
                ستون: محتوا = "شنبه" پایان
                ستون: محتوا = "یکشنبه" پایان
                ستون: محتوا = "دوشنبه" پایان
            پایان
        پایان
        اصلی:
            ردیف:
                ستون: سرستون = درست محتوا = "تبریز" پایان
                ستون: محتوا = "۴" پایان
                ستون: محتوا = "۶" پایان
                ستون: محتوا = "۳" پایان
            پایان
            ردیف:
                ستون: سرستون = درست محتوا = "شیراز" پایان
                ستون: محتوا = "۱۸" پایان
                ستون: محتوا = "۲۱" پایان
                ستون: محتوا = "۱۹" پایان
            پایان
        پایان
    پایان
پایان

تعریف نخست ستون اول را خاکستری می‌کند، تعریف دوم با پوشش = 2 دو ستون بعد را سبز، و آخری ستون پایانی را قرمز.

جدول را زیبا کنیم

چهار ویژگی بیشتر کار را انجام می‌دهند. ادغام کادر = collapse کادر خانه‌های همسایه را در یک خط ادغام می‌کند، در حالی که حالت پیش‌فرض separate خط دوتایی می‌کشد. فاصله کادرها وقتی کادرها جدایند فاصله‌ی میان خانه‌ها را تعیین می‌کند. فاصله (فاصله‌ی داخلی) روی خانه‌ها به متن جا می‌دهد و ترازمتن عددها را هم‌تراز می‌کند. تراز عمودی متن می‌گوید متن خانه‌ی کوتاه در ردیف بلند کجا بنشیند.

ردیف‌های راه‌راه دنبال کردن ردیف‌های بلند را آسان می‌کند. می‌توانید یکی در میان را خودتان رنگ کنید، اما نوشتن یک قاعده‌ی CSS ساده‌تر است. عنصر سبک در سطح صفحه CSS خام می‌گیرد، و tbody tr:nth-child(even) هر ردیف زوج بدنه را برمی‌گزیند. رنگ اشاره با پیشوند اشاره جلوی یک ویژگی سبک نوشته می‌شود و روی ردیف می‌نشیند؛ درس‌های CSS این حالت‌ها را کامل می‌گویند. به خود جدول عرض = "100%" داده‌ایم تا فضا را پر کند و بیشینه عرض نمی‌گذارد از ۲۸rem بزرگ‌تر شود. رنگ = white روی خانه‌های سرستون متن را روی سبز تیره خوانا نگه می‌دارد. عنوان جدول پیش‌فرض بالای جدول می‌نشیند و جای عنوان جدول = پایین آن را زیر جدول می‌برد.

web-tables-style.salam
صفحه:
    عنوان = "یک جدول آراسته"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    سراسری: گزینشگر = "th, td" فاصله = 10 ترازمتن = "start" پایان
    سراسری: گزینشگر = "th" پس زمینه = "#0f766e" رنگ = white پایان
    سبک: محتوا = "tbody tr:nth-child(even) { background: #f1f5f9 }" پایان
    جدول:
        ادغام کادر = collapse
        عرض = "100%"
        بیشینه عرض = "28rem"
        عنوان جدول: محتوا = "اعضای تیم" جای عنوان جدول = پایین رنگ = "#64748b" فاصله = 8 پایان
        سرصفحه:
            ردیف:
                ستون: محتوا = "نام" پایان
                ستون: محتوا = "نقش" پایان
                ستون: محتوا = "سن" پایان
            پایان
        پایان
        اصلی:
            ردیف: اشاره پس زمینه = "#ccfbf1"
                ستون: محتوا = "سارا" پایان
                ستون: محتوا = "طراح" پایان
                ستون: محتوا = "۳۱" پایان
            پایان
            ردیف: اشاره پس زمینه = "#ccfbf1"
                ستون: محتوا = "امید" پایان
                ستون: محتوا = "مهندس" پایان
                ستون: محتوا = "۲۸" پایان
            پایان
            ردیف: اشاره پس زمینه = "#ccfbf1"
                ستون: محتوا = "لیلا" پایان
                ستون: محتوا = "نویسنده" پایان
                ستون: محتوا = "۳۵" پایان
            پایان
        پایان
    پایان
پایان

جدول را با گذاشتن عرض روی تک‌تک خانه‌ها باریک نکنید. عرض یا بیشینه عرض را روی خود جدول بگذارید، و اگر می‌خواهید ستون‌ها پهنای ردیف نخست را بگیرند چیدمان جدول = fixed بنویسید که جدول‌های بزرگ را هم سریع‌تر می‌کشد.

جدول پهن روی صفحه‌ی کوچک

جدول به اندازه‌ی محتوایش پهن می‌شود و تلفن همراه باریک است. اگر جدول نتواند جمع شود، کل صفحه را به پهلو می‌کشد. راه‌حل جعبه‌ای دور جدول با سرریز = خودکار است: صفحه پهنایش را نگه می‌دارد و جدول درون جعبه پیمایش می‌شود. به جعبه بیشینه ارتفاع هم بدهید تا بالا و پایین هم پیمایش شود، و آن‌وقت ردیف سرستون با موقعیت = چسبان و بالا = 0 هنگام حرکت داده‌ها در جایش می‌ماند. قاعده‌ی چسبان را روی خانه‌های th بگذارید، نه روی ردیف: این شکلی است که در همه‌ی مرورگرها کار می‌کند.

web-tables-scroll.salam
صفحه:
    عنوان = "جدول با پیمایش"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1rem" پایان
    سراسری: گزینشگر = "th, td" فاصله = 8 ترازمتن = "start" پایان
    سراسری: گزینشگر = "th" موقعیت = چسبان بالا = 0 پس زمینه = "#1e293b" رنگ = white پایان
    جعبه:
        بیشینه عرض = "26rem"
        بیشینه ارتفاع = "11rem"
        سرریز = خودکار
        کادر = "1px solid #cbd5e1"
        جدول:
            ادغام کادر = collapse
            عرض = "40rem"
            سرصفحه:
                ردیف:
                    ستون: محتوا = "روز" پایان
                    ستون: محتوا = "گام" پایان
                    ستون: محتوا = "مسافت" پایان
                    ستون: محتوا = "خواب" پایان
                پایان
            پایان
            اصلی:
                ردیف: ستون: محتوا = "شنبه" پایان ستون: محتوا = "۸۲۰۰" پایان ستون: محتوا = "۶٫۱ کیلومتر" پایان ستون: محتوا = "۷ ساعت" پایان پایان
                ردیف: ستون: محتوا = "یکشنبه" پایان ستون: محتوا = "۱۰۴۰۰" پایان ستون: محتوا = "۷٫۸ کیلومتر" پایان ستون: محتوا = "۶ ساعت" پایان پایان
                ردیف: ستون: محتوا = "دوشنبه" پایان ستون: محتوا = "۵۹۰۰" پایان ستون: محتوا = "۴٫۴ کیلومتر" پایان ستون: محتوا = "۸ ساعت" پایان پایان
                ردیف: ستون: محتوا = "سه‌شنبه" پایان ستون: محتوا = "۹۱۰۰" پایان ستون: محتوا = "۶٫۸ کیلومتر" پایان ستون: محتوا = "۷ ساعت" پایان پایان
                ردیف: ستون: محتوا = "چهارشنبه" پایان ستون: محتوا = "۱۲۰۰۰" پایان ستون: محتوا = "۹ کیلومتر" پایان ستون: محتوا = "۶ ساعت" پایان پایان
            پایان
        پایان
    پایان
پایان

پیش‌نمایش بالا را پیمایش کنید تا ببینید سرستون سر جایش می‌ماند. جعبه بیشینه عرض و بیشینه ارتفاع کوچک‌تر از جدول دارد، سرریز = خودکار فقط وقتی لازم باشد نوار پیمایش را می‌آورد، و به جدول عرض ثابت ۴۰rem داده‌ایم تا از جعبه پهن‌تر شود. به خانه‌های چسبان رنگ پس‌زمینه بدهید، وگرنه متنی که زیرشان پیمایش می‌شود از میانشان پیداست.

جدول دسترس‌پذیر، خلاصه

  • برای هر جدول یک عنوان جدول بگذارید. پیش از خواندن هر خانه می‌گوید جدول چیست.
  • هر سرستون را خانه‌ی سرستون کنید، در ردیف سرصفحه یا با سرستون = درست، و دامنه را بنویسید.
  • برای ایجاد فاصله خانه را خالی نگذارید: فاصله را با فاصله (padding) بدهید. خانه‌ای که واقعاً داده ندارد می‌تواند «ندارد» بگوید تا صفحه‌خوان چیزی برای خواندن داشته باشد.
  • جدول را ساده نگه دارید. دو جدول از یک جدولِ پر از ادغام بهتر است.

مرجع: همه‌ی عنصرهای جدول

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

جدول (English: table; HTML: <table>)

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

جدول:
    عنوان جدول: محتوا = "حیوان‌های خانگی" پایان
    ردیف:
        ستون: محتوا = "گربه" پایان
        ستون: محتوا = "۴ پا" پایان
    پایان
پایان

عنوان جدول (English: caption; HTML: <caption>)

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

جدول:
    عنوان جدول: محتوا = "حیوان‌های خانگی" پایان
    ردیف: ستون: محتوا = "گربه" پایان پایان
پایان

فقط درون: table

گروه ستون (English: column group; HTML: <colgroup>)

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

جدول:
    گروه ستون:
        تعریف ستون: پس زمینه = "#fee2e2" پایان
        تعریف ستون: پایان
    پایان
    ردیف:
        ستون: محتوا = "ستون قرمز" پایان
        ستون: محتوا = "ستون ساده" پایان
    پایان
پایان

فقط درون: table

ویژگیکار آننمونه
پوشش
span		یک عدد صحیح، شمار ستون‌هایی که این گروه در بر می‌گیرد وقتی فرزند تعریف ستون ندارد. بدون آن گروه یک ستون را می‌پوشاند. [uint]جدول: گروه ستون: پوشش = 2 پس زمینه = "#e0f2fe" پایان ردیف: ستون: محتوا = "الف" پایان ستون: محتوا = "ب" پایان پایان پایان

تعریف ستون (English: column definition; HTML: <col>)

یک ستون را توصیف می‌کند، یا با پوشش چند ستون را، درون گروه ستون. محتوا و فرزند ندارد. فقط چند ویژگی روی آن کار می‌کند: پس زمینه، عرض، دیدپذیری و، وقتی کادرها ادغام شده‌اند، کادر. ویژگی‌های متن روی آن اثری ندارند.

جدول:
    گروه ستون:
        تعریف ستون: عرض = 160 پس زمینه = "#fef9c3" پایان
    پایان
    ردیف: ستون: محتوا = "خانه‌ی زرد پهن" پایان پایان
پایان

فقط درون: column group · عنصر تهی است و فرزند نمی‌پذیرد

ویژگیکار آننمونه
پوشش
span		یک عدد صحیح، شمار ستون‌های کناری که این یک تعریف در بر می‌گیرد. با آن می‌توانید با یک سطر سه ستون را یک‌جور سبک بدهید. [uint]جدول: گروه ستون: تعریف ستون: پوشش = 3 پس زمینه = "#dcfce7" پایان پایان ردیف: ستون: محتوا = "الف" پایان ستون: محتوا = "ب" پایان ستون: محتوا = "پ" پایان پایان پایان

سرصفحه (English: table header; HTML: <thead>)

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

جدول:
    سرصفحه:
        ردیف:
            ستون: محتوا = "نام" پایان
            ستون: محتوا = "سن" پایان
        پایان
    پایان
    اصلی:
        ردیف:
            ستون: محتوا = "سارا" پایان
            ستون: محتوا = "۳۱" پایان
        پایان
    پایان
پایان

فقط درون: table

اصلی (English: table body; HTML: <tbody>)

درون جدول به شکل اصلی نوشته می‌شود و tbody، بخش ردیف‌های داده، را می‌سازد. می‌توانید چند تا داشته باشید تا ردیف‌ها را دسته کنید. ردیف‌هایی که بی‌بخش مستقیم در جدول نوشته شوند هم کار می‌کنند و مرورگر خودش یک بدنه‌ی ضمنی می‌سازد.

جدول:
    اصلی:
        ردیف:
            ستون: محتوا = "سارا" پایان
            ستون: محتوا = "۳۱" پایان
        پایان
    پایان
پایان

فقط درون: table

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

جدول:
    اصلی:
        ردیف:
            ستون: محتوا = "چای" پایان
            ستون: محتوا = "۳" پایان
        پایان
    پایان
    پاورقی:
        ردیف:
            ستون: سرستون = درست محتوا = "جمع" پایان
            ستون: محتوا = "۳" پایان
        پایان
    پایان
پایان

فقط درون: table

ردیف (English: row; HTML: <tr>)

یک ردیف از خانه‌ها. درون جدول یا درون سرصفحه، اصلی یا پاورقی می‌رود و فرزندانش خانه‌اند.

جدول:
    ردیف:
        ستون: محتوا = "چپ" پایان
        ستون: محتوا = "راست" پایان
    پایان
پایان

فقط درون: table, table header, table body, table footer

ستون (English: column; HTML: <td>)

یک خانه‌ی داده، همان عنصر td. با اینکه نامش «ستون» است یک خانه است، نه یک ستون کامل؛ ستون‌ها از کنار هم آمدن خانه‌ی ردیف‌ها پدید می‌آیند. درون ردیف سرصفحه خودکار خانه‌ی سرستون می‌شود و جاهای دیگر با سرستون = درست خانه‌ی سرستون می‌گیرید.

جدول:
    ردیف:
        ستون: محتوا = "داده‌ی ساده" پایان
        ستون: محتوا = "داده‌ی بیشتر" پس زمینه = "#f1f5f9" پایان
    پایان
پایان

فقط درون: row

ویژگیکار آننمونه
پوشش ستون
colspan		یک عدد صحیح، شمار ستون‌هایی که این خانه روی آن‌ها کشیده می‌شود. خانه‌های بعدی ردیف جلو می‌روند، پس به همان اندازه کمتر بنویسید. [uint]جدول: ردیف: ستون: محتوا = "خانه‌ی پهن" پوشش ستون = 2 پس زمینه = "#fef3c7" پایان پایان ردیف: ستون: محتوا = "یک" پایان ستون: محتوا = "دو" پایان پایان پایان
پوشش ردیف
rowspan		یک عدد صحیح، شمار ردیف‌هایی که این خانه به پایین کشیده می‌شود. ردیف‌های پایین‌تر باید خانه‌هایی را که این خانه می‌پوشاند ننویسند. [uint]جدول: ردیف: ستون: محتوا = "بلند" پوشش ردیف = 2 پس زمینه = "#dbeafe" پایان ستون: محتوا = "بالا" پایان پایان ردیف: ستون: محتوا = "پایین" پایان پایان پایان
سرستون‌ها
headers		فهرستی از شناسه‌ها، جدا شده با فاصله، برای خانه‌های سرستونی که این خانه‌ی داده را توضیح می‌دهند. برای جدول‌هایی است که دامنه برایشان کافی نیست. هر شناسه باید در همان صفحه باشد و مترجم این را می‌سنجد. [idref (list)]جدول: ردیف: ستون: سرستون = درست شناسه = "h-day" محتوا = "روز" پایان ستون: سرستون = درست شناسه = "h-sales" محتوا = "فروش" پایان پایان ردیف: ستون: محتوا = "شنبه" سرستون‌ها = "h-day" پایان ستون: محتوا = "۱۲۰" سرستون‌ها = "h-sales h-day" پایان پایان پایان

ستون (English: header column; HTML: <th>)

نام ستون وقتی در ردیف سرصفحه ایستاده: مترجم برایش th می‌نویسد، بی‌هیچ کار اضافه. دامنه می‌گیرد (col یا row به شکل ستون و ردیف، و colgroup و rowgroup به شکل گروه ستون و گروه ردیف)، کوته‌نوشت (شکل کوتاهی که صفحه‌خوان به جای سرستون بلند می‌خواند)، و همچنین پوشش ستون، پوشش ردیف و سرستون‌ها. در فارسی نامش هم «ستون» است.

جدول:
    سرصفحه:
        ردیف:
            ستون: محتوا = "دما" دامنه = ستون کوته‌نوشت = "د" پایان
            ستون: محتوا = "باران" دامنه = ستون پایان
        پایان
    پایان
پایان

ستون (English: heading column; HTML: <th>)

خانه‌ی سرستون بیرون از سرصفحه، با نوشتن سرستون = درست روی یک ستون. برای خانه‌ی نخست هر ردیف (سرردیف) با دامنه = ردیف به کار می‌رود، یا در پاورقی برای واژه‌ی «جمع». ویژگی‌هایش همان ویژگی‌های خانه‌ی سرصفحه است، از جمله دامنه و کوته‌نوشت. دقت کنید سرستون (خود سرستون بودن) با سرستون‌ها (فهرست شناسه‌ها) فرق دارد.

جدول:
    ردیف:
        ستون: سرستون = درست دامنه = ردیف محتوا = "شنبه" پایان
        ستون: محتوا = "آفتابی" پایان
    پایان
پایان

فقط درون: row

خودتان امتحان کنید

  • جدول هفته‌ی خودتان را بسازید: روزها ستون و صبح و ظهر و شب ردیف. برای ساعت‌ها سرستون = درست را با دامنه = ردیف بنویسید.
  • به فهرست قیمت بالا یک پاورقی با ردیف جمع بیفزایید و جمع را پررنگ و با خطی بالایش بیاراید.
  • جدول پیمایشی را به ۶۰rem پهن کنید. روی پنجره‌ی باریک چه تغییری می‌کند؟ بعد خط سرریز را بردارید و صفحه را ببینید.