| کد HTML |
اجرای کد HTML به وسیله برنامه
مرورگر (Browser) |
| انواع جداول با کمک المان Table |
|
<html>
<head>
<meta http-equiv="Content-Type" CONTENT="text/html; charset=utf-8">
</head>
<body>
<p dir="rtl">
جدولها در اچتمل با تگ table شروع ميشوند. هر تک table با تگ tr شروع و با کمک
تگ td اطلاعات سلولها و خانه های آن مشخص ميگردند.
</p>
<h4 dir="rtl">جدولی با يک سطر و يک ستون</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4 dir="rtl">جدولی با يک رديف و 3 ستون:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4 dir="rtl">جدولی با دو سطر و سه ستون:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4 dir="rtl">جدولی با محتوای فارسی و لاتين:</h4>
<table border="1">
<tr>
<td dir="ltr">One</td>
<td dir="rtl">يک</td>
</tr>
<tr dir="rtl">
<td dir="ltr">Two</td>
<td dir="rtl">دووووووووو</td>
</tr>
<tr dir="rtl">
<td dir="ltr">Three</td>
<td dir="rtl">ســـــــــــــــــــــــه</td>
</tr>
</table>
<p dir="rtl">
در مثال آخر به شناسه dir و مقادير rtl و ltr برای تعيين جهت نمايش متون فارسی
و لاتين توجه کنيد.
</body>
</html> |
جدولها در اچتمل با تگ table شروع ميشوند. هر تک table با تگ tr
شروع و با کمک تگ td اطلاعات سلولها و خانه های آن مشخص ميگردند.
جدولی با يک سطر و يک ستون
جدولی با يک رديف و 3 ستون:
جدولی با دو سطر و سه ستون:
جدولی با محتوای فارسی و لاتين:
| One |
يک |
| Two |
دووووووووو |
| Three |
ســـــــــــــــــــــــه |
در مثال آخر به شناسه dir و مقادير rtl و ltr برای تعيين جهت
نمايش متون فارسی و لاتين توجه کنيد.
|
| تعيين مرز جداول با کمک شناسه border |
|
<html>
<head>
<meta http-equiv="Content-Type" CONTENT="text/html; charset=utf-8">
</head>
<body>
<div dir="rtl" >
<h4>جدولی دو در دو با مرز واحد:</h4>
<table border="1" dir="rtl">
<tr>
<td>يک</td>
<td>دو</td>
</tr>
<tr>
<td>سه</td>
<td>چهار</td>
</tr>
</table>
<h4>جدولی دو در دو با مرز 5:</h4>
<table border="5" dir="rtl">
<tr>
<td>يک</td>
<td>دو</td>
</tr>
<tr>
<td>سه</td>
<td>چهار</td>
</tr>
</table>
<h4>جدولی دو در دو با مرز 15 :</h4>
<table border="15" dir="rtl">
<tr>
<td>يک</td>
<td>دو</td>
</tr>
<tr>
<td>سه</td>
<td>چهار</td>
</tr>
</table>
<h4>جدولی دو در دو بدون مرز (حالت پيش فرض):</h4>
<table dir="rtl">
<tr>
<td>يک</td>
<td>دو</td>
</tr>
<tr>
<td>سه</td>
<td>چهار</td>
</tr>
</table>
</div>
</body>
</html> |
جدولی دو در دو با مرز واحد:
جدولی دو در دو با مرز 5:
جدولی دو در دو با مرز 15 :
جدولی دو در دو بدون مرز (حالت پيش فرض):
|
| مرز در جداول |
|
<html>
<head>
<meta http-equiv="Content-Type" CONTENT="text/html; charset=utf-8">
</head>
<body>
<h4 dir="rtl">جدولی دو در دو با مرز واحد:</h4>
<table border="1" dir="rtl">
<tr>
<td>يک</td>
<td>دو، دو</td>
</tr>
<tr>
<td>سه، سه، سه</td>
<td>چهار، چهار، چهار، چهار</td>
</tr>
</table> |
جدولی دو در دو با مرز واحد:
| يک |
دو، دو |
| سه، سه، سه |
چهار، چهار، چهار، چهار |
جدولی دو در دو بدون مرز (حالت پيش فرض):
| يک |
دو، دو |
| سه، سه، سه |
چهار، چهار، چهار، چهار |
|
| تعيين جهت نمايش متون در جداول با کمک شناسه dir |
|
<html>
<head>
<meta http-equiv="Content-Type" CONTENT="text/html; charset=utf-8">
</head>
<body>
<h4 dir="rtl">جدولی دو در دو با مرز واحد:</h4>
<table border="1" dir="rtl">
<tr>
<td>يک</td>
<td>دو، دو</td>
</tr>
<tr>
<td>سه، سه، سه</td>
<td>چهار، چهار، چهار، چهار</td>
</tr>
</table>
<h4 dir="rtl">جدولی دو در دو بدون شناسه dir :</h4>
<table border="1">
<tr>
<td>One</td>
<td>Two, Two</td>
</tr>
<tr>
<td>Three, Three, Three</td>
<td>Four, Four, Four, Four</td>
</tr>
</table>
</body>
</html> |
جدولی دو در دو با مرز واحد:
| يک |
دو، دو |
| سه، سه، سه |
چهار، چهار، چهار، چهار |
جدولی دو در دو بدون شناسه dir :
| One |
Two, Two |
| Three, Three, Three |
Four, Four, Four, Four |
|
| تعيين عنوان يک جدول با کمک المان caption |
|
<html>
<head>
<meta http-equiv="Content-Type" CONTENT="text/html; charset=utf-8">
</head>
<body>
<h4 dir="rtl">جدولی با عنوان (آزمايش اول) و مرز ضخيم:</h4>
<table border="5" dir="rtl">
<caption>آزمايش اول</caption>
<tr>
<td>يک</td>
<td>دو، دو</td>
</tr>
<tr>
<td>سه، سه، سه</td>
<td>چهار، چهار، چهار، چهار</td>
</tr>
</table>
<p dir="rtl">
به محل تگ caption و مقدار شناسه border در تگ table توجه کنيد. با کمک تگ
caption ميتوان عنوان جدول را تعيين کرد.
</p>
</body>
</html> |
جدولی با عنوان (آزمايش اول) و مرز ضخيم:
آزمايش اول
| يک |
دو، دو |
| سه، سه، سه |
چهار، چهار، چهار، چهار |
به محل تگ caption و مقدار شناسه border در تگ table توجه کنيد.
با کمک تگ caption ميتوان عنوان جدول را تعيين کرد.
|
| توسعه سطری يا ستونی در جداول با کمک شناسه های colspan و rowspan
|
|
<html>
<head>
<meta http-equiv="Content-Type" CONTENT="text/html; charset=utf-8">
</head>
<body>
<h4 dir="rtl">در اين مثال با کمک شناسه colspan دو ستون به يک ستون تبديل شده
است:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4 dir="rtl">در اين مثال با کمک شناسه rowspan دو رديف به يک رديف تبديل شده
است:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</div>
</body>
</html> |
در اين مثال با کمک شناسه colspan دو ستون به يک ستون تبديل شده
است:
| Name |
Telephone |
| Bill Gates |
555 77 854 |
555 77 855 |
در اين مثال با کمک شناسه rowspan دو رديف به يک رديف تبديل شده
است:
| First Name: |
Bill Gates |
| Telephone: |
555 77 854 |
| 555 77 855 |
|
| جدولی با محتويات مختلف در هر خانه |
|
<html>
<head>
<meta http-equiv="Content-Type" CONTENT="text/html; charset=utf-8">
</head>
<body>
<h4 dir="rtl">محتوی يک سلول ميتواند متن، تصوير، فهرستها، جداول ديگر،
پاراگرافها و ... باشد:</h4>
<div align=center>
<table border="1" dir="rtl">
<tr>
<td>
<p>اين که يه پاراگرافه</p>
<p>اينم يه پاراگرافه ديگه!</p>
</td>
<td>اين خونه هم که يه جدول ديگه توشه:
<table border="1">
<tr>
<td>11</td>
<td><a href="http://www.sanandaj.com/postcard/" target="_blank" title="ما رو
کشتی با اين سنندجت!">Sanandaj.com</a></td>
</tr>
<tr>
<td>3333</td>
<td>4444444444444</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>اين خونه يه فهرست داره توش
<ul dir="ltr">
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>يك رؤيا تنها يك رؤياست. يك هدف رويائيست كه طرح و فرجه مشخص دارد.</td>
</tr>
<tr>
<td dir="ltr" align=center>اگه اشکتون دراومده مقصر منم ، ميدونم.
<br>
<b>تو اين خونه هم متن هست هم تصوير </b>
<br>
<img src="../images/baby_cry.gif" width="198" height="148">
</td>
<td dir="ltr">Remember that a minute of anger denies you sixty seconds of
happiness. </td>
</tr>
</table>
</div>
<h4 dir="rtl">به شناسه dir و و مقادير rtl و ltr توجه داشته باشيد.</h4>
</div>
</body>
</html> |
محتوی يک سلول ميتواند متن، تصوير، فهرستها، جداول ديگر،
پاراگرافها و ... باشد:
| اين که يه پاراگرافه اينم يه پاراگرافه ديگه! |
اين خونه هم که يه جدول ديگه توشه:
|
اين خونه يه فهرست داره توش
- apples
- bananas
- pineapples
|
يك رؤيا تنها يك رؤياست. يك هدف رويائيست كه طرح و فرجه مشخص دارد. |
اگه اشکتون دراومده مقصر منم ، ميدونم.
تو اين خونه هم متن هست هم تصوير
 |
Remember that a minute of anger denies you sixty seconds
of happiness. |
به شناسه dir و و مقادير rtl و ltr توجه داشته باشيد.
|
| ايجاد فاصله بين خانه های جدول با کمک شناسه cellspacing |
|
<html>
<head>
<meta http-equiv="Content-Type" CONTENT="text/html; charset=utf-8">
</head>
<body>
<div align="center">
<h4 dir="rtl">اين مثال نحوه ايجاد فاصله بين خانه های جدول را با کمک شناسه
cellspacing نشان ميدهد:</h4>
<table border="1" dir="rtl">
<tr>
<td>يک</td>
<td>دو، دو</td>
</tr>
<tr>
<td>سه، سه، سه</td>
<td>چهار، چهار، چهار، چهار</td>
</tr>
</table>
<p>
<table border="1" dir="rtl" cellspacing="10">
<tr>
<td>يک</td>
<td>دو، دو</td>
</tr>
<tr>
<td>سه، سه، سه</td>
<td>چهار، چهار، چهار، چهار</td>
</tr>
</table>
</div>
</body>
</html> |
اين مثال نحوه ايجاد فاصله بين خانه های جدول را با کمک شناسه
cellspacing نشان ميدهد:
| يک |
دو، دو |
| سه، سه، سه |
چهار، چهار، چهار، چهار |
| يک |
دو، دو |
| سه، سه، سه |
چهار، چهار، چهار، چهار |
|
| ايجاد فاصله خالی بين خانه های جدول و مرز آنها را با کمک شناسه cellpadding
|
|
<html>
<head>
<meta http-equiv="Content-Type" CONTENT="text/html; charset=utf-8">
</head>
<body>
<div align="center">
<h4 dir="rtl">اين مثال نحوه ايجاد فاصله خالی بين خانه های جدول و مرز آنها را
با کمک شناسه cellpadding نشان ميدهد:</h4>
<table border="1" dir="rtl">
<tr>
<td>يک</td>
<td>دو، دو</td>
</tr>
<tr>
<td>سه، سه، سه</td>
<td>چهار، چهار، چهار، چهار</td>
</tr>
</table>
<p>
<table border="1" dir="rtl" cellpadding="10">
<tr>
<td>يک</td>
<td>دو، دو</td>
</tr>
<tr>
<td>سه، سه، سه</td>
<td>چهار، چهار، چهار، چهار</td>
</tr>
</table>
</div>
</body>
</html> |
اين مثال نحوه ايجاد فاصله خالی بين خانه های جدول و مرز آنها
را با کمک شناسه cellpadding نشان ميدهد:
| يک |
دو، دو |
| سه، سه، سه |
چهار، چهار، چهار، چهار |
| يک |
دو، دو |
| سه، سه، سه |
چهار، چهار، چهار، چهار |
|
| نحوه تعيين رنگ زمينه يا تصوير زمينه در خانه های جداول |
|
<html>
<head>
<meta http-equiv="Content-Type" CONTENT="text/html; charset=utf-8">
</head>
<body>
<div align="center">
<h4 dir="rtl">اين مثال نحوه تعيين رنگ زمينه يا تصوير زمينه در خانه های جداول
را با کمک شناسه های bgcolor و background نشان ميدهد.:</h4>
<table border="1" dir="rtl" bgcolor="yellow" >
<tr>
<td>يک</td>
<td>دو، دو</td>
</tr>
<tr>
<td>سه، سه، سه</td>
<td>چهار، چهار، چهار، چهار</td>
</tr>
</table>
<p>
<table border="1" dir="rtl" background="bg.jpg">
<tr>
<td>يک</td>
<td>دو، دو</td>
</tr>
<tr>
<td>سه، سه، سه</td>
<td>چهار، چهار، چهار، چهار</td>
</tr>
</table>
</div>
</body>
</html> |
اين مثال نحوه تعيين رنگ زمينه يا تصوير زمينه در خانه های
جداول را با کمک شناسه های bgcolor و background نشان ميدهد.:
| يک |
دو، دو |
| سه، سه، سه |
چهار، چهار، چهار، چهار |
| يک |
دو، دو |
| سه، سه، سه |
چهار، چهار، چهار، چهار |
|
| نحوه تعيين رنگ زمينه يا تصوير زمينه خانه های جداول |
|
<html>
<head>
<meta http-equiv="Content-Type" CONTENT="text/html; charset=utf-8">
</head>
<body>
<div align="center">
<h4 dir="rtl">اين مثال نحوه تعيين رنگ زمينه يا تصوير زمينه در خانه های جداول
را با کمک شناسه های bgcolor و background نشان ميدهد.:</h4>
<table border="1" dir="rtl" >
<tr>
<td bgcolor="blue">يک</td>
<td>دو، دو</td>
</tr>
<tr>
<td>سه، سه، سه</td>
<td bgcolor="yellow">چهار، چهار، چهار، چهار</td>
</tr>
</table>
<p>
<table border="1" dir="rtl" >
<tr>
<td>يک</td>
<td>دو، دو</td>
</tr>
<tr>
<td>سه، سه، سه</td>
<td background="bg.jpg">چهار، چهار، چهار، چهار</td>
</tr>
</table>
</div>
</body>
</html> |
اين مثال نحوه تعيين رنگ زمينه يا تصوير زمينه در خانه های
جداول را با کمک شناسه های bgcolor و background نشان ميدهد.:
| يک |
دو، دو |
| سه، سه، سه |
چهار، چهار، چهار، چهار |
| يک |
دو، دو |
| سه، سه، سه |
چهار، چهار، چهار، چهار |
|
| نحوه تعيين ترازبندی در خانه های جداول با کمک شناسه align
|
|
<html>
<head>
<meta http-equiv="Content-Type" CONTENT="text/html; charset=utf-8">
</head>
<body>
<div align="center">
<h4 dir="rtl">اين مثال نحوه تعيين ترازبندی در خانه های جداول را با کمک شناسه
align نشان ميدهد.:</h4>
<table border="1" >
<tr>
<th align="left">Number</td>
<th dir="rtl" align="right">عدد</td>
<th dir="rtl" align="right">رقم</td>
</tr>
<tr>
<td align="left">One</td>
<td dir="rtl" align="right">يک</td>
<td dir="rtl" align="right">11.1</td>
</tr>
<tr>
<td align="left">Two, Two</td>
<td dir="rtl" align="right">دو، دو</td>
<td dir="rtl" align="right">233332.2</td>
</tr>
<tr>
<td align="left">Three, Three, Three</td>
<td dir="rtl" align="right">سه، سه، سه</td>
<td dir="rtl" align="right">33333333333.3</td>
</tr>
</table>
</div>
</body>
</html> |
اين مثال نحوه تعيين ترازبندی در خانه های جداول را با کمک
شناسه align نشان ميدهد.:
| Number |
عدد |
رقم |
| One |
يک |
11.1 |
| Two, Two |
دو، دو |
233332.2 |
| Three, Three, Three |
سه، سه، سه |
33333333333.3 |
|
| روشهای مختلف تعيين مرز جداول با کمک شناسه frame |
|
<html>
<head>
<meta http-equiv="Content-Type" CONTENT="text/html; charset=utf-8">
</head>
<body>
<div align="center">
<h4 dir="rtl">اين مثال روشهای مختلف تعيين مرز جداول را با کمک شناسه frame
نشان ميدهد:</h4>
<table border="1" dir="rtl">
<tr>
<td>يک</td>
<td>دو، دو</td>
</tr>
<tr>
<td>سه، سه، سه</td>
<td>چهار، چهار، چهار، چهار</td>
</tr>
</table>
<p>
<table border="1" dir="rtl" frame="border">
<tr>
<td>يک</td>
<td>دو، دو</td>
</tr>
<tr>
<td>سه، سه، سه</td>
<td>چهار، چهار، چهار، چهار</td>
</tr>
</table>
<p>
<table border="1" dir="rtl" frame="box">
<tr>
<td>يک</td>
<td>دو، دو</td>
</tr>
<tr>
<td>سه، سه، سه</td>
<td>چهار، چهار، چهار، چهار</td>
</tr>
</table>
<p>
<table border="1" dir="rtl" frame="above">
<tr>
<td>يک</td>
<td>دو، دو</td>
</tr>
<tr>
<td>سه، سه، سه</td>
<td>چهار، چهار، چهار، چهار</td>
</tr>
</table>
<p>
<table border="1" dir="rtl" frame="void">
<tr>
<td>يک</td>
<td>دو، دو</td>
</tr>
<tr>
<td>سه، سه، سه</td>
<td>چهار، چهار، چهار، چهار</td>
</tr>
</table>
<p>
<table border="1" dir="rtl" frame="hsides">
<tr>
<td>يک</td>
<td>دو، دو</td>
</tr>
<tr>
<td>سه، سه، سه</td>
<td>چهار، چهار، چهار، چهار</td>
</tr>
</table>
<p>
<table border="1" dir="rtl" frame="vsides">
<tr>
<td>يک</td>
<td>دو، دو</td>
</tr>
<tr>
<td>سه، سه، سه</td>
<td>چهار، چهار، چهار، چهار</td>
</tr>
</table>
<p>
<table border="1" dir="rtl" frame="lhs">
<tr>
<td>يک</td>
<td>دو، دو</td>
</tr>
<tr>
<td>سه، سه، سه</td>
<td>چهار، چهار، چهار، چهار</td>
</tr>
</table>
<p>
<table border="1" dir="rtl" frame="rhs">
<tr>
<td>يک</td>
<td>دو، دو</td>
</tr>
<tr>
<td>سه، سه، سه</td>
<td>چهار، چهار، چهار، چهار</td>
</tr>
</table>
<p>
</div>
</body>
</html> |
اين مثال روشهای مختلف تعيين مرز جداول را با کمک شناسه frame
نشان ميدهد:
| يک |
دو، دو |
| سه، سه، سه |
چهار، چهار، چهار، چهار |
| يک |
دو، دو |
| سه، سه، سه |
چهار، چهار، چهار، چهار |
| يک |
دو، دو |
| سه، سه، سه |
چهار، چهار، چهار، چهار |
| يک |
دو، دو |
| سه، سه، سه |
چهار، چهار، چهار، چهار |
| يک |
دو، دو |
| سه، سه، سه |
چهار، چهار، چهار، چهار |
| يک |
دو، دو |
| سه، سه، سه |
چهار، چهار، چهار، چهار |
| يک |
دو، دو |
| سه، سه، سه |
چهار، چهار، چهار، چهار |
| يک |
دو، دو |
| سه، سه، سه |
چهار، چهار، چهار، چهار |
| يک |
دو، دو |
| سه، سه، سه |
چهار، چهار، چهار، چهار |
|
| ترازبندی محتوای خانه های جداول با کمک شناسه "align" و "valign"
|
|
<html>
<head>
<title>Horizontal and Vertical Alignment</title>
</head>
<body BGCOLOR="#FFFFFF">
<table BORDER="1" WIDTH="100%" CELLSPACING="5" CELLPADDING="5">
<tr>
<th WIDTH="25%">HORIZONTAL ALIGNMENT</th>
<th WIDTH="25%">Left</th>
<th WIDTH="25%">Center</th>
<th WIDTH="25%">Right</th>
</tr>
<tr>
<td WIDTH="25%">Horizontal alignment properties align text or images to the
<b>left</b>, <b>center</b>,
or <b>right</b> of the cell.</td>
<td ALIGN="left" WIDTH="25%"><img SRC="check.gif" WIDTH="52"
HEIGHT="49"></td>
<td ALIGN="center" WIDTH="25%"><img SRC="check.gif" WIDTH="52"
HEIGHT="49"></td>
<td ALIGN="right" WIDTH="25%"><img SRC="check.gif" WIDTH="52"
HEIGHT="49"></td>
</tr>
<tr>
<th>VERTICAL ALIGNMENT</th>
<th>Top</th>
<th>Middle</th>
<th>Bottom</th>
</tr>
<tr>
<td VALIGN="top" WIDTH="25%">Vertical alignment properties align the
contents of the cell
to the<b> top</b>, <b>middle</b>, or <b>bottom</b> of the cell.</td>
<td VALIGN="top" ALIGN="center" WIDTH="25%"><img SRC="check.gif" WIDTH="52"
HEIGHT="49"></td>
<td VALIGN="middle" ALIGN="center" WIDTH="25%"><img SRC="check.gif"
WIDTH="52" HEIGHT="49"></td>
<td VALIGN="bottom" ALIGN="center" WIDTH="25%"><img SRC="check.gif"
WIDTH="52" HEIGHT="49"></td>
</tr>
</table>
</body>
</html> |
| HORIZONTAL ALIGNMENT |
Left |
Center |
Right |
| Horizontal alignment properties align text or images to
the left, center, or right of the cell. |
 |
|
|
| VERTICAL ALIGNMENT |
Top |
Middle |
Bottom |
| Vertical alignment properties align the
contents of the cell to the top, middle, or bottom
of the cell. |
|
|
|
|
