location_on تهران ، خیابان آزادی خیابان شهیدان (روبروی مترو حبیب اله ) برج زیتون local_phone 66073800 021
بازگشت به لیست مقالات » | ﺳﻪشنبه 25 آبان 1395 در ساعت 17 : 14 دقیقه | نظرات کاربران ( 0 )

آموزش 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

ارسال نظر

عنوان نظر :
نام شما :
ایمیل :
آموزش HTML  - کاراکترهای رزرو شده

آموزش HTML - کاراکترهای رزرو شده

آموزش HTML  - کاراکترهای رزرو شده یکسری از کارکتر ها و علائم در html  وجود دارند که به تنهایی نمیتوانند در داخل صفحات  html قرار گیرند و ممکن است حتی در کیبرد کامپیوتر ها وجود نداشته ب ...

آموزش html  -  جاوا اسکریپت

آموزش html - جاوا اسکریپت

آموزش html  -  جاوا اسکریپت تگ script  در html  : این تگ به منظور برنامه نویسی سمت کاربر مانند جاوا اسکریپت  javascript  مورد استفاده قرار میگیرد . عنصر <script > ...

آموزش html  تگ head

آموزش html تگ head

 آموزش html  تگ head عنصر head  یکی از مهمترین تگ های html  می باشد که تگ های اساسی و اصلی سایت را در خود جای میدهد . عناصری که درون تگ head  قرار میگیرند میتوانند شامل اسکری ...

آموزش HTML  - اعلان Doctype

آموزش HTML - اعلان Doctype

آموزش HTML  - اعلان Doctype یکسری از اعلان ها در html  می باشند که کمک میکنند مرورگر بهتر و سریعتر نوع صفحات را تشخیص دهد . اعلان <!doctype> یکی از آنها می باشد که در ابتدای سند های h ...

آموزش html  - مروری بر html مقدماتی

آموزش html - مروری بر html مقدماتی

    آموزش HTML  - خلاصه ای از مراحل مقدماتی با همراهی شما تا این بخش آموزش HTML  را بصورت مقدماتی پشت سر گذاشتیم . از این پس آموزش های حرفه ای و پیشرفته ی HTML  را شروع خوا ...

آموزش html – نام رنگ ها

آموزش html – نام رنگ ها

آموزش html – نام رنگ ها تمامی مرورگر ها از نام رنگ ها بصورت کامل پشتیبانی میکنند . با استفاده از رنگ ها در html میتوان رنگ عناصر و یا پس زمینه عناصر html  را تغییر داد .در بخش زیر نام 147 ...

آموزش html - رنگها

آموزش html - رنگها

آموزش html  - رنگها : رنگها  یکی از مهمترین بخش در طراحی سایت می باشند .در طراحی سایت از رنگ ها به 3 طریق استفاده خواهد شد . 1.  از طریق نام رنگ : این روش از انتخاب رنگ بسیار محدود بو ...

آموزش HTML  - تگ iframe

آموزش HTML - تگ iframe

آموزش HTML  - تگ iframe در این آموزش و با استفاده از تگ iframe روش نمایش یک صفحه وب درون صفحه ی دیگر وب را قرار خواهیم داد . با ما همراه باشید . همانطور که از نام تگ iframe  که به معنای قا ...

آموزش HTML فرم ها

آموزش HTML فرم ها

آموزش HTML  فرم ها یکی از عناصر مهم در HTML  فرم ها می باند . فرم ها مسثول نگهداری اطلاعات از جانب کاربران می  باشد .به کمک فرم ها میتوان دریافت و ارسال اطلاعات را به سمت سرور انجام د ...

آموزش HTML  - صفحه بندی

آموزش HTML - صفحه بندی

آموزش HTML  - صفحه بندی یکی از مهم ترین بخش های طراحی سایت نحوه ی صفحه بندی و چیدمان المان ها و عناصر HTML  می باشد . چیدمان سایت ها تقریبا مشابه چیدمان مجلات و روزنامه ها حاوی ستون ها و س ...

آموزش HTML  - تگ SPAN

آموزش HTML - تگ SPAN

آموزش HTML  - تگ SPAN تگ span  یکی از عناصر inline level  و درون خطی می باشد که در مقالات قبلی در مورد آن شرح دادیم . تفاوت تگ های inline level  و block level   یک عنصر inli ...

آموزش html  - تگ DIV

آموزش html - تگ DIV

آموزش html  - تگ DIV عنصر های HTML  را از طریق تگ های DIV  و یا SPAN  گروهبندی می شوند . تگ  div  یک عنصر بلاک لول است  .( Block level ) به این معنی که درصورتی که ...

expand_less