جلسه 6 فیلم آموزشی جداول در HTML

جلسه 6 فیلم آموزشی جداول در HTML

  مشخصات آموزش

  •   مدت زمان 20 دقیقه
      حجم فایل 16.2 مگابایت
      زبان آموزش فارسی
  •   لینک دانلود

فیلم آموزشی رایگان جداول در HTML

 جلسه ششم: آموزش رایگان جداول در HTML

با سلام به کاربران خوب learningtv.ir

در این فیلم آموزشی که برای شما در نظر گرفتیم یاد می گیریم که چطور در صفحات وب یک جدول ایجاد کنیم.همچنین یاد می گیریم که چطور برای جدول عنوان یا caption در نظر بگیریم و یا چطور سلولهای آن را به صورت افقی یا عمودی با هم ادغام کنیم.در این فیلم یاد می گیریم که چطور از thead,tbody,tfoot استفاده کنیم و چه کابردهایی دارد.

دانلود رایگان فیلم آموزشی جداول در HTML

مدت فیلم آموزشی:20 دقیقه + زبان فارسی

حجم فایل:16.2 مگابایت

**************

نحوه تعریف جدول:

<table border=1>

</table>

عبارت border=1 باعث خواهد شد تا سلول ها و border ها از یکدیگر متمایز باشند.البته توصیه می شود بر اساس استانداردهای HTML5 هر گونه استایل دهی در داخل CSS صورت پذیرد.

نحوه تعریف ردیف و سلول:

<table border=1>
	<tr>
		<td> شماره </td>
		<td> نام</td>
		<td>سن</td>
	</tr>

	<tr>
		<td> 1</td>
		<td>رضا</td>
		<td>26</td>
	</tr>

	<tr>
		<td> 2</td>
		<td>حسن</td>
		<td>24</td>
	</tr>

</table>

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

تگ Caption جهت عنوان گذاری جدول:

از تگ <caption> جهت عنوان گذاری برای جدول استفاده می شود.نکات مهم در استفاده از این تگ این است که قاعدتا باید بلافاصله بعد از تگ <table> قرار بگیرد و از طرفی در هر تگ <table> حداکثر یک تگ <caption> استفاده نمود.این تگ همچنین باید بسته شود.هنگام استفاده از تگ <caption> عنوان جدول به طور پیشفرض در بالای جدول و وسط قرار می گیرد.بعد که CSS را فرا گرفتیم ، می توانیم با استفاده از text-align و caption-side این عنوان را جابجا کنیم.

تعیین header جدول:

برای اینکه معمولا ردیف اول جداول به صورت عنوان هر ستون یا header تعیین می شود این کار را در صفحات وب و در جداول در HTML می توانیم با استفاده از تگ <th> انجام بدهیم.استفاد از تگ <th> به جای <td> در سر ستون ها باعث می شود که این ردیف کمی bold تر قرار بگیرد و در وسط هر سلول جای بگیرد و از داده های جدول متمایز شود.در صورتی که استفاده از تگ <td> باعث می شود که متن به صورت نرمال و پیشفرض چپ-چین باشد.

 

<table border=1>
	<caption> جدول شماره 1</caption>
	<tr>
		<th> شماره </th>
		<th> نام</th>
		<th>سن</th>
	</tr>

	<tr>
		<td> 1</td>
		<td>رضا</td>
		<td>26</td>
	</tr>

	<tr>
		<td> 2</td>
		<td>حسن</td>
		<td>24</td>
	</tr>

</table>

 

ادغام (merge) کردن سلول ها :

با استفاده از دو attribute با نام های rowspan و colspan می توانیم خانه های یک جدول را به صورت عمودی یا افقی (ستونی یا ردیفی) ادغام کنیم.

 

<table border=1>
	<caption> جدول شماره 1</caption>
	<tr>
		<th> شماره </th>
		<th> نام</th>
		<th>سن</th>
	</tr>

	<tr>
		<td rowspan="2"> 1</td>
		<td>رضا</td>
		<td>26</td>
	</tr>

	<tr>
		<td>حسن</td>
		<td>24</td>
	</tr>
	<tr>
		<td>Average</td>
		<td colspan="2">25</td>
	</tr>
</table>

در کد بالا طرز استفاده از rowspan  و colspan را یاد گرفتید.

استفاده از تگهای thead,tbody,tfoot:

گاهی پیش می آید جداول ما آنقدر بزرگ است که مثلا هنگام پرینت یا پیشنمایش بخشی از آن چند تکه می شود در صفحات مختلف.خب در این موارد گاهی برای کاربر فهم داده سخت است که مثلا نام ستون این داده چیست.اینجوری همیشه باید به نام ستون در صفحه اول مراجعه کند.حالا اگر سرستون ها و یا فوتر همیشه در همه صفحات قراربگیره اصولی تر هست.خب برای این مهم از تگهای thead,tbody,tfoot استفاده می کنیم.جدول به سه بخش هدر،بدنه،فوتر تقسیم می شود و در میان این تگها قرار میگرد.معمولا هدر و فوتر یک ردیف هستند و ولی ممکن است که چند ردیفی هم باشند.

 

<table border=1>
	<caption> جدول شماره 1</caption>
	<thead>
		<tr>
			<th> شماره </th>
			<th> نام</th>
			<th>سن</th>
		</tr>
	</thead>

	<tbody>
		<tr>
			<td rowspan="2"> 1</td>
			<td>رضا</td>
			<td>26</td>
		</tr>
		<tr>
			<td>حسن</td>
			<td>24</td>
		</tr>
	</tbody>

	<tfoot>
		<tr>
			<td>Average</td>
			<td colspan="2">25</td>
		</tr>
	</tfoot>
</table>

نکته جالب این هست که می توانید حتی جای این سه بخش رو عوض کنید ولی در خروجی تغییری داده نمی شود.مثلا تگ <thead> را به انتها ببریم و مثلا <tbody> اول و <tfoot> در وسط قرار بگیرد  باز هم در خروجی همان ترتیب صحیح نمایش داده می شود(می توانید امتحان کنید (:dash2:) )

*** صمیمانه پذیرای پیشنهاد، انتقاد و نظر شما در مورد کیفیت فیلم های آموزشی هستیم ***

۲ Responses to “جلسه 6 فیلم آموزشی جداول در HTML”

  1. ابراهیم گفت:

    خیلی ممنون عالی عالی عالی

ارسال دیدگاه

نام (*)
پست الکترونیکی (*)
وبسایت

  مشخصات مدرس

سید عبدالله محمودزاده
دانش آموخته ی رشته ی مهندسی نرم افزار می باشد. زمینه ی تخصصی وی: برنامه نویسی Application ها ویندوزی به زبان C#.NET طراحی پایگاه داده (SQL server,MySQL,Access ) تکنولوژی های کار با منابع داده (ADO.NET,Linq,Entity Framework) برنامه نویسی وب (HTML5,CSS3,JavaScript,Jquery,Ajax,PHP,Jason) می باشد.

  دوره‌های پیشنهادی