- آموزش تگ table در html + تعریف کامل ساختار تگ
- HoseinKetabi
- اکتبر 11, 2024
- تعداد نظرات : بدون نظر
تگ table در html استفاده های زیادی دارد,در واقع یکی از پر استفاده ترین تگ های html تگ table میباشد.با استفاده از تگ table شما میتوانید جدوال مورد نظر خود را ایجاد کنید.
تعریف تگ table در html
تگ table در HTML برای ساخت جداول در صفحات وب استفاده می‌شود. این تگ به کمک تگ‌های فرعی مانند <tr> (سطر)، <th> (سرصفحه) و <td> (داده) ساختار منظم و خوانایی به اطلاعات می‌دهد. با استفاده از table میتوانید داده‌ها را به صورت ردیف و ستون مرتب کرده و نمایش دهید. به زبان ساده‌تر تگ table مثل یک جدول در دنیای واقعی است که اطلاعات را به صورت مرتب و خوانا در خانه‌های مشخصی قرار می‌دهد.
<html>
<head>
<title>تگ جدول در html</title>
</head>
<body>
<table>
<tr>
<hr>
نام
</hr>
<hr>
نام خانوادگی
</hr>
<hr>
سن
</hr>
</tr>
<tr>
<td>
حسین
</td>
<td>
کتابی
</td>
<td>
20
</td>
</tr>
</table>
</body>
</html>
در بالا مثالی از استفاده از تگ table برای ذخیره کردن اطلاعات مربوط به یک کاربر را مشاهده میکنید.با استفاده از این تگ کار های دیگر نیز میتوان انجام داد که به اختضار توضیح میدهیم.
روش استفاده از تگ جدول
برای استفاده از تگ table در html شما باید از سه تگ متفاوت استفاده کنید که تک به تک به آنها میپردازیم,اصلی ترین آنها خود تگ table میباشد که کل این تگ هارا در بر میگیرد.
تگ tr در در ساختار جدول
تگ tr در HTML به معنای Table Row یا سطر جدول است. این تگ برای تعریف یک سطر جدید در داخل یک جدول استفاده می‌شود. به عبارت ساده‌تر، هر بار که می‌خواهید یک ردیف جدید به جدول خود اضافه کنید، از تگ tr استفاده میکنید. عملکرد تگ را میتوان به تعریف ساختار جدول بیان کرد تگ tr در داخل تگ table قرار میگیرد و به عنوان یک ظرف برای سلول‌های جدول که با تگ th و td عمل می‌کند. تعریف سطر را میتوان به این صورت بیان کرد که هر تگ tr یک سطر کامل در جدول را تشکیل می‌دهد.
<html>
<head>
<title>تگ tr در html</title>
</head>
<body>
<table>
<tr>
<th>
نام
</th>
<th>
نام خانوادگی
</th/>
</tr>
<tr>
<td>
حسین
</td>
<td>
کتابی
</td>
</tr>
</table>
</body>
</html>
همانطور که در مثال بالا مشاهده میفرمایید.ما در یکی از تگ های tr آمده ایم و تگ های th را قرار داده ایم و در دیگر تگ tr تگ های td را قرار داده ایم.
تگ th در ساختار جدول
تگ th مخفف Table Header به معنی سربرگ جدول است. این تگ در HTML برای تعریف سلول‌های سرصفحه در یک جدول استفاده می‌شود. به عبارت ساده‌تر، هر جایی که می‌خواهید عنوان یک ستون را مشخص کنید، از تگ th استفاده میکنید. عملکرد تگ را میتوان به تعریف سرصفحه تعریف نمود. تگ th به مرورگر می‌گوید که محتوای داخل آن یک سرصفحه است.مرورگرها به صورت خودکار محتوای داخل تگ th را با فونت پررنگ و تراز وسط نمایش می‌دهند تا از بقیه سلول‌ها متمایز شود.
<table>
<tr>
<th>
name
</th>
<th>
family
</th>
<td>
Hosein
</td>
<td>
Ketabi
</td>
</tr>
</table>
تگ td در ساختار جدول
تگ td مخفف Table Data به معنای داده‌های جدول است. این تگ در HTML برای تعریف سلول‌های داده‌ای در یک جدول استفاده می‌شود. به عبارت ساده‌تر، هر جایی که می‌خواهید داده‌ای را داخل یک جدول قرار دهید، از تگ td استفاده میکنید.
<table>
<tr>
<th>
نام
</th>
<th>
نام خانوادگی
</th>
</tr>
<tr>
<td>
حسین
</td>
<td>
کتابی
</td>
</tr>
</table>
در مثالا بالا اگر نگاه کنید موتجه میشوید که ما از تگ td برای سلول هایی که میخواهیم داده ها را در آن نمایش دهیم استفاده میکنیم و آن را درون تگ tr قرار داده ایم.
کلام پایانی
تگ table کاربرد های خیلی زیادی در طراحی وب دارد به طوری که شما اگر ساختار یک وب سایت را بررسی کنید متوجه میشوید که در هار جایی از وب سایت استفاده شده است.
- نظرات