کد 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 اطلاعات سلولها و خانه های آن مشخص ميگردند.

جدولی با يک سطر و يک ستون

100

جدولی با يک رديف و 3 ستون:

100 200 300

جدولی با دو سطر و سه ستون:

100 200 300
400 500 600

جدولی با محتوای فارسی و لاتين:

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>

محتوی يک سلول ميتواند متن، تصوير، فهرستها، جداول ديگر، پاراگرافها و ... باشد:

اين که يه پاراگرافه

اينم يه پاراگرافه ديگه!

 اين خونه هم که يه جدول ديگه توشه:
11 Sanandaj.com
3333 4444444444444
اين خونه يه فهرست داره توش
  • 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.

 



 




Copyright © 2003 - AVINY.COM - All Rights Reserved