آموزش و مقالات

0
مقالات آموزشی - HTML

آموزش گام به گام HTML - جداول در HTML

ﺳﻪشنبه, 30 آذر,1395
آموزش گام به گام HTML - جداول در HTML
 

جداول در HTML


جداول در html به طراحان وب این امکان را میدهد که داده هایی مانند متن ، عکس ها ، لینک ها و ... را مرتب کنند
برای استفاده از جداول در html میتوان از تگ <table> که در آن از تگ <tr> برای ساخت سطر و از تگ <td> برای ساخت فیلد های جدول استفاده کنید.
مثال

<!DOCTYPE html>
<html>
<head>
<title>جداول در HTML</title>
</head>
<body>
<table border="1">
<tr>
<td>سطر 1, ستون 1</td>
<td>سطر 1, ستون 2</td>
</tr>
<tr>
<td>سطر 2, ستون 1</td>
<td>سطر 2, ستون 2</td>
</tr>
</table>
</body>
</html>

 

 
در اینجا border یکی از ویژگی های تگ <table> میباشد و در همه فیلد های وجود دارد.میتوان با قرار دادن border=”0” آنها را حذف کنید.

تیتر های جدول

تیتر های جدول میتوانند به وسیله تگ <th> تعریف شوند.این تگ بجای تگ <td> قرار خواهد گرفت.معمولا سطر های اول به تیترهای جدول اختصاص میابند.در هر صورت شما میتوانید از تگ <th> در هر سطر استفاده کنید.
مثال
<!DOCTYPE html>
<html>
<head>
<title>تیتر جداول در HTML</title>
</head>
<body>
<table border="1">
<tr>
<th>نام</th>
<th>حقوق</th>
</tr>
<tr>
<td>جلیل کرمی</td>
<td>500،000</td>
</tr>
<tr>
<td>صادق کرمی</td>
<td>700،000</td>
</tr>
</table>
</body>
</html>

 

ویژگی های حاشیه داخلی و فاصله فیلد ها


دو ویژگی به نام های حاشیه داخلی و فاصله فیلد ها که به شما این اجازه را میدهد که فضای داخلی فیلد ها را تنظیم کنید.ویژگی فاصله فیلد ها عرض border را مشخص میکند در حالی که حاشیه داخلی فاصله بین border و محتوا را درون فیلد ها مشخص میکند.
مثال

<!DOCTYPE html>
<html>
<head>
<title>HTML حاشیه فیلد ها در جدول</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>نام</th>
<th>حقوق</th>
</tr>
<tr>
<td>جلیل کرمی</td>
<td>500،000</td>
</tr>
<tr>
<td>صادق کرمی</td>
<td>700،000</td>
</tr>
</table>
</body>
</html>

 

 
ویژگی های طول ستون و طول سطر

شما میتوانید از ویژگی طول ستون استفاده کنید اگر بخواهید دو یا چند ستون را درون یک ستون ادغام کنید.همینطور میتوانید از طول سطر استفاده کنید اگر بخواهید دو یا چند سطر را درون یک سطر ادغام کنید.
مثال
<!DOCTYPE html>
<html>
<head>
<title>HTML طول ستون و طول سطر در جدول</title>
</head>
<body>
<table border="1">
<tr>
<th>ستون 1</th>
<th>ستون 2</th>
<th>ستون 3</th>
</tr>
<tr><td rowspan="2">سطر 1 فیلد 1</td><td>سطر 1 فیلد 2</td><td>سطر 1 فیلد 3</td></tr>
<tr><td>سطر 2 فیلد 2</td><td>سطر 2 فیلد 3</td></tr>
<tr><td colspan="3">سطر 3 فیلد 1</td></tr>
</table>
</body>
</html>

 

 
پس زمینه جداول

میتوانید با استفاده ای یکی از دو راه زیر پس زمینه جدول را تنظیم کنید:
bgcolor : میتوانید رنگ پس زمینه همه جدول یا یکی از فیلد ها را تنظیم کنید.
background :میتوانید عکس پس زمینه همه جدول یا یکی از فیلد ها را تنظیم کنید.
و همینطور میتوانید رنگ border را به وسیله bordercolor مشخص کنید.
مثال
<!DOCTYPE html>
<html>
<head>
<title>HTML پس زمینه جداول در</title>
</head>
<body>
<table border="1" bordercolor="green" bgcolor="yellow">
<tr>
<th>ستون 1</th>
<th>ستون 2</th>
<th>ستون 3</th>
</tr>
<tr><td rowspan="2">سطر 1 فیلد 1</td><td>سطر 1 فیلد 2</td><td>سطر 1 فیلد 3</td></tr>
<tr><td>سطر 2 فیلد 2</td><td>سطر 2 فیلد 3</td></tr>
<tr><td colspan="3">سطر 3 فیلد 1</td></tr>
</table>
</body>
</html>

 

 
در اینجا مثالی از استفاده background آورده شده است.در اینجا یک ما یکی از عکس های قابل دسترسی در راهنمای عکس ها را آورده ایم.
<!DOCTYPE html>
<html>
<head>
<title>HTML پس زمینه جداول در</title>
</head>
<body>
<table border="1" bordercolor="green" background="/images/test.png">
<tr>
<th>ستون 1</th>
<th>ستون 2</th>
<th>ستون 3</th>
</tr>
<tr><td rowspan="2">سطر 1 فیلد 1</td><td>سطر 1 فیلد 2</td><td>سطر 1 فیلد 3</td></tr>
<tr><td>سطر 2 فیلد 2</td><td>سطر 2 فیلد 3</td></tr>
<tr><td colspan="3">سطر 3 فیلد 1</td></tr>
</table>
</body>
</html>

 

ارتفاع وعرض جدول

شما میتوانید ارتفاع و عرض جدول را با استفاده از height و width تنظیم کنید.میتوانید این کار را مقدار دهی درصدی یا پیکسلی انجام دهید.
مثال 
<!DOCTYPE html>
<html>
<head>
<title>HTML جدول عرض/ارتفاع</title>
</head>
<body>
<table border="1" width="400" height="150">
<tr>
<td>سطر 1, ستون 1</td>
<td>سطر 1, ستون 2</td>
</tr>
<tr>
<td>سطر 2, ستون 1</td>
<td>سطر 2, ستون 2</td>
</tr>
</table>
</body>
</html>

 

 

عنوان جدول


شما میتوانید از تگ <caption> برای مشخص کردن عنوان جدول استفاده کنید.این تگ در ورژن های جدید HTML/XHTML منسوخ شده است.
مثال
 

<!DOCTYPE html>
<html>
<head>
<title>HTML تگ caption</title>
</head>
<body>
<table border="1" width="100%">
<caption>This is the caption</caption>
<tr>
<td>سطر 1, ستون 1</td><td>سطر 1, ستون 2</td>
</tr>
<tr>
<td>سطر 2, ستون 1</td><td>سطر 2, ستون 2</td>
</tr>
</table>
</body>
</html>

 

 
تیتر ، بدنه و قسمت های پایین جدول

جداول میتوانند به سه قسمت تنظیم شوند : تیتر ، بدنه و قسمت های پایین جدول
سه عنصر برای جداسازی تیتر ، بدنه و قسمت های پایین جدول وجود دارد:
<thead> - برای ساخت جداگانه تیتر جدول 
<tbody> - برای نشان دادن بدنه اصلی جدول
<tfoot> - برای ساخت جداگانه قسمت های پایین جدول
جدول ممکن است از چندین عنصر <tbody> که برای نشان دادن صفحات مختلف یا گروه هایی از داده ها تشکیل شده باشد.
مثال
<!DOCTYPE html>
<html>
<head>
<title>HTML جدول</title>
</head>
<body>
<table border="1" width="100%">
<thead>
<tr>
<td colspan="4">این سرتیتر یک صفحه است</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">این قسمت پایین یک جدول است</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>فیلد 1</td>
<td>فیلد 2</td>
<td>فیلد 3</td>
<td>فیلد 4</td>
</tr>
</tbody>
</table>
</body>
</html>

 

 
جداول تو در تو

شما میتوانید یک جدول را درون یک جدول دیگر قرار دهید.نه تنها جداول بلکه تقریبا همه تگ ها را داخل تگ جدول داده <td>.
مثال
<!DOCTYPE html>
<html>
<head>
<title>HTML جدول</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td>
   <table border="1" width="100%">
   <tr>
   <th>نام</th>
   <th>حقوق</th>
   </tr>
   <tr>
   <td>جلیل کرمی</td>
   <td>500،000</td>
   </tr>
   <tr>
   <td>صادق کرمی</td>
   <td>700،000</td>
   </tr>
   </table>
</td>
</tr>
</table>
</body>
</html>

 

Print
32 رتبه بندی این مطلب:
بدون رتبه

محمد فرخیانمحمد فرخیان

سایر نوشته ها توسط محمد فرخیان

نوشتن یک نظر

نام:
ایمیل:
نظر:
افزودن نظر

نام شما
ایمیل شما
عنوان
پیام خود را وارد کنید ...
x