تهران ، میدان ولیعصر جنب مترو کوی شاهد پلاک 8 واحد 3
88895790
بازگشت به لیست مقالات » | ﺳﻪشنبه 25 آبان 1395 در ساعت 17 : 14 دقیقه | نظرات کاربران ( 0 )
آموزش HTML - ساخت جدول

آموزش HTML  - ساخت جدول

جداول در html   با استفاده از تگ   table  ایجاد می شوند .

نحوه ی نوشتار صحیح تگ table بصورت زیر می باشد .

 <table></table>

یک جدول از سطر ها و سطون هایی تشکیل می شوند که با سطر را با تگ tr  و سلول ها را با تگ  td  مشخص خواهیم کرد .

Tr  مخفف کلمه ی  table row  و td  مخفف کلمه ی   table data  می باشد .

تگ  td   میتواند حاوی لینک , متن , عکس و جداول , فرم و... باشد .

مثال :

 

 

<table>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

 

 

مثال بالا بصورت زیر در مرورگر نمایش داده خواهد شد :

 

 

row 1, cell 1      row 1, cell 2

row 2, cell 1      row 2, cell 2

 

 

خصوصیا border  در تگ  table  :

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

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

از این خصوصیت برای زیبایی و تفکیک جدول از سایر عناصر و تفکیک سطر ها از یکدیگر از خصوصیت border  استفاده می کنیم .

با مثال زیر بهتر با این موضوع آشنا خواهید شد  :

 

<!DOCTYPE html>

<html>

<body>

<table border="1" style="width:300px">

<tr>

  <td>Jill</td>

  <td>Smith</td>                    

  <td>50</td>

</tr>

<tr>

  <td>Eve</td>

  <td>Jackson</td>                 

  <td>94</td>

</tr>

<tr>

  <td>John</td>

  <td>Doe</td>                      

  <td>80</td>

</tr>

</table>

</body>

</html>

 

 

با اجرای مثال بالا مرورگر بصورت زیر به نمایش در خواهد آمد :

 

 

Jill

Smith

50

Eve

Jackson

94

John

Doe

80

 

 

 

نکته ی مهم : به منظور رعایت استاندارد های روز نباید از خصوصیات داخلی استفاده کنید . به این منظور از css  استفاده کنید .

در آموزش css  بیشتر در این زمینه آشنا خواهید شد .

توجه : با استفاده از خصوصیت border  تمامی جدول از جمله سطون ها و سطر ها  و کل جدول را در بر خواهد گرفت .

 

تبدیل لبه ها 2 خطی به یک خطی :

در مثال زیر با استفاده از کد های css  لبه های 2 خطی را به 1 خطی تبدیل خواهیم کرد :

 

 

<!DOCTYPE html>

<html>

<head>

<style>

table,th,td

{

border:1px solid black;

border-collapse:collapse;

}

</style>

</head>

<body>

<table style="width:300px">

<tr>

  <td>Jill</td>

  <td>Smith</td>                    

  <td>50</td>

</tr>

<tr>

  <td>Eve</td>

  <td>Jackson</td>                 

  <td>94</td>

</tr>

<tr>

  <td>John</td>

  <td>Doe</td>                      

  <td>80</td>

</tr>

</table>

</body>

</html>

           

 

مثال بالا در مرورگر بصورت زیر به نمایش در خواهد آمد :

 

 

 

Jill

Smith

50

Eve

Jackson

94

John

Doe

80

 

 

 

تنظیم فاصله محتوای جداول از لبه ی جدول :

جهت تنظیم فاصله محتوای درون تگ با لبه ی یا بردر از خصوصیت padding  استفاده میکنیم .

 

با مثال زیر بهتر با این موضوع آشنا خواهید شد :

 

 

 

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td

{

border-collapse:collapse;

border:1px solid black;

}

th, td

{

padding:15px;

}

</style>

</head>

<body>

<table style="width:300px">

<tr>

  <td>Jill</td>

  <td>Smith</td>                    

  <td>50</td>

</tr>

<tr>

  <td>Eve</td>

  <td>Jackson</td>                 

  <td>94</td>

</tr>

<tr>

  <td>John</td>

  <td>Doe</td>                      

  <td>80</td>

</tr>

</table>

<p>Try to change the padding to 5px.</p>

</body>

</html>

 

 

 

مثال بالا  در مرورگر بصورت زیر به نمایش در خواهد آمد :

 

 

 

Jill

Smith

50

Eve

Jackson

94

John

Doe

80

 

 

 

اگر از این خصوصیت استفاده نکنید فاصله ی محتوا تا لبه صفر پیکسل در نظر گرفته خواهد شد .

 

تنظیم فاصله سلول ها از  یکدیگر در جداول :

با استفاده از خصوصیت  border-spacing  فاصله سلول های موجود در جداول را تعیین میکنیم .

 

مثال :

 

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td

{

border:1px solid black;

padding:5px;

}

table

{

border-spacing:15px;

}

</style>

</head>

<body>

<table style="width:300px">

<tr>

  <td>Jill</td>

  <td>Smith</td>                    

  <td>50</td>

</tr>

<tr>

  <td>Eve</td>

  <td>Jackson</td>                 

  <td>94</td>

</tr>

<tr>

  <td>John</td>

  <td>Doe</td>                      

  <td>80</td>

</tr>

</table>

<p>Try to change the spacing to 5px.</p>

</body>

</html>

 

 

 

مثال بالا در مرورگر بصورت زیر نمایش داده خواهد شد :

 

 

 

Jill

Smith

50

Eve

Jackson

94

John

Doe

80

Try to change the spacing to 5px.

         

 

 

عناوین جداول در HTML  :

در جداول عناوین با تگ  TH  مشخص خواهند شد . <th></th>

در اکثر مرورگر ها محتوای موجود در تگ th  بصورت بلد bold  و وسط چین نمایش داده می شوند .

 

مثال :

 

 

<!DOCTYPE html>

<html>

<head>

<style>

table,th,td

{

border:1px solid black;

border-collapse:collapse;

}

th,td

{

padding:5px;

}

</style>

</head>

<body>

 

<table style="width:300px">

<tr>

  <th>Firstname</th>

  <th>Lastname</th>              

  <th>Points</th>

</tr>

<tr>

  <td>Jill</td>

  <td>Smith</td>                    

  <td>50</td>

</tr>

<tr>

  <td>Eve</td>

  <td>Jackson</td>                 

  <td>94</td>

</tr>

<tr>

  <td>John</td>

  <td>Doe</td>                      

  <td>80</td>

</tr>

</table>

</body>

</html>

           

 

مثال بالا در مرورگر بصورت زیر نمایش داده می شود :

 

 

 

Firstname

Lastname

Points

Jill

Smith

50

Eve

Jackson

94

John

Doe

80

 

 

خصوصیت  text-align  :

با استفاده از خصوصیت text-align  میتوانیم سرتیتر ها و تمامی محتوا و عناصر html  را راست چین , چپ چین و یا وسط چین کرد .

با مثال زیر بیشتر با خصوصیت text-align  آشنا خواهید شد :

 

<!DOCTYPE html>

<html>

<head>

<style>

table,th,td

{

border:1px solid black;

border-collapse:collapse;

}

th,td

{

padding:5px;

}

th

{

text-align:left;

}

</style>

</head>

<body>

<table style="width:300px">

<tr>

  <th>Firstname</th>

  <th>Lastname</th>              

  <th>Points</th>

</tr>

<tr>

  <td>Jill</td>

  <td>Smith</td>                    

  <td>50</td>

</tr>

<tr>

  <td>Eve</td>

  <td>Jackson</td>                 

  <td>94</td>

</tr>

<tr>

  <td>John</td>

  <td>Doe</td>                      

  <td>80</td>

</tr>

</table>

</body>

</html>

 

 

مثال بالا در مرورگر بصورت زیر برایمان نمایش داده خواهد شد :

 

 

 

Firstname

Lastname

Points

Jill

Smith

50

Eve

Jackson

94

John

Doe

80

           

 

همانطور که مشاهده میکنید عناوین در این جدول بصورت چپ چین نمایش داده شده اند .

مهمترین خصوصیات به منظور ساخت جداول را در بخش بالا شرح دادیم اما در جداول تگ های دیگری نیز وجود دارند که در ادامه ی این آموزش در مورد آنها برایتان توضیح خواهیم داد .

تگ caption  : به منظور تعریف تیتر اصلی برای جداول به کار برده می شو د .

تگ <colgroup> : به منظور فرمت دهی یک یا تعدادی از سلول ها مورد استفاده قرار میگیرد .

تگ <thead> : عناوین ستون های یک جدول را گروه بندی میکنند . (header (

تگ <tbody > : محتویات بدنه ی جداول را گروه بندی میکنند .

تگ <tfooter> : محتویات انتهای ستونهای جداول را گروه بندی میکنند . (footer)

در آموزش بعدی شما را با عنصر div  آشنا خواهیم ساخت . با ما همراه باشید

درس بعدی : آموزش HTML  - عنصر div

ارسال نظر

عنوان نظر :
نام شما :
ایمیل :