ایجاد جدول در Html
ایجاد جدول در Html | تگ جدول در Html | طراحی جدول در Html | کد جدول در Html | کشیدن جدول در Html | ساختن جدول در Html | تگ Tr در Html | آموزش html
آرشیو برنامه نویسی صفر تا صد html آموزش css آموزش JavaScript آموزش Bootstrap
ایجاد جدول در Html
توی این آموزش میخواییم آموزش کامل ساخت جدول در html رو بتون آموزش بدیم :
تک های <tr> و <td> رو بتون معرفی میکنیم و تفوت بین دو تگ رو بتون میگیم.
بهتون میگیم چجور برای جدول عنوان وارد کنید .
و سبک های مختلف ایجاد جدول رو بهتون اموزش میدیم.
با دتام همراه باشید.
آموزش html
ایجاد جدول در Html
ابتدا با یک مثال کلی شروع میکنیم.
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}td, th {
border: 1px solid #ff4444;
text-align: left;
padding: 8px;
}tr:nth-child(even) {
background-color: #ff0000;
}
</style>
</head>
<body><table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table></body>
</html>
طرز نمایش کد بالا در مرورگر به شکل زیر میباشد :
ایجاد جدول در Html
آموزش html
تعریف یک جدول HTML
- جدول HTML با برچسب <table> تعریف شده است.
- هر سطر جدول با برچسب <tr> تعریف شده است.
- هدر جدول با برچسب <th> تعریف شده است.
- به طور پیشفرض، عنوانهای جدول جسورانه و مرکزی هستند.
- داده جدول / سلول با برچسب <td> تعریف شده است.
ساختن جداول در HTML ابتدا به نظر پیچیده می شود، اما اگر شما با دقت تماشا کنید، در واقع کاملا منطقی است – درست مثل هر چیز دیگری در HTML.
آموزش html
تفاوت بین <tr> و <td> چیست؟
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
یدونه مثال ساده بزنیم و باهم بررسی کنیم ( تجزیه و تحلیل جدول )
همانطور که از مثال فوق خواهید دید، این احتمالا پیچیده ترین مثال HTML است که تا به حال به شما داده اید. بیایید آن را بشکنیم و تگ های مختلف را توضیح دهیم:
3 عناصر مختلف برای قرار دادن جداول استفاده می شود:
تگ باز <table> و تگ بسته </ table> شروع و پایان می یابد. منطقی
<tr> برای “ردیف جدول” نامیده می شود و ردیف های افقی را شروع می کند و به پایان می رسد. هنوز منطقی است
<td> برای “داده جدول” کوتاه است. این برچسب شروع و پایان هر سلول در ردیف جدول شما. همه ساده و منطقی.
در اینجا چیزی است که در مثال بالا اتفاق می افتد: جدول با یک <table> شروع می شود، و به دنبال آن یک <tr> است، که نشان دهنده شروع یک ردیف جدید است. دو سلول در این ردیف قرار دارد: <td> سلول 1 </ td> و <td> سلول 2 </ td>. ردیف بعدا بسته شده با یک </ tr> و یک ردیف جدید <tr> بلافاصله بعد از آن شروع می شود. ردیف جدید همچنین حاوی دو سلول است. جدول با </ table> بسته است.
فقط برای روشن شدن: سطرها خطوط افقی سلول ها هستند و ستون ها خطوط عمودی سلول هستند
- توجه: عناصر <td> ظروف داده شده از جدول هستند.
آنها می توانند تمام انواع عناصر HTML را داشته باشند متن، تصاویر، لیست ها، جداول دیگر، و غیره
آموزش html
ایجاد جدول در HTML – اضافه کردن یک مرز
اگر مرز برای جدول مشخص نکنید، بدون مرز نمایش داده خواهد شد.
مرز با استفاده از خصوصیت مرجع CSS تنظیم می شود:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body><table style=”width:100%”>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</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>
طرز نمایش در مرورگر به شکل زیر میباشد :
ایجاد جدول در Html
- به یاد داشته باشید مرزها را برای هر دو جدول و سلول های جدول تعریف کنید.
آموزش html
ایجاد جدول در HTML – فرو ریختن مرز ها به یک مرز
اگر می خواهید مرزها به یک مرز سقوط کنند، ویژگی CSS border-collapse را اضافه کنید:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body><table style=”width:100%”>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</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>
طرز نمایش در مرورگر به شکل زیر میباشد :
ایجاد جدول در Html
آموزش html
ایجاد جدول در HTML – اضافه کردن لایه بندی سلول
پلاگین سلولی فضای بین محتوای سلول و مرزهای آن را مشخص می کند.
اگر شما polding را مشخص نکنید، سلولهای جدول نمایش داده می شوند بدون پدینگ.
برای تنظیم padding، از ویژگی property padding CSS استفاده کنید:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 10px solid black;
border-collapse: collapse;
}
th, td {
padding: 30px;
}
</style>
</head>
<body><table style=”width:100%”>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</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><p>Try to change the padding to 5px.</p>
</body>
</html>
طرز نمایش در مرورگر :
ایجاد جدول در Html
آموزش html
ایجاد جدول در HTML – عنوان چپ چپ
به طور پیشفرض، عنوانهای جدول مرکزی هستند.
برای چسباندن عنوانهای جدول به سمت چپ، از ویژگی CSS text-align استفاده کنید:
ایجاد جدول در Html
آموزش html
ایجاد جدول در HTML – اضافه کردن فاصله بین المللی
فاصله بین فضای بین سلول ها را مشخص می کند.
برای تنظیم فاصله مرز برای یک جدول، از ویژگی CSS 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:100%”>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</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><p>Try to change the border-spacing to 5px.</p>
</body>
</html>
طرز نمایش در مرورگر :
ایجاد جدول در Html
- نکته: اگر مرزهای جدول فروپاشیده شده است، فاصله مرزی تاثیری ندارد.
آموزش html
ایجاد جدول در HTML – سلول هایی که تعداد زیادی ستون را می بینند
برای ایجاد فاصله سلولی بیش از یک ستون، از ویژگی colspan استفاده کنید:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body><h2>Cell that spans two columns:</h2>
<table style=”width:100%”>
<tr>
<th>Name</th>
<th colspan=”2″>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table></body>
</html>
طرز نمایش در مرورگر :
ایجاد جدول در Html
آموزش html
ایجاد جدول در HTML – سلول هایی که تعداد زیادی ردیف دارند
برای ایجاد فاصله سلولی بیش از یک ردیف، از ویژگی rowspan استفاده کنید:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body><h2>Cell that spans two rows:</h2>
<table style=”width:100%”>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan=”2″>Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table></body>
</html>
طرز نمایش در مرورگر :
ایجاد جدول در Html
آموزش پیشرفته CCNA
آموزش html
ایجاد جدول در HTML – اضافه کردن عنوان
برای اضافه کردن عنوان به یک جدول، از تگ <caption> استفاده کنید:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body><table style=”width:100%”>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table></body>
</html>
طرز نمایش در مرورگر :
ایجاد جدول در Html
- توجه: برچسب <caption> باید بلافاصله بعد از برچسب <table> وارد شود.
آموزش html
یک سبک ویژه برای یک جدول
برای تعریف یک سبک خاص برای یک جدول خاص، یک ویژگی id را به جدول اضافه کنید:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
table#t01 {
width: 100%;
background-color: #f1f1f1;
}
</style>
</head>
<body><table style=”width:100%”>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</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>
<br><table id=”t01″>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</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>
طرز نمایش در مرورگر :
ایجاد جدول در Html
یک مثال دیگر :
<!DOCTYPE html>
<html>
<head>
<style>
table {
width:100%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color:#fff;
}
table#t01 th {
background-color: black;
color: white;
}
</style>
</head>
<body><table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</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>
<br><table id=”t01″>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</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>
طرز نمایش در مرورگر :
ایجاد جدول در html
آموزش پیشرفته شبکه
منبع : www.w3schools.com
ترجمه توسط دتام
