دنیای برنامه نویسی و اپلیکیشن

baner-telegram
شما اینجا هستید : صفحه اول » طراحی سایت » آموزش HTML » فیلم آموزش کار با جدول ( Table ) در HTML
فیلم آموزش جدول در html رو ( Table )

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

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

جدول در html

برای نشون دادن اطلاعات به صورت جدول در صفحات وب از تگ جدول ( Table ) استفاده می کنیم ، تگ Table به صورت زیر استفاده می شود و داری دو تا زیر تگ به نام های <tr> و <td> هستش :

<html>
	<head>
		<title> Web30ty </title>
	</head>
	<body>
		<table>
			<tr>
				<td>  </td>
			</tr>
		</table>
	</body>

</html>

در کد بالا تگ <tr> برای سطر های جدول ( Table ) به کار میره و تگ <td> برای ستون بندی جدول به کار میره ، یک جدول حداقل باید یدونه تگ <tr> و تگ <td> رو داشته باشه ، اگه کدهای بالا رو اجرا کنید تو مرورگر به شما چیزی رو نون نمیده چون هنوز ما داخل Table چیزی ننوشته ایم .

شناسه Border در tabel

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

شناسه Width و Height در جدول

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

<html>
	<head>
		<title> Web30ty </title>
	</head>
	<body>
		<table width="500" height="400" border="2" bgcolor="#ff0000" >
			<tr>
				<td>cell 1</td>
				<td>cell 2</td>
			</tr>
			<tr>
				<td align="center">cell 3</td>
				<td>cell 4</td>
			</tr>
		</table>
	</body>

</html>

شناسه bgcolor

اگر کد بالا رو اجرا کنید خواهید دید که رنگ جدول قرمز هستش این به خاطر شناسه bgcolor هست که در تگ Table نوشته ایم ، این شناسه رنگ پس زمینه رو مشخص می کند . اگر این شناسه رو در تگ <td> استفاده کنید فقط رنگ پس زمینه اون قسمت Table تغییر خواهد کرد .

شناسه Align در جدول

اگر کد بالا رو اجرا کنید و نتیجه رو ببینید خواهید دید که نوشته Cell 3 در وسط نوشته شده است ولی بقیه Cell ها اینطوری نیستند ، این به اینکه ما در تگ <td> از شناسه align  استفاده کرده ایم و مقدار آن را برابر center قرار داده ایم .

شناسه BorderColor  در جدول

این شناسه رنگ border یا حاشیه جدول رو مشخص می کنه .

تگ <th> در Tabel

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

<html>
	<head>
		<title> Web30ty </title>
	</head>
	<body>
		<table width="500"  border="5" bordercolor="#0f0" >
			<tr>
				<th>عنوان اول</th>
				<th>عنوان دوم</th>
			</tr>
			<tr>
				<td align="center" bgcolor="#f00">
					    <h1>cell 1</h1>
				</td>
				<td>
					    <h1>cell 2</h1>
				</td align="center" bgcolor="#0f0">
			</tr>
			<tr>
				<td align="center" bgcolor="#00f">
				    <h1>cell 3</h1>
				</td>
				<td align="center" bgcolor="#0ff">
				    <h1>cell 4</h1>
				</td>
			</tr>
		</table>
	</body>

</html>

در قسمت بعد جدول در html رو ادامه می دیم .

فیلم آموزش جدول ( Table ) در html رو از اینجا دانلود کنید .

پیشنهاد می کنیم حتما بخوانید :

درباره : رضا طوماری

نظرات کاربران :



جواب سوال چیه ؟ *