فیلم آموزش HTML - کار با جدول ( Table ) قسمت دوم

فیلم آموزش HTML - کار با جدول ( Table ) ادغام کردن در جدول

» طراحی سایت » آموزش HTML » فیلم آموزش HTML – کار با جدول ( Table ) قسمت دوم

7776 بازدید

فیلم آموزش HTML – کار با جدول ( Table ) قسمت دوم

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

در ادامه می توانید فیلم آموزش مربوط به ادغام کردن در جدول را در ویدیو زیر مشاهد بکنید :

شناسه Cellpadding در ادغام کردن در جدول

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

شناسه Cellspacing

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

ادغام ستونی جدول با استفاده از شناسه Colspan

از این شناسه در تگ td استفاده می شود برای ادغام کردن ( وصل کردن ) دوتا ستون به هم کاربرد دارد و مقدار اون باید تعداد ستون هایی باشد که می خوایم باهم ادغام کنیم .

شناسه Rowspan

از این شناسه برای ادغام کردن به صورت سطری استفاده می شود و مقدار اون هم تعداد سطرهایی هست که می خوایم ادغام بکنیم .

تگ های <thead> و <tbody> و <tfoot>

تگ thead برای هدر یا همون عنوان جدول به کار میره .

تگ tbody بدنه اصلی جدول رو مشخص می کند .

تگ tfoot این تگ انتهای جدول رو مشحص می کند .

اگر ترتیب این تگ ها رو در هنگام نوشتن جابجا بنویسید هیچ تاثیری بر ترتیب جدول ندارد چون مرورگر براساس تگ اون ها اول میاد تگ thead رو میخونه بعد تگ tbody و در انتها تگ tfoot رو می خونه .

در سورس کد زیر می توانید آنچه را که برای جدول گفتم رو ببیتید :

<html>
	<head>
			<title> Web30ty </title>
	</head>
	<body>
			<table width="800"  border="1" bordercolor="#0f0" cellpadding="10" >
					
					<thead>
						
						<tr>
							<th>عنوان اول</th>
							<th>عنوان دوم</th>
							<th>عنوان سوم</th>
						</tr>
							
					</thead>
						
					<tbody>
						<tr>
							
							<td align="center" >
								<h1>cell 1</h1>
							</td>
							<td align="center">
								<h1>cell 2</h1>
							</td>
							<td align="center" rowspan="2">
								<h1>cell 3</h1>
							</td>
								
						</tr>
						<tr>
							
							<td align="center" >
								<h1>cell 4</h1>
							</td>
							<td align="center" >
								<h1>cell 5</h1>
							</td>
										
						</tr>
							
					</tbody>
							
					<tfoot>
							
						<tr>
								
							<td align="center" >
								<h1>cell 3</h1>
							</td>
							<td align="center" colspan="2" >
								<h1>cell 4</h1>
							</td>
									
						</tr>
								
					</tfoot>
			</table>
	</body>

</html>

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