این آموزش در تاریخ ۱۴۰۲/۰۶/۱۹ آپدیت شده است.
آموزش کار با جداول یا Tables در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با جداول یا Tables در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
- 1 کار با جداول یا Tables در HTML
- 2 جداول یا Tables در HTML
- 3 تگ Th جدول در HTML
- 4 تگ های thead و tbody و tfoot در جدول ها
- 5 ویژگی border در جدول ها
- 6 ویژگی border-collapse در جدول ها
- 7 ویژگی padding در جدول ها
- 8 ویژگی text-align در جدول ها
- 9 ویژگی border-spacing در جدول ها
- 10 صفت colspan در جدول ها
- 11 صفت rowspan در جدول ها
کار با جداول یا Tables در HTML
جدول یا به انگلیسی Table به مجموعه از اطلاعات که بصورت سطر و ستونی در کنار همدیگر قرار گرفته شده اند گفته می شود ، جدول ها یکی از بهترین روش ها برای ارائه و درک سریع و بالا از اطلاعات می باشد.
ما در زبان HTML و بطور کلی در یک صفحه ی وب میتوانیم به راحتی از جدول ها استفاده نماییم و آنها را ایجاد نماییم، برای مثال لطفا به جدول زیر توجه نمایید.
| نام | فامیلی | امتیاز |
|---|---|---|
| صادق | اسدی | ۸۴ |
| مهدی | اکبری | ۷۸ |
| مینا | محسنی | ۶۹ |
| نسیم | دانشی | ۶۵ |
در 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> |
حالا اگه بروی دکمه (امتحان کنید) کلیک نمایید ، میبینید که در خروجی یک جدول ایجاد شده ( البته هیچ استایل خاصی نداره مثلا خط کشی شده نیست یا مثلا رنگ بندی نداره و.. که ان شاالله کمی جلوتر استایل هم بهش میدیم )
Free-Learn
جداول یا Tables در HTML
خب دوستان من در ادامه میخوام شمارو با یکسری تگ و ویژگی سی اس اس که میتوان بروی جدول ها اعمال کرد آشنا کنم، لطفا در ادامه با من همراه باشید.
- th – برای تعیین عنوان ستون های جدول
- 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 11 12 13 14 15 16 17 18 19 20 21 |
<table> <tr> <th>نام</th> <th>فامیلی</th> </tr> <tr> <td>صادق</td> <td>اسدی</td> </tr> <tr> <td>مهرداد</td> <td>شاهینی</td> </tr> <tr> <td>مبینا</td> <td>صالحی</td> </tr> </table> |
Free-Learn
تگ های thead و tbody و tfoot در جدول ها
ما در HTML با استفاده از تگ های thead و tbody و tfoot میتونیم هدر و بدنه و فوتر برای جدول مان بصورت ثابت ایجاد نماییم، میگم ثابت چونکه هر قسمت بصورت ثابت در جدول قرار میگیرند، مثلا thead بصورت ثابت در بالای جدول قرار میگیره یا مثلا tfoot بصورت ثابت در پایین جدول قرار میگیرد.
یعنی شما اگر ۱۰۰ تا تگ tr و td هم بزارید بالای تگ thead ، در خروجی بازم اطلاعات تگ thead در ابتدا و بالاترین قسمت جدول قرار میگیرد و برای 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 33 |
<table> <thead> <tr> <th>نام</th> <th>فامیلی</th> </tr> </thead> <tbody> <tr> <td>صادق</td> <td>اسدی</td> </tr> <tr> <td>مهرداد</td> <td>شاهینی</td> </tr> <tr> <td>مبینا</td> <td>صالحی</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">سایت آموزشی فری لرن</td> </tr> </tfoot> </table> |
Free-Learn
ویژگی border در جدول ها
خب در ادامه ی آموزش کار با جداول یا Tables در HTML میخوایم با جریان حاشیه ها یا Border آشنا شویم.
همونطور که در مثال های قبلی هم دیدید با استفاده از ویژگی border که متعلق به زبان CSS می باشد، یک خط به دور لبه های جدول و لبه های سلول ها کشیدیم.
|
1 2 3 4 5 6 7 |
<style> table,td { border:2px solid black; } </style> |
Free-Learn
ویژگی border-collapse در جدول ها
در حالت عادی ۱ خط به دور خوده جدول و ۱ خط هم به دور لبه های هر یک از سلول های جدول کشیده میشه، برای اینکه فقط ۱ خط به دور لبه های هم جدول و هم سلول ها داشته باشیم باید از ویژگی border-collapse استفاده نماییم.
|
1 2 3 4 5 6 7 |
<style> table{ border-collapse:collapse; } </style> |
Free-Learn
ویژگی padding در جدول ها
با استفاده از ویژگی padding میتونیم یک فضای مشخصی رو بین محتویات داخل هریک از سلول ها ایجاد نماییم.
|
1 2 3 4 5 6 7 |
<style> td{ padding:5px; } </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 12 13 14 15 |
<table> <tr> <th>نام</th> <th>فامیلی</th> </tr> <tr> <td>صادق</td> <td>اسدی</td> </tr> <tr> <td colspan="2">سایت آموزشی فری لرن</td> </tr> </table> |
Free-Learn
صفت rowspan در جدول ها
با استفاده از صفت rowspan میتونیم سطرهای جدول رو باهمدیگه ادغام کنیم.
|
1 2 3 4 5 6 7 8 9 10 11 |
<table> <tr> <td rowspan="2">A</td> <td>B</td> <td>C</td> </tr> <tr> <td>D</td> <td>E</td> </tr> </table> |
Free-Learn
مثال های بیشتر از جدول ها در HTML
مثال شماره ۱ : استایل دهی سطرهای زوج ( با استفاده از CSS گفتیم رنگ زمینه سطرهای زوج متفاوت باشه )
|
1 2 3 |
<table> برای مشاهده دستورات لطفا بروی دکمه ی امتحان کنید کلیک نمایید </table> |
