در این قسمت از آموزش HTML به آموزش ساختن جدول در html می پردازیم :

هر چند که دیگر از جدول برای طراحی وب استفاده نمی شود بنا به دلایل و از Div به جای آن استفاده می شود ولی بعضی از جاها نیاز است تا از جدول استفاده کنیم . برای ایجاد جدول باید از تگ <table> استفاده کنیم ، این تگ را جایی قرار دهید که می خواهید آن جا جدول درست کنید و در پایان جدول هم از تگ پایانی آن یعنی <table/>  استفاده کنید . همان طور که می دانید در جدول یک یا چندتا سطر داریم و همین طور یک یا چندتا ستون داریم همانند تصویر زیر :

آموزش ساختن جدول ( Table ) در HTML

برای این که جدول را کامل کنیم باید سطر و ستون داشته باشیم ، برای درست کردن ستون از تگ <td> استفاده می کنیم و برای درست کردن سطر از تگ <tr> استفاده می کنیم . همانند کدهای زیر که در این کد من تعداد چهارتا سطر و چهارتا ستون ایجاد کرده ام :

<table border="3">
     <tr>
           <td>سطر اول ، ستون اول</td>
           <td>سطر اول ، ستون دوم</td>
           <td>سطر اول ، ستون سوم</td>
           <td>سطر اول ، ستون چهارم</td>
     </tr> 
     <tr>
           <td>سطر دوم ، ستون اول</td>
           <td>سطر دوم ، ستون دوم</td>
           <td>سطر دوم ، ستون سوم</td>
           <td>سطر دوم ، ستون چهارم</td>
     </tr>
     <tr>
           <td>سطر سوم ، ستون اول</td>
           <td>سطر سوم ، ستون دوم</td>
           <td>سطر سوم ، ستون سوم</td>
           <td>سطر سوم ، ستون چهارم</td>
     </tr>
     <tr>
           <td>سطر چهارم ، ستون اول</td>
           <td>سطر چهارم ، ستون دوم</td>
           <td>سطر چهارم ، ستون سوم</td>
           <td>سطر چهارم ، ستون چهارم</td>
     </tr>
</table>

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

اگر از تگ <td> استفاده کنید و از تگ <tr> استفاده نکنید سلول های شما به صورت ستونی پیش خواهند رفت ، به زبان ساده برای رفتن به ردیف بعدی از <tr> استفاده می کنیم .

عناصری که میتوان در تگ <table> استفاده کرد :

cellspacing : برای ایجاد فاصله بین سلول ها عدد مورد نظر را برابر مقدار این عنصر قرار می دهیم . به این صورت :

<table border="3" cellspacing="20">

	<tr>
		<td>سطر اول ، ستون اول</td>
		<td>سطر اول ، ستون دوم</td>
	</tr>  
	<tr>
		<td>سطر دوم ، ستون اول</td>
		<td>سطر دوم ، ستون دوم</td>
	</tr>  
</table>

اینم نتیجه اش :

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

<table border="3" cellpadding="20">

	<tr>
		<td>سطر اول ، ستون اول</td>
		<td>سطر اول ، ستون دوم</td>
	</tr>  
	<tr>
		<td>سطر دوم ، ستون اول</td>
		<td>سطر دوم ، ستون دوم</td>
	</tr>  
</table>

اینم نتیجه اش :

می توان هرد مثال بالا را باهم نوشت یعنی هر دو شناسه بالا را در تگ جدول قرار داد . هم چنین شما می توانید هر چیزی را که بخواهید داخل سلول ها وارد کنید . مانند عکس ، لینک ، پاراگراف و … برای این کار کافی است که کد مورد نظر را بین تگ <td> و <td/> وارد کنید .

ادامه آموزش را در جلسه بعد پی خواهیم گرفت .

برای یادگیری بهتر می توانید به سایت  W3school مراجعه کنید .

موفق باشید .