آموزش کار با جداول یا Tables در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با جداول یا Tables در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
- 1 کار با جداول یا Tables در HTML
- 2 جداول یا Tables در HTML
- 3 تگ Th جدول در HTML
- 4 تگ caption در جدول ها
- 5 تگ thead در جدول ها
- 6 تگ tbody در جدول ها
- 7 تگ tfoot در جدول ها
- 8 ویژگی border در جدول ها
- 9 ویژگی border-collapse در جدول ها
- 10 ویژگی padding در جدول ها
- 11 ویژگی text-align در جدول ها
- 12 ویژگی border-spacing در جدول ها
- 13 صفت colspan در جدول ها
- 14 صفت rowspan در جدول ها
کار با جداول یا Tables در HTML
جدول یا جداول یا به انگلیسی 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 بصورت زیر می باشد :
|
1 2 3 4 5 |
<table> <tr> <td>Free-Learn</td> </tr> </table> |
تگ table بدنه اصلی و وجودی جدول رو ایجاد میکند و با استفاده از تگ tr سطر رو ایجاد میکنیم سپس با استفاده از تگ td میایم و یک سلول یا خانه ایجاد میکنیم و در نهایت هم تگ td را میبندیم و هم تگ tr که سطرمون هست.
حال لطفا به مثال زیر توجه نمایید :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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 ظاهر جدول مون رو کمی جذاب تر کنیم.
Free-Learn
جداول یا Tables در HTML
خب دوستان من در ادامه میخوام شمارو با یکسری تگ و ویژگی سی اس اس که میتوان بروی جدول ها اعمال کرد آشنا کنم، لطفا در ادامه با من همراه باشید.
- th – برای تعیین عنوان ستون های جدول
- Caption – برای تعیین عنوان یا کپشِن جدول
- Thead – برای تعیین هدر یا سربرگ جدول
- Tbody – برای تعیین بدنه اصلی جدول
- Tfoot – برای تعیین فوتر یا پابرگ جدول
- Css Border – ایجاد خط به دور جدول و سلول ها
- Css Border-Collapse – تک خطی کردن خط دور جدول
- Css Padding – ایجاد فاصله بین محتویات جدول
- Css Text-align – تعیین محل قرار گیری محتوای جدول
- Css Border-Spacing – ایجاد فاصله بین سلول های جدول
- ColSpan – برای ادغام ستون ها
- RowSpan – برای ادغام سطرها
Free-Learn
تگ Th جدول در HTML
تگ <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> |
Free-Learn
تگ caption در جدول ها
با استفاده از تگ caption میتونیم یک کپشن – عنوان را برای جدول مان مشخص نماییم، که البته باید توجه داشته باشید تگ caption حتما بلافاصله بعد از تگ table قرار بگیرد.
|
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> |
Free-Learn
تگ thead در جدول ها
ما در HTML با استفاده از تگ thead میتوانیم یک هدر بصورت ثابت در جدول مان ایجاد نماییم، میگم ثابت چونکه هرچیزی که درون این تگ قرار بگیره بصورت ثابت در بالاترین قسمت جدول قرار میگیرد.
یعنی شما اگر ۱۰۰ تا تگ tr و td هم بزارید بالای تگ thead ، در خروجی بازم اطلاعات تگ thead در ابتدا و بالاترین قسمت جدول قرار میگیرد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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> |
Free-Learn
تگ tbody در جدول ها
ما با استفاده از تگ tbody در جدول ها در HTML میتونیم بدنه ی اصلی جدول مان را مشخص نماییم، یعنی در واقع هر چیزی که درون این تگ قرار بگیرد به عنوان بدنه اصلی جدول در نظر گرفته می شود.
این تگ هم همانند تگ thead مکان ثابتی خواهد داشت، یعنی شما کافیه بیاید و اطلاعات اصلیتون رو درون این تگ قرار بدهید، در نتیجه اگر ما بیایم و تگ thead رو بزاریم بالاتر از تگ tbody بازم در خروجی هیچ فرقی نمیکنه چون همیشه جای تگ thead در ابتدای جدول ثابت هست و بعد از اون تگ tbody قرار میگیره.
دوستان محترم برای اینکه شما بهتر با این تگ و اینکه میگم جاشون ثابت هست آشنا بشید لطفا به مثال زیر توجه نمایید، در مثال زیر من اومدم و تگ thead رو گذاشتم زیر تگ tbody ، وقتی ما میگیم جاشون ثابت هست پس باید در خروجی اول تگ thead قرار بگیرد و سپس تگ tbody .
لطفا برای مشاهده خروجی دستورات زیر بصورت آنلاین بروی دکمه (امتحان کنید) کلیک نمایید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<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> |
Free-Learn
تگ tfoot در جدول ها
این تگ هم که از اسمش مشخصه، این تگ میاد و فوتر یا پایینی ترین بخش یک جدول را ایجاد/مشخص میکند، پس در HTML برای ایجاد یک فوتر برای جدول باید از تگ tfoot استفاده نماییم.
دوستان محترم ، این تگ هم همانند thead و tbody مکانش ثابت هست، یعنی اگر شما از سه تگ thead,tbody,tfoot در یک جدول استفاده نمایید، در خروجی همیشه اول تگ thead نمایش داده می شود سپس تگ tbody و در نهایت تگ tfoot .
سوال : اگه من در حالت نوشتاری بیام و تگ thead رو بزارم بعد از تگ tbody آیا در خروجی مشکلی ایجاد می شود؟ آیا در خروجی بازم تگ thead در ابتدای جدول نمایش داده می شود؟
پاسخ : هیچ فرقی نمیکنه که شما در حالت نوشتاری (یعنی در حالت کدنویسی جدول) تگ های thead یا tbody و یا tfoot رو کجا میزارید، چون در هر صورت در خروجی در ابتدا تگ thead و سپس tbody و در نهایت tfoot قرار میگیرد.
حال لطفا به مثال زیر توجه نمایید : (در مثال زیر از سه تگ thead,tbody,tfoot استفاده شده است و مکان آنها نیز نامرتب می باشد)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<table> <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> </tr> </tbody> <thead> <tr> <th>نام محصول</th> <th>تعداد</th> </tr> </thead> </table> |
خب همانطور که مشاهده مینمایید در مثال بالا من از ۳ تگ thead و tbody و tfoot استفاده کردم و همچنین مکان قرار گیریشون رو بصورت نامرتب قرار دادم، حال لطفا خروجی را مشاهده نمایید.
Free-Learn
ویژگی border در جدول ها
با استفاده از ویژگی border ما میتونیم یک خط را به دور لبه های جدول مان بکشیم.
|
1 2 3 4 5 6 7 |
<style> table,td { border:2px solid blue; } </style> |
Free-Learn
ویژگی border-collapse در جدول ها
اگر در مثال قبلی به جدول مان توجه کرده باشید میبینید که ۱ خط به دور خوده جدول و ۱ خط هم به دور لبه های خانه های جدول کشیده شده است، برای اینکه فقط ۱ خط به دور لبه های هم جدول و هم خانه ها داشته باشیم باید از ویژگی border-collapse استفاده نماییم.
|
1 2 3 4 5 6 7 8 |
<style> table,td { border:2px solid blue; border-collapse: collapse; } </style> |
Free-Learn
ویژگی padding در جدول ها
با استفاده از ویژگی padding میتونیم یک فضای مشخصی را بین محتویات و سلول ها ایجاد نماییم.
|
1 2 3 4 5 6 7 |
<style> td { padding:10px; } </style> |
Free-Learn
ویژگی text-align در جدول ها
با استفاده از ویژگی text-align میتونیم تراز یا محل قرار گیری محتویات سلول های جدول را مشخص نماییم.
|
1 2 3 4 5 6 7 |
<style> td { text-align:center; } </style> |
Free-Learn
ویژگی border-spacing در جدول ها
با استفاده از ویژگی border-spacing میتونیم یک فاصله ی مشخصی را بین سلول های یک جدول تنظیم نماییم.
توجه داشته باشید که اگر از ویژگی border-collapse استفاده کرده باشید، ویژگی border-spacing عمل نخواهد کرد.
|
1 2 3 4 5 6 7 |
<style> table { border-spacing: 5px; } </style> |
Free-Learn
صفت colspan در جدول ها
ما با استفاده از صفت 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> |
Free-Learn
صفت rowspan در جدول ها
با استفاده از صفت 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> |
Free-Learn
مثال های بیشتر از جدول ها در HTML
مثال شماره ۱ :
|
1 2 3 |
<table> برای مشاهده دستورات لطفا بروی دکمه ی امتحان کنید کلیک نمایید </table> |
خب دوستان به پایان بخش آموزش کار با جداول یا Tables در HTML رسیدیم – امیدوارم که مشکلی در این بخش نداشته باشید و لطفا اگه مشکلی هست از اینجا مشکل تان را برای بنده ارسال نمایید تا بتونم پاسخ بدم.
