آموزش ایجاد table در html

با سلام خدمت کاربران عزیز وبسایت پرنیان طرح

در این آموزش قصد داریم تا تگ table در html آموزش دهیم.

معرفی تگ table :

تگ table تگی است که برای رسم جدول در صفحات وبسایت کاربرد دارد.

این تگ با تگ شروع <table> باز و با تگ پایانی </table> بسته میشود.

برای تعیین سطرها از تگ tr ، برای ستون ها از تگ td و برای سر ستون ها از تگ th درون تگ table استفاده میکنیم.

تگ tr ردیف های جدول است و ستونها و سرستون ها را داخل این تگ مینویسیم.

در مثال زیر با نحوه نوشتن تگ های یک جدول آشنا شوید :

[php]

<table>

<tr>

<th>نام</th>

<th>نام خانوادگی</th>

</tr>

<tr>

<td>علی</td>

<td>احمدی</td>

</tr>

</table>

[/php]

در تصویر زیر یک جدول با ستون ها و سرستون ها و ردیف هایش را مثال زده ایم:

کادر دادن به جدول :

برای کادر دادن به دور جدول و همچنین کادر دادن به خانه های آن از صفت border در استایل آن جدول استفاده مینماییم.

همانند مثال زیر یک border میدهیم و به آن مقدار هایی که میخواهیم میدهیم مثلا ضخامت دور جدول یک پیکسل باشد

طرح آن ساده باشد و رنگش سیاه باشد.

صفت cellspacing :

این صفت جهت ایجاد فاصله ی بین سلولی است و مقدارش عددی است با اعداد اندازه ای که میخواهیم سلول ها فاصله ها داشته باشند را مشخص میکنیم.

صفت colspan :

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

به مثال زیر توجه کنید :

[php]

<table>

<tr>

<th>آدرس محل سکونت</th>

<th colspan=”3″>شماره تلفن ثابت</th>

</tr>

</table>

[/php]

صفت rowspan :

با صفت rowspan برای ردیف هایی از جدول فضای بیشتری میتوان اختصاص داد.

در تگ td تعداد خانه هایی که میخواهیم فضا بگیرد را در صفت roespan مقدار دهی میکنیم.

مثال:

[php]

<table>

<tr>

<td rowspan=”2″>نام کاربری</td>

<td>رمز عبور</td>

</tr>

</table>

[/php]

معرفی تگ caption :

این تگ برای نوشتن عنوان در بالای جدول است این تگ بعد از تگ شروع table نوشته میشود و برای هر جدول میتوان یک تگ caption برای معرفی عنوان آن جدول استفاده نمود.

مثال زیر را ببینید :

[php]

<table>

<caption>عنوان جدول</caption>

<tr>

<td>نام کاربری</td>

<td>رمز عبور</td>

</tr>

</table>

[/php]

منبع : www.w3schools.com