پس از آشنایی با انواع لیست که در قسمت قبل بررسی کردیم، حال برای حرفه ای تر شدن، نیاز دارید تا با ساخت جدول در html آشنا شوید.
در این قسمت از آموزش ها در توکاپس ، به بررسی ساخت جدول در html به همراه چندین صفت مهم آن خواهیم پرداخت.
اگر شما به یادگیری html علاقه مندید، این مطلب برای شما نوشته شده است. بنابراین تا انتهای مقاله را دنبال کنید و به ساخت جداول در html مسلط شوید.
از جدول در طراحی قالب سایت استفاده می شود با استفاده از css می توانیم سایت را زیبا کنیم.

تگ های مربوط به جدول در html

به طور کلی برای ساخت یک جدول به چهار تگ اصلی نیاز داریم که به ترتیب td, th , tr, table هستند. شیوه کاری این تگ ها به صورت زیر است:
تگ table: ساخت بدنه کلی جدول
تگ tr: ساخت ردیف های جدول. برای هر سطر باید یک تگ tr استفاده کنیم.
تگ th: ساخت عناوین جدول.
تگ td: ساخت مقادیر هر عنوان. با هر td یک ستون ایجاد میشود.

هر جدولی که ساخته می شود، دارای یک یا چند عنوان است  و برای هر عنوان چند مقدار در نظر گرفته می شود. به عنوان مثال :
جداول در html
در مثال بالا یک ردیف با استفاده از تگ tr و با استفاده از تگ Th سه عنوان نام، نام خانوادگی و سن را قرار دادیم.
در ردیف های بعدی با استفاده از تگ td برای هر یک از عنوان ها یک مقدار در نظر گرفته ایم.
به صورت پیش فرض در هر ردیف اولین مقدار زیر اولین عنوان قرار می گیرد. و در این روند تا انتها ادامه خواهد داشت. البته می توان این روند را نیز تغییر داد که در ادامه به آن می پردازیم.
نتیجه کدهای بالا در مرورگر به شکل زیر نشان داده خواهد شد:
نمونه جدول در html

ایجاد border برای جدول در html

با استفاده از border می توانیم یک خط دور جدول بیندازیم.
این کادر باعث می شود جدول زیباتر شده و محتوا از هم جدا شوند و سطرها و ستون ها نیز بهتر از هم متمایز شوند.
به عنوان مثال:

شاید از این مقاله خوشتون بیاد:  اهمیت طراحی وب سایت در مشهد | تیم طراحی وب توکاپس ۰۵۱۳۸۸۴۶۴۱۱

<table border=”3″>
<tr> <td>id</td> <td>name</td></tr>
<tr> <td>1</td>  <td>ali</td>     </tr>
<tr> <td>2</td>   <td>mina</td></tr>
</table>

ادغام چند ستون

در آخر به بررسی دو صفت بسیار مهم از تگ های th, td که بسیار مهم و کاربردی هستند می پردازیم.
برای آنکه یک سلول بیش از اندازه خود چه در جهت ستونی یا ردیفی فضایی را اشغال کند، باید در تگ td یا th آن سلول از دستورات زیر استفاده کنید.
با استفاده از دستور colspan می توانیم چند ستون را با هم ادغام کنیم.

<th colspan=”2″>name</th>

ادغام چند سطر

برای  ادغام چند سطر می توانیم از rowspan استفاده کنیم. با دستور rowspanمی توانیم چند سطر را با هم ادغام کنیم.

<th rowspan=”2″>name</th>

مقدار ۲ نشان می دهد که سلول Name به اندازه دو سلول فضا اشغال کرده است.
برای زیباسازی جدول از css کمک می گیریم که برای بیان بهتر مطالب در دوره آموزش css بررسی خواهیم کرد.
تمرین ها را انجام دهید و سوالات خود را از ما بپرسید تا مطالب را بهتر یاد بگیرید.


غلامرضا بهشتیان

من غلامرضا بهشتیان، عاشق نوشتن مقاله های مفید در حوزه ی وب هستم. امیدوارم مقالات نوشته شده نظر شما خوانندگان عزیز را جلب نماید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *