آموزش HTML: جداول

مقدمه Introduction

• جداول HTML معنایی ایجاد کنید Create semantic HTML tables

• آنچه باید بدانید What you should know

• کار با CodePen Working with CodePen

1. مبانی جدول 1. Table Basics

• نمایش داده های معنایی Display data semantically

• ردیف های جدول و داده های جدول را درک کنید Understand table rows and table data

• محتوا و داده ها را به سلول های جدول اضافه کنید Add content and data to table cells

• عناوین جدول را درک کنید Understand table headings

• سر ، بدن و پا را مشخص کنید Identify table head, body, and foot

• شرح زیر را درج کنید Include table captions

• ستونها را گروه بندی کرده و برای هدرها اعمال کنید Group columns and apply to headers

• از colspan و rowspan استفاده کنید Use colspan and rowspan

• چالش: یک جدول را مشخص کنید Challenge: Mark up a table

• راه حل: یک جدول را مشخص کنید Solution: Mark up a table

2. جداول سبک HTML 2. Styling HTML Tables

• مرزهای جدول سبک و یک ظاهر طراحی شده اساسی Style table borders and basic styling

• عنوان جدول را سبک کنید Style the table caption

• هدر و پاورقی جدول خود را سبک کنید Style your table headers and footers

• ردیف های جدول راه راه با رنگ های پس زمینه Stripe table rows with background colors

• چالش: جداول سبک HTML Challenge: Style HTML tables

• راه حل: جداول سبک HTML Solution: Style HTML tables

3. پاسخگوي جداول 3. Making Tables Responsive

• جداول پاسخگو با پیمایش سمت Responsive tables with side scrolling

• یک جدول را برای طرح پاسخگو تغییر دهید Reformat a table for responsive layout

• ترفندهای نهایی یک ظاهر طراحی شده Final styling tweaks

• چالش: جداول را پاسخگو کنید Challenge: Make tables responsive

• راه حل: جداول را پاسخگو کنید Solution: Make tables responsive

نتیجه Conclusion

• مراحل بعدی Next steps