تگ <table> در HTML برای ایجاد جدول‌ها استفاده می‌شود. جدول‌ها به صورت یک گرید مرتبط از سلول‌ها و ردیفها است که برای نمایش دادن اطلاعات در قالب جدولی استفاده می‌شوند.
مثال:
<table border="1">
<tr>
<td>سلول 1</td>
<td>سلول 2</td>
</tr>
<tr>
<td>سلول 3</td>
<td>سلول 4</td>
</tr>
</table>
سرتیتر جدول (Table Heading)
مثال:
تگ <th> در HTML برای تعریف عنوان‌های ستون‌ها یا ردیف‌های جدول استفاده می‌شود.
<table border="1">
<tr>
<th>سرتیتر 1</th>
<th>سرتیتر 2</th>
</tr>
<tr>
<td>سلول 1</td>
<td>سلول 2</td>
</tr>
</table>
ویژگی‌های Cellpadding و Cellspacing
ویژگی‌های cellpadding و cellspacing برای تعیین فاصله بین محتوای داخلی سلول‌ها و فاصله بین سلول‌ها در جدول استفاده می‌شوند.
<table border="1" cellpadding="10" cellspacing="5">
<tr>
<td>سلول 1</td>
<td>سلول 2</td>
</tr>
<tr>
<td>سلول 3</td>
<td>سلول 4</td>
</tr>
</table>
ویژگی‌های Colspan و Rowspan
ویژگی‌های colspan و rowspan برای تعیین تعداد ستون‌ها یا ردیف‌هایی که یک سلول اشغال می‌کند استفاده می‌شوند.
مثال:
<table border="1">
<tr>
<td colspan="2">سلول 1</td>
</tr>
<tr>
<td>سلول 2</td>
<td>سلول 3</td>
</tr>
</table>
پس‌زمینه‌های جدول (Tables Backgrounds)
ویژگی background برای تعیین تصویر پس‌زمینه جدول استفاده می‌شود.
مثال:
<table border="1" background="background.jpg">
<tr>
<td>سلول 1</td>
<td>سلول 2</td>
</tr>
<tr>
<td>سلول 3</td>
<td>سلول 4</td>
</tr>
</table>
ارتفاع و عرض جدول (Table Height and Width)
ویژگی‌های width و height برای تعیین ابعاد عرض و ارتفاع جدول استفاده می‌شوند.
مثال:
<table border="1" width="400" height="300">
<tr>
<td>سلول 1</td>
<td>سلول 2</td>
</tr>
<tr>
<td>سلول 3</td>
<td>سلول 4</td>
</tr>
</table>
عنوان جدول (Table Caption)
تگ <caption> برای اضافه کردن عنوان به جدول استفاده می‌شود.
مثال:
<table border="1">
<caption>این عنوان جدول است</caption>
<tr>
<td>سلول 1</td>
<td>سلول 2</td>
</tr>
</table>
سر جدول، بدنه جدول و پابرگ جدول (Table Header, Body, and Footer)
تگ‌های <thead>, <tbody>, و <tfoot> برای تقسیم جدول به سه بخش سرتیتر، بدنه و پا استفاده می‌شوند.
مثال:
<table border="1">
<thead>
<tr>
<th>سرتیتر 1</th>
<th>سرتیتر 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>سلول 1</td>
<td>سلول 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">پا</td>
</tr>
</tfoot>
</table>
جداول تو در تو (Nested Tables)
استفاده از جداول تو در تو به معنی قرار دادن یک جدول داخلی داخل یک سلول جدول دیگر است.
مثال:
<table border="1">
<tr>
<td>
<table border="1">
<tr>
<td>جدول درونی - سلول 1</td>
<td>جدول درونی - سلول 2</td>
</tr>
</table>
</td>
<td>سلول بیرونی - سلول 2</td>
</tr>
</table>
با این توضیحات و مثال‌ها، شما می‌توانید با توجه به نیاز خود به راحتی از تگ‌های جدول در HTML استفاده کنید و جدول‌هایی با طراحی مورد نظر خودتان ایجاد کنید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام