HTML در Tablesآموزش کار با جداول یا

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 1

FreeLearn20181@gmail.comhttps://free-learn.ir/

HTML در Tablesکار با جداول یا

به مجموعه از اطالعات که بصورت سطر و ستونی در کنار همدیگر تنظیمTables یا جداول یا به انگلیسی جدولشده اند گفته می شود ، جدول ها یکی از بهترین روش های ارائه و درک سریع و باال از اطالعات می باشد.

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

Name Family WebSite

Sadegh Asadi Free-Learn

Sadegh Asadi Free-Learn

Sadegh Asadi Free-Learn

Sadegh Asadi Free-Learn

> باید از تگ HTML استفاده نماییم، برای ایجاد یک جدول در Tables ما نیز میتوانیم از جدول ها یا HTMLدر table> و برای ایجاد سطرهای جدول از تگ <tr> و در نهایت برای ایجاد خانه ها یا سلول های جدول از تگ <td>

استفاده کرد.

بصورت زیر می باشد :HTMLشکل کلی یک جدول در

HTML در Tablesآموزش کار با جداول یا

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 2

FreeLearn20181@gmail.comhttps://free-learn.ir/

1

2

3

4

5

>table<

>tr<

  >td<Free-Learn>/td<

>/tr<

>/table<

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

هست.

حال لطفا به مثال زیر توجه نمایید :

HTML در Tablesآموزش کار با جداول یا

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 3

FreeLearn20181@gmail.comhttps://free-learn.ir/

1

2

3

4

5

6

7

8

9

10

11

12

13

14

>body<

>table<

  >tr<

   >td<A>/td<

   >td<B>/td<

   >td<C>/td<

  >/tr<

  >tr<

   >td<D>/td<

   >td<E>/td<

   >td<F>/td<

  >/tr<

>/table<

>/body<

امتحان کنید

حال اگر لطف بفرمایید و بروی دکمه )امتحان کنید( کلیک نمایید در خروجی شما یک جدول را مشاهده خواهید کرد که البته در ظاهر ما جدولی خط کشی شده را نمی بینیم، ولی خب در واقع و در اصل وجود جدول ایجاد شده

ظاهر جدول مون رو کمی جذاب تر کنیم.CSSاست فقط کافیه در ادامه با استفاده از چند دستور

HTML در Tablesجداول یا

HTML در Tablesآموزش کار با جداول یا

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 4

FreeLearn20181@gmail.comhttps://free-learn.ir/

که میتوان بروی جدول ها اعمال کردسی اس اسخب دوستان من در ادامه میخوام شمارو با یکسری تگ و ویژگی آشنا کنم، لطفا در ادامه با من همراه باشید.

th – برای تعیین عنوان ستون های جدول Caption – برای تعیین عنوان یا کپِشن جدول Thead – برای تعیین هدر یا سربرگ جدول Tbody – برای تعیین بدنه اصلی جدول Tfoot – برای تعیین فوتر یا پابرگ جدول Css Border – ایجاد خط به دور جدول و سلول ها Css Border-Collapse – تک خطی کردن خط دور جدول Css Padding – ایجاد فاصله بین محتویات جدول Css Text-align – تعیین محل قرار گیری محتوای جدول Css Border-Spacing – ایجاد فاصله بین سلول های جدول ColSpan – برای ادغام ستون ها RowSpan – برای ادغام سطرها

HTML جدول در Thتگ

HTML در Tablesآموزش کار با جداول یا

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 5

FreeLearn20181@gmail.comhttps://free-learn.ir/

برای تنظیم عناوین ستون های یک جدول می باشد. لطفا به مثال زیر توجه نمایید و همچنین برای<th>تگ ( کلیک نمایید.امتحان کنیدمشاهده خروجی دستورات زیر بروی دکمه )

1

2

3

4

5

6

7

8

9

10

>table<

  >tr<

   >th<Name>/th<

   >th<Family>/th<

  >/tr<

  >tr<

   >td<Sadegh>/td<

   >td<Asadi>/td<

  >/tr<

>/table<

امتحان کنید

در جدول هاcaptionتگ

HTML در Tablesآموزش کار با جداول یا

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 6

FreeLearn20181@gmail.comhttps://free-learn.ir/

توجه میتونیم یک کپشن – عنوان را برای جدول مان مشخص نماییم، که البته باید captionبا استفاده از تگ قرار بگیرد.table حتما بالفاصله بعد از تگ caption تگ داشته باشید

1

2

3

4

5

6

7

8

9

10

11

>table<

>caption<Www.Free-Learn.IR>/caption<

  >tr<

   >td<A>/td<

   >td<B>/td<

  >/tr<

  >tr<

   >td<C>/td<

   >td<D>/td<

  >/tr<

>/table<

امتحان کنید

در جدول هاtheadتگ

HTML در Tablesآموزش کار با جداول یا

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 7

FreeLearn20181@gmail.comhttps://free-learn.ir/

میتوانیم یک هدر بصورت ثابت در جدول مان ایجاد نماییم، میگم ثابتthead با استفاده از تگ HTMLما در چونکه هرچیزی که درون این تگ قرار بگیره بصورت ثابت در باالترین قسمت جدول قرار میگیرد.

در ابتدا وthead ، در خروجی بازم اطالعات تگ theadتگ هم بزارید باالی td و tr تگ تا۱۰۰یعنی شما اگر باالترین قسمت جدول قرار میگیرد.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

>table<

  >thead<

     >tr<

       >th<Name>/th<

       >th<Family>/th<

     >/tr<

  >/thead<

    >tr<

       >td<Sadegh>/td<

       >td<Asadi>/td<

    >/tr<

    >tr<

       >td<Sadegh>/td<

       >td<Asadi>/td<

    >/tr<

>/table<

امتحان کنید

در جدول هاtbodyتگ

HTML در Tablesآموزش کار با جداول یا

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 8

FreeLearn20181@gmail.comhttps://free-learn.ir/

میتونیم بدنه ی اصلی جدول مان را مشخص نماییم، یعنی درHTML در جدول ها در tbodyما با استفاده از تگ واقع هر چیزی که درون این تگ قرار بگیرد به عنوان بدنه اصلی جدول در نظر گرفته می شود.

خواهد داشت، یعنی شما کافیه بیاید و اطالعات اصلیتون رو درون اینمکان ثابتی theadاین تگ هم همانند تگ بازم در خروجی هیچ فرقی نمیکنهtbodyتگ رو بزاریم باالتر از theadتگ قرار بدهید، در نتیجه اگر ما بیایم و تگ

قرار میگیره.tbody در ابتدای جدول ثابت هست و بعد از اون تگ theadچون همیشه جای تگ

دوستان محترم برای اینکه شما بهتر با این تگ و اینکه میگم جاشون ثابت هست آشنا بشید لطفا به مثال زیر توجه ، وقتی ما میگیم جاشون ثابت هست پسtbody رو گذاشتم زیر تگ theadنمایید، در مثال زیر من اومدم و تگ

.tbody قرار بگیرد و سپس تگ theadباید در خروجی اول تگ

( کلیک نمایید.امتحان کنیدلطفا برای مشاهده خروجی دستورات زیر بصورت آنالین بروی دکمه )

HTML در Tablesآموزش کار با جداول یا

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 9

FreeLearn20181@gmail.comhttps://free-learn.ir/

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

>table<

  >tbody<

    >tr<

      >td<Sadegh>/td<

      >td<Asadi>/td<

    >/tr<

    >tr<

      >td<Sadegh>/td<

      >td<Asadi>/td<

    >/tr<

  >/tbody<

  >thead<

    >tr<

      >th<Name>/th<

      >th<Family>/th<

    >/tr<

  >/thead<

>/table<

امتحان کنید

در جدول هاtfootتگ

HTML در Tablesآموزش کار با جداول یا

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 10

FreeLearn20181@gmail.comhttps://free-learn.ir/

این تگ هم که از اسمش مشخصه، این تگ میاد و فوتر یا پایینی ترین بخش یک جدول را ایجاد/مشخص میکند، استفاده نماییم.tfoot برای جدول باید از تگ فوتر برای ایجاد یک HTMLپس در

مکانش ثابت هست، یعنی اگر شما از سه تگtbody و theadدوستان محترم ، این تگ هم همانند thead,tbody,tfoot در یک جدول استفاده نمایید، در خروجی همیشه اول تگ theadنمایش داده می شود سپس

.tfoot و در نهایت تگ tbodyتگ

آیا در خروجی مشکلی ایجاد میtbody رو بزارم بعد از تگ thead : اگه من در حالت نوشتاری بیام و تگ سوال در ابتدای جدول نمایش داده می شود؟theadشود؟ آیا در خروجی بازم تگ

وtbody یا thead : هیچ فرقی نمیکنه که شما در حالت نوشتاری )یعنی در حالت کدنویسی جدول( تگ های پاسخ قرارtfoot و در نهایت tbody و سپس thead رو کجا میزارید، چون در هر صورت در خروجی در ابتدا تگ tfootیا

میگیرد.

استفاده شده است و مکان آنهاthead,tbody,tfootحال لطفا به مثال زیر توجه نمایید : )در مثال زیر از سه تگ نیز نامرتب می باشد)

1 >table<

HTML در Tablesآموزش کار با جداول یا

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 11

FreeLearn20181@gmail.comhttps://free-learn.ir/

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

 

>tfoot<

   >tr<

    >td< 3جمع کل محصوالت : >/td<

    >td< 16جمع کل تعداد : >/td<

   >/tr<

>/tfoot<

>tbody<

   >tr<

    >td<برنج>/td<

    >td<5>/td<

   >/tr<

   >tr<

    >td<روغن>/td<

    >td<8>/td<

   >/tr<

   >tr<

    >td<قند>/td<

    >td<3>/td<

HTML در Tablesآموزش کار با جداول یا

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 12

FreeLearn20181@gmail.comhttps://free-learn.ir/

22

23

24

25

26

27

28

29

30

31

32

   >/tr<

>/tbody<

  

>thead<

   >tr<

    >th<نام محصول>/th<

    >th<تعداد>/th<

   >/tr<

>/thead<

 

>/table<

امتحان کنید

استفاده کردم و همچنینtfoot و tbody و thead تگ ۳خب همانطور که مشاهده مینمایید در مثال باال من از مکان قرار گیریشون رو بصورت نامرتب قرار دادم، حال لطفا خروجی را مشاهده نمایید.

در جدول هاborderویژگی

HTML در Tablesآموزش کار با جداول یا

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 13

FreeLearn20181@gmail.comhttps://free-learn.ir/

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

1

2

3

4

5

>style<

table,td {

   border:2px solid blue;

}

>/style<

امتحان کنید

در جدول هاborder-collapseویژگی

خط هم به دور لبه های۱ خط به دور خوده جدول و ۱اگر در مثال قبلی به جدول مان توجه کرده باشید میبینید که هم جدول و هم خانه ها داشته باشیم خط به دور لبه های۱فقط خانه های جدول کشیده شده است، برای اینکه

استفاده نماییم.border-collapseباید از ویژگی

1

2

3

4

5

6

>style<

table,td {

  border:2px solid blue;

  border-collapse: collapse;

}

>/style<

امتحان کنید

در جدول هاpaddingویژگی

HTML در Tablesآموزش کار با جداول یا

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 14

FreeLearn20181@gmail.comhttps://free-learn.ir/

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

1

2

3

4

5

>style<

td {

  padding:10px;

}

>/style<

امتحان کنید

در جدول هاtext-alignویژگی

محتویات سلول های جدول را مشخص نماییم.محل قرار گیری میتونیم تراز یا text-alignبا استفاده از ویژگی

1

2

3

4

5

>style<

td {

  text-align:center;

}

>/style<

امتحان کنید

در جدول هاborder-spacingویژگی

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

HTML در Tablesآموزش کار با جداول یا

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 15

FreeLearn20181@gmail.comhttps://free-learn.ir/

عمل نخواهدborder-spacing استفاده کرده باشید، ویژگی border-collapseتوجه داشته باشید که اگر از ویژگی کرد.

1

2

3

4

5

6

7

>style<

 

table {

  border-spacing: 5px;

}

 

>/style<

امتحان کنید

در جدول هاcolspanصفت

HTML در Tablesآموزش کار با جداول یا

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 16

FreeLearn20181@gmail.comhttps://free-learn.ir/

از جدول را به تعداد هرچند ستون که بخواهیم تنظیماندازه یک ستون میتونیم colspanما با استفاده از صفت نماییم، کلی بخوام بگم با استفاده از این صفت میتوان ستون های جدول را باهمدیگر ادغام کرد.

1

2

3

4

5

6

7

8

9

10

11

>table<

  >tr<

    >td colspan="2"<A>/td<

    >td<B>/td<

  >/tr<

  >tr<

    >td<C>/td<

    >td<D>/td<

    >td<E>/td<

  >/tr<

>/table<

امتحان کنید

در جدول هاrowspanصفت

HTML در Tablesآموزش کار با جداول یا

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 17

FreeLearn20181@gmail.comhttps://free-learn.ir/

از جدول را به تعداد هرچند سطر که بخواهیم تنظیماندازه یک سطر میتونیم rowspanبا استفاده از صفت نماییم، کلی بخوام بگم با استفاده از این صفت میتوان سطرهای جدول را باهمدیگر ادغام کرد.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

>table<

  >tr<

    >td rowspan="2"<A>/td<

    >td<B>/td<

    >td<C>/td<

    >td<D>/td<

    >td<E>/td<

  >/tr<

  >tr<

    >td<F>/td<

    >td<G>/td<

    >td<H>/td<

    >td<I>/td<

  >/tr<

>/table<

امتحان کنید

HTMLمثال های بیشتر از جدول ها در

HTML در Tablesآموزش کار با جداول یا

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 18

FreeLearn20181@gmail.comhttps://free-learn.ir/

: )یک جدول شیک)۱مثال شماره

1

2

3

>table<

برای مشاهده دستورات لطفا بروی دکمه ی امتحان کنید کلیک نمایید

>/table<

امتحان کنید