ایجاد جدول html - مجتمع رسانه های دیجیتال فدک (استان اردبیل)

جدول های HTML

تگ جدول < table > :

اين تگ برای ايجاد جدول ها در صفحه استفاده می شود . به طور کلی جدول ها به 2 منظور ايجاد می شوند :

1.ايجاد يک جدول معمولی با تعدادی خانه ، برای نمايش مطالب مورد نظر در سطرها و ستون های جدا از هم .

2.تقسيم فضای صفحه با استفاده از چهارچوب جدول ها برای منظم چيدن محتويات صفحه . به طور مثال مطالب اين صفحه در تعدادی خانه جدول مرتب شده است . در اين حالت می توان با عدم تعيين حاشيه ( border ) برای خانه های جدول ، از چهارچوب جدول ها استفاده کرد در حالی که آنها عملا از ديد کاربر مخفی هستند .

جدول ها برای هر منظوری به کار روند ، بايد با استفاده از تگ < table > ايجاد شوند . هر جدول مجموعه ای از سطرها و ستون هاست . برای ايجاد يک سطر جديد از يک تگ < tr > استفاده می شود که هر خانه ( ستون ) درون سطر هم توسط يک تگ < td > مشخص می شود .

تگ < Td > :

از تگ < td > برای ايجاد يک خانه جدول درون يک سطر ( تگ tr ) استفاده می شود . هر خانه جدول می تواند خصوصيات منحصر به فرد و ويژه خود را داشته باشد .

نکته : تگ < td > فقط بايد درون تگ < tr > استفاده شود .

- خاصيت colspan و rowspan :

قبلا اشاره کرديم که خانه های جدول مرتب هستند و دارای ساختار مرتبط به هم . برای مثال نمی توان در يک سطر جدول 1 خانه و در سطر پايينی 3 خانه داشت . در چنين شرايطی از خاصيت colspan در سطر با خانه کمتر استفاده می کنيم تا سطری که خانه کمتر دارد ، سطر با خانه بيشتر را پوشش دهد . خاصيت colspan برای پوشش افقی خانه ها و خاصيت rowspan برای پوشش عمودی خانه های جدول به کار می رود .

تگ < th > :

از اين تگ برای ايجاد يک سر عنوان ( Header ) در بالای ستون های يک جدول استفاده می شود . متنی که قرار است به عنوان سر عنوان قرار بگيرد ، در درون تگ باز و بسته < th > تعريف شده و معمولا به صورت درشت ( Bold ) توسط مرورگر نمايش داده می شود .

تگ سر عنوان بايد در اولين سطر جدول قرار گرفته و برای هر ستون به طور مجزا تعريف شوند .

تگ های < thead > , < tbody > , < tfoot > :

اين تگ ها برای دسته بندی سطرهای يک جدول به کار می روند .

تگ < thead > برای ايجاد و دسته بندی سطر سر عنوان ( Header ) استفاده می شود . تگ < tbody > شامل محتويات و بدنه اصلی جدول شده و تگ < tfoot > هم برای عنوان انتهايی جدول مورد استفاده قرار می گيرد .

نکته : امروز به دليل پشتيبانی نامناسب مرورگرها و عدم کارائي از اين تگ ها کمتر استفاده می شود .

نکته 2 :هر يک از تگ های فوق فقط در درون تگ < table > قابل استفاده بوده و حتما بايد دارای حداقل يک تگ < tr > باشند .

نکته 3 : در هنگام استفاده از اين تگ ها ، بايد به ترتيب قرار گيری آنها در درون تگ < table > به شرح زير دقت کرد :

1 <thead>

2 <tbody>

3 <tfoot>

تگ < Colgroup > , < Col > :

تگ < colgroup > برای دسته بندی گروهی از ستون های يک جدول ( تگ های td ) جهت قالب بندی و تعيين خصوصيات ، استفاده می شود . تگ < colgroup > ، فقط خصوصيات را نگهداری کرده و هيچگونه خروجی بر روی صفحه ندارد . به ازای هر ستونی که قرار است توسط اين تگ دسته بندی شود ، يک تگ < col > درون آن ايجاد می شود .

نکته :تگ < colgroup > فقط درون تگ < table > قابل استفاده است .

<html>

<head>

<title>tables in Iroschool.com</title>

<style>

Body {font: 12px Tahoma; text-align: right; direction: rtl;}

Table {width: 300px; border: 1px solid # 000 ;}

table caption {font: 14px/40px Tahoma ;}

table thead{background-color: #555555; color: #fff ;}

table thead th {padding: 5px 10px;}

table tbody td{padding: 5px 10px; background-color: #F5F8EB ;}

table tfoot{background-color: #EBE9E9;}

table tfoot td{padding: 5px 10px;}

</style>

</head>

<body>

<table>

<caption> توضیحات برای جدول </caption>

<thead>

<tr>

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

</tr>

</thead>

<tbody>

<tr>

<td> میترا </td>

<td> رحیمی </td>

</tr>

<tr>

</tr>

</tbody>

<tfoot>

<tr>

<td colspan="2"> تعداد رکوردها : 2 عدد </td>

</tr>

</tfoot>

</table>

</body>

</html>