محتوای آموزشی

آشنایی با جداول در html

آشنایی با جداول در html

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

جداول یکی از مهمترین عناصر موجود در html به شمار می روند و به طور کلی زمانیکه بخواهیم داده ها را به صورت نظامند و مدون در معرض دید کاربران قرار دهیم می بایست از جداول استفاده کنیم که اینکار از طریق قرار دادن داده ها در ستون های و ردیف های جدول امکان پذیر است. در گذشته جداول به منظور قالب بندی و طرح بندی کل صفحه استفاده می شدند اما امروزه با ظهور CSS و پیدایش روش های نوین طرح بندی کاربردشان تنها به نمایش منظم داده ها محدود شده است.

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

به منظور ساخت یک جدول در زبان اچ تی ام ال (html) از تگ table استفاده می شود.در واقع هر آنچه داخل این تگ قرار گیرد به منزله داده های جدول محسوب خواهد شد. اما دقت داشته باشید که استفاده تنها از تگ table کاربردی ندارد و برای آنکه داده ها قابل درک برای تگ باشند می بایست آن ها را داخل تگ های به خصوصی که برای این کار طراحی شده اند قرار داد. به طور کلی در جداول برای ایجاد ردیف از تگ tr استفاده می کنیم،به عنوان مثال اگر بخواهیم جدولی با سه سطر داشته باشیم باید سه بار تگ tr را داخل تگ table استفاده کنیم. برای آنکه تعیین کنیم که جدول ما دارای چند ستون می باشد باید داخل تگ td از تگ td استفاده کنیم.

نکته : نکته: tr مخفف عبارت table row به معنی "ردیف جدول" و td مخفف عبارت table data به معنی "اطلاعات جدول" می باشد. اگرچه تگ td به معنی "اطلاعات جدول" است، اما این تگ در حقیقت نشانگر ستون های جدول ما خواهد بود.

قطعه کد زیر نمونه ای از یک جدول ساده می باشد.

<!DOCTYPE html>
<html>
   <head>
		<meta charset="utf-8"/>
       <title>پیشگامان صفر و یک فرساد</title>
   </head>
   <body dir="rtl">
       <table>
           <tr>
               <td>سطر 1 ستون1</td>
               <td>سطر 1 ستون 2</td>
               <td>سطر ستون 3</td>
           </tr>
           <tr>
               <td>سطر 2 ستون 1</td>
               <td>سطر 2 ستون 2</td>
               <td>سطر 2 ستون 3</td>
           </tr>
          <tr>
               <td>سطر 3 ستون 1</td>
               <td>سطر 3 ستون 2</td>
               <td>سطر 3 ستون 3</td>
           </tr>
       </table>
   </body>
</html>

خروجی قطعه کد بالا در مرورگر به صورت زیر خواهد بود.

اگر به کد فوق توجه کنید، می بینید که ابتدا تگ های <table> و </table> را نوشته ایم.سپس داخل ان،سه بار تگ های <tr> , </tr> را آورده ایم تا تعیین کنیم جدول ما دارای سه سطر می باشد و داخل هر tr نیز سه بار تگ های <td></td> را قرار داده ایم.به این ترتیب هر سطر جدول ما شامل سه ستون خواهد بود.

اما همانطور که در تصویر بالا ملاحظه می کنید بین سطرها و ستون های ما خط جداکننده ای وجود ندارد. برای آنکه بخواهیم خط جداکننده ای برای عناصر جدول خود در نظر بگیریم، می بایست از Attribute ای به نام border استفاده کنیم.برای درک بهتر مطلب،قطعه کد بالا را به صورت زیر تغییر می دهیم.

<!DOCTYPE html>
<html>
   <head>
		<meta charset="utf-8"/>
       <title>پیشگامان صفر و یک فرساد</title>
   </head>
   <body border="1">
       <table>
           <tr>
               <td>سطر 1 ستون1</td>
               <td>سطر 1 ستون 2</td>
               <td>سطر ستون 3</td>
           </tr>
           <tr>
               <td>سطر 2 ستون 1</td>
               <td>سطر 2 ستون 2</td>
               <td>سطر 2 ستون 3</td>
           </tr>
          <tr>
               <td>سطر 3 ستون 1</td>
               <td>سطر 3 ستون 2</td>
               <td>سطر 3 ستون 3</td>
           </tr>
       </table>
   </body>
</html>

همانطور که در کد فوق ملاحظه می کنید در تگ tableاز خاصیت border با مقدار 1 استفاده کرده ایم و این امر باعث شده که اطراف هر خانه جدول،خطی قرار بگیرد.

خاصیت border میزان ضخامت حاشیه اطراف جدول را مشخص می کند.همچنین اگر این خاصیت مقدار دهی شده باشد اطراف کلیه اجزای تشکیل دهنده جدول یک border قرار خواهد گرفت.برای درک بهتر کاربرد این خاصیت مقدار آن را به 50 تغییر می دهیم.

<!DOCTYPE html>
<html>
   <head>
		<meta charset="utf-8"/>
       <title>پیشگامان صفر و یک فرساد</title>
   </head>
   <body border="50">
       <table>
           <tr>
               <td>سطر 1 ستون1</td>
               <td>سطر 1 ستون 2</td>
               <td>سطر ستون 3</td>
           </tr>
           <tr>
               <td>سطر 2 ستون 1</td>
               <td>سطر 2 ستون 2</td>
               <td>سطر 2 ستون 3</td>
           </tr>
          <tr>
               <td>سطر 3 ستون 1</td>
               <td>سطر 3 ستون 2</td>
               <td>سطر 3 ستون 3</td>
           </tr>
       </table>
   </body>
</html>

خروجی قطعه کد بالا به صورت تغییر خواهد کرد.

مشاهده می کنید که ضخامت خط دور جدول به 50 پیکسل افزایش پیدا کرده است اما خطوط اطراف خانه های جدول ضخامتشان تغییری نکرده است.

سر تیتر جداول

چنانچه بخواهیم سرتیتری برای ستون های جدول خود در نظر بگیریم می بایست از تگی تحت عنوان <th></th> استفاده کنیم.th مخفف عبارت table header می باشد. از ویژگی های تگ <th> این است که داده های داخل آن به صورت پیش فرض به شکل Bold نمایش داده می شوند.به مثال زیر توجه کنید.

<!DOCTYPE html>
<html>
   <head>
		<meta charset="utf-8"/>
       <title>پیشگامان صفر و یک فرساد</title>
   </head>
   <body>
       <table border="1">
			<tr>
				<th>عنوان ستون اول</th>
				<th>عنوان ستون دوم</th>
				<th>عنوان ستون سوم</th>
			</tr>
           <tr>
               <td>سطر 1 ستون1</td>
               <td>سطر 1 ستون 2</td>
               <td>سطر 1 ستون 3</td>
           </tr>
           <tr>
               <td>سطر 2 ستون 1</td>
               <td>سطر 2 ستون 2</td>
               <td>سطر 2 ستون 3</td>
           </tr>
          <tr>
               <td>سطر 3 ستون 1</td>
               <td>سطر 3 ستون 2</td>
               <td>سطر 3 ستون 3</td>
           </tr>
       </table>
   </body>
</html>

خروجی کدهای بالا به صورت زیر خواهد بود.

به این ترتیب به صورت مقدماتی با مفاهیم مربوط به جداول در HTML آشنا شدید،مباحث پیشرفته در مقالات بعدی آموزش داده خواهند شد.

امیدوارم مطالعه این مقاله برای شما مفید بوده باشد.با ادامه مقالات آموزش زبان HTML با ما همراه باشید.

کامنت جدید ...
Sort by:

مطالب پیشنهادی

'