تگ‌های اصلی جدول

تگ‌های اصلی جدول: <table>، <tr>، <th>، <td> – آجر به آجر جدول! 🧱

سلام به همگی! توی فصل قبل یه نگاه کلی به جدول‌ها انداختیم. حالا می‌خوایم بریم سراغ مهم‌ترین آجرها و بنای اصلی ساختن جدول در HTML: تگ‌های <table>، <tr>، <th> و <td>.

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

۱. تگ <table>: کالبد اصلی جدول! 🌐

تگ <table> مثل یه پوسته یا کالبد عمل می‌کنه که تمام اجزای دیگه جدول، یعنی سطرها و سلول‌ها، داخل اون قرار می‌گیرن. هر چیزی که مربوط به جدول شما باشه، باید بین تگ باز و بسته <table> نوشته بشه.

نکته: تگ <table> خودش به تنهایی هیچ خط یا حاشیه‌ای نمایش نمی‌ده. برای دیدن خطوط جدول، باید از CSS استفاده کنیم.

۲. تگ <tr>: سازنده سطرها! ↔️

<tr> مخفف “Table Row” هست و همونطور که از اسمش پیداست، وظیفه تعریف کردن یک سطر (ردیف) در جدول رو داره. هر بار که می‌خواید یه سطر جدید شروع کنید، باید از این تگ استفاده کنید.

ترکیب با <table>:

<table>
  <tr> <!-- سطر اول -->
    <!-- محتوای سلول‌های سطر اول اینجا میاد -->
  </tr>
  <tr> <!-- سطر دوم -->
    <!-- محتوای سلول‌های سطر دوم اینجا میاد -->
  </tr>
  <!-- ... سطرهای بیشتر ... -->
</table>

۳. تگ <th>: سربرگ‌های مهم! 🏆

<th> مخفف “Table Header” هست. این تگ برای تعریف سلول‌هایی استفاده می‌شه که به عنوان سربرگ (عنوان) برای ستون‌ها یا سطرها عمل می‌کنن. مرورگرها به طور پیش‌فرض متن داخل <th> رو پررنگ (Bold) و وسط‌چین نمایش می‌دن.

نکته: معمولاً سطر اول جدول، شامل تگ‌های <th> هست.

۴. تگ <td>: خانه‌های داده! 🔢

<td> مخفف “Table Data” هست و اصلی‌ترین تگ برای تعریف محتوای هر سلول در جدول محسوب می‌شه. هر داده‌ای که می‌خواید توی یک خانه از جدول نشون بدید، باید داخل تگ <td> قرار بگیره.

ترکیب همه با هم (مثال کاربردی):

<table style="border: 1px solid black; border-collapse: collapse;"> <!-- استایل ساده برای دیدن خطوط -->
  <tr> <!-- سطر سربرگ -->
    <th style="border: 1px solid black; padding: 8px;">نام محصول</th>
    <th style="border: 1px solid black; padding: 8px;">قیمت (تومان)</th>
    <th style="border: 1px solid black; padding: 8px;">موجودی</th>
  </tr>
  <tr> <!-- سطر اول داده -->
    <td style="border: 1px solid black; padding: 8px;">لپ تاپ</td>
    <td style="border: 1px solid black; padding: 8px;">25,000,000</td>
    <td style="border: 1px solid black; padding: 8px;">15 عدد</td>
  </tr>
  <tr> <!-- سطر دوم داده -->
    <td style="border: 1px solid black; padding: 8px;">کیبورد</td>
    <td style="border: 1px solid black; padding: 8px;">1,500,000</td>
    <td style="border: 1px solid black; padding: 8px;">50 عدد</td>
  </tr>
</table>

توضیح مثال:

• <table style=”…”>: خود جدول که با استایل ساده‌ای خطوطش رو اضافه کردیم.
• <tr> اول: شامل سه سلول سربرگ (<th>) برای “نام محصول”، “قیمت” و “موجودی”.
• <tr> دوم و سوم: هر کدوم شامل سه سلول داده (<td>) که اطلاعات مربوط به هر محصول رو نگهداری می‌کنن.

یادتون باشه که تعداد تگ‌های <td> یا <th> در هر سطر (<tr>) معمولاً باید یکسان باشه تا جدول شما مرتب به نظر برسه. البته تگ‌هایی مثل colspan و rowspan برای ادغام سلول‌ها وجود دارن که در آینده بهشون می‌پردازیم.

این چهار تگ، ستون فقرات هر جدول HTML هستن. با درک کامل نحوه استفاده از اون‌ها، می‌تونید ساختارهای جدولی متنوعی رو بسازید و داده‌هاتون رو به بهترین شکل سازماندهی کنید. موفق باشید! 💯