جمعه ۱۵ شهریور ۹۸ | ۱۱:۴۶ ۵۲۶ بازديد
جدول html :
جدول html با تگ <table> تعریف می شود.
ردیف های جداول در html با تگ <tr> تعریف شده اند.
هدر جداول با تگ <th> در html تعریف شده است.
به طور پیش فرض، عناوین جداول درشت و متمرکز هستند.
داده جدول سلول با تگ <td> در html تعریف شده است.جدول html :
جدول html با تگ <table> تعریف می شود.
ردیف های جداول در html با تگ <tr> تعریف شده اند.
هدر جداول با تگ <th> در html تعریف شده است.
به طور پیش فرض، عناوین جداول درشت و متمرکز هستند.
داده جدول / سلول با تگ <td> در html تعریف شده است.
<!DOCTYPE html>
<html>
<body>
<h2>Basic HTML Table</h2>
<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
border در html :
به طور پیش فرض border در جداول صفر است. و اگرborder برای جداول تعریف نکنید بدون حاشیه نمایش داده می شود.
border با استفاده از css تعریف می شود.به مثال زیر دقت کنید.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Bordered Table</h2>
<p>Use the CSS border property to add a border to the table.</p>
<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
بیشتر بخوانید : تگ h در html نقد و بررسی (h1 تا h6) – جلسه یازدهم (ویدیو)
Collapsed Borders (نمایش با یک خط) :
برای نمایش جداول با یک حاشیه از ویژگی Collapsed Borders استفاده می شود.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Collapsed Borders</h2>
<p>If you want the borders to collapse into one border, add the CSS border-collapse property.</p>
<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>
Collapsed Borders
Cell Padding (حاشیه درونی):
فضای بین محتوای سلول و حاشیه (border) را در اصطلاح pading می گویند.
pading در جداول به طور پیش فرض صفر هستند.
برای تنظیم padding،از css ها استفاده کنید.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<h2>Cellpadding</h2>
<p>Cell padding specifies the space between the cell content and its borders.</p>
<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>
Cell Padding
مکان قرارگیری عنوان ها به طور پیش فرض :
به طور پیش فرض، عناوین جدول درشت و متمرکز هستند.
برای انتقال عنوانهای جدول به سمت چپ،راست از ویژگی text-align در CSS استفاده کنید:
<!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>
<h2>Left-align Headings</h2>
<p>To left-align the table headings, use the CSS text-align property.</p>
<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
مشخصهborder spacing :
این ویژگی به سلول ها ی جدول از داخل یک حاشیه می دهد.به مثال زیر دقت کنید.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
padding: 5px;
}
table {
border-spacing: 15px;
}
</style>
</head>
<body>
<h2>Border Spacing</h2>
<p>Border spacing specifies the space between the cells.</p>
<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>
مشخصه colspan :
برای ترکیب چند ستون با هم و ایجاد یک ستون بزرگتر استفاده می شود.
<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>
<p>To make a cell span more than one column, use the colspan attribute.</p>
<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 – بررسی تگ p در اچ تی ام ال جلسه دوازدهم (ویدیو)
مشخصه 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>
<p>To make a cell span more than one row, use the rowspan attribute.</p>
<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>
تگ <caption> :
برای اضافه کردن یک عنوان به یک جدول، از تگ <caption> استفاده کنید:
برچسب <caption> باید بلافاصله بعد از برچسب <table> وارد شود.
<!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>Table Caption</h2>
<p>To add a caption to a table, use the caption tag.</p>
<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>
استایل دهی ویژه به جدول :
برای تعریف یک استایل خاص برای یک جدول ،به صورت زیر اقدام کنید:
۱.یک id برای جدول در نظر بگیرید.
۲.یک استایل خاص به Idاعمال کنید.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
text-align: left;
}
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
</style>
</head>
<body>
<h2>Styling Tables</h2>
<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>
خلاصه جلسه :
ازتگ <table> در html برای تعریف یک جدول استفاده کنید.
از تگ <tr> در htmlبرای تعیین یک ردیف جدولاستفاده کنید.
از تگ <td>در html برای تعریف یک جدول استفاده کنید.
از تگ <th> در <html> برای تعریف یک عنوان جدول استفاده کنید.
از تگ <caption> در html برای تعریف یک عنوان جدول استفاده کنید.
ازتگ border برای تعریف حاشیه استفاده کنید.
از تگ border-collapse برای ایجاد حاشیه از داخل استفاده کنید.
ازتگ border-spacing برای تنظیم فاصله بین سلولهااستفاده کنید.
از تگ colspan برای ترکیب چند سلول استفاده کنید.
ازتگ rowspan برای ترکیب چند ردیف استفاده کنید.
از تگ id برای استایل دهی به جدول استفاده کنید.
منبع : همراه آی سی تی
جدول html با تگ <table> تعریف می شود.
ردیف های جداول در html با تگ <tr> تعریف شده اند.
هدر جداول با تگ <th> در html تعریف شده است.
به طور پیش فرض، عناوین جداول درشت و متمرکز هستند.
داده جدول سلول با تگ <td> در html تعریف شده است.جدول html :
جدول html با تگ <table> تعریف می شود.
ردیف های جداول در html با تگ <tr> تعریف شده اند.
هدر جداول با تگ <th> در html تعریف شده است.
به طور پیش فرض، عناوین جداول درشت و متمرکز هستند.
داده جدول / سلول با تگ <td> در html تعریف شده است.
<!DOCTYPE html>
<html>
<body>
<h2>Basic HTML Table</h2>
<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
border در html :
به طور پیش فرض border در جداول صفر است. و اگرborder برای جداول تعریف نکنید بدون حاشیه نمایش داده می شود.
border با استفاده از css تعریف می شود.به مثال زیر دقت کنید.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Bordered Table</h2>
<p>Use the CSS border property to add a border to the table.</p>
<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
بیشتر بخوانید : تگ h در html نقد و بررسی (h1 تا h6) – جلسه یازدهم (ویدیو)
Collapsed Borders (نمایش با یک خط) :
برای نمایش جداول با یک حاشیه از ویژگی Collapsed Borders استفاده می شود.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Collapsed Borders</h2>
<p>If you want the borders to collapse into one border, add the CSS border-collapse property.</p>
<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>
Collapsed Borders
Cell Padding (حاشیه درونی):
فضای بین محتوای سلول و حاشیه (border) را در اصطلاح pading می گویند.
pading در جداول به طور پیش فرض صفر هستند.
برای تنظیم padding،از css ها استفاده کنید.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<h2>Cellpadding</h2>
<p>Cell padding specifies the space between the cell content and its borders.</p>
<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>
Cell Padding
مکان قرارگیری عنوان ها به طور پیش فرض :
به طور پیش فرض، عناوین جدول درشت و متمرکز هستند.
برای انتقال عنوانهای جدول به سمت چپ،راست از ویژگی text-align در CSS استفاده کنید:
<!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>
<h2>Left-align Headings</h2>
<p>To left-align the table headings, use the CSS text-align property.</p>
<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
مشخصهborder spacing :
این ویژگی به سلول ها ی جدول از داخل یک حاشیه می دهد.به مثال زیر دقت کنید.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
padding: 5px;
}
table {
border-spacing: 15px;
}
</style>
</head>
<body>
<h2>Border Spacing</h2>
<p>Border spacing specifies the space between the cells.</p>
<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>
مشخصه colspan :
برای ترکیب چند ستون با هم و ایجاد یک ستون بزرگتر استفاده می شود.
<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>
<p>To make a cell span more than one column, use the colspan attribute.</p>
<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 – بررسی تگ p در اچ تی ام ال جلسه دوازدهم (ویدیو)
مشخصه 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>
<p>To make a cell span more than one row, use the rowspan attribute.</p>
<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>
تگ <caption> :
برای اضافه کردن یک عنوان به یک جدول، از تگ <caption> استفاده کنید:
برچسب <caption> باید بلافاصله بعد از برچسب <table> وارد شود.
<!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>Table Caption</h2>
<p>To add a caption to a table, use the caption tag.</p>
<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>
استایل دهی ویژه به جدول :
برای تعریف یک استایل خاص برای یک جدول ،به صورت زیر اقدام کنید:
۱.یک id برای جدول در نظر بگیرید.
۲.یک استایل خاص به Idاعمال کنید.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
text-align: left;
}
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
</style>
</head>
<body>
<h2>Styling Tables</h2>
<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>
خلاصه جلسه :
ازتگ <table> در html برای تعریف یک جدول استفاده کنید.
از تگ <tr> در htmlبرای تعیین یک ردیف جدولاستفاده کنید.
از تگ <td>در html برای تعریف یک جدول استفاده کنید.
از تگ <th> در <html> برای تعریف یک عنوان جدول استفاده کنید.
از تگ <caption> در html برای تعریف یک عنوان جدول استفاده کنید.
ازتگ border برای تعریف حاشیه استفاده کنید.
از تگ border-collapse برای ایجاد حاشیه از داخل استفاده کنید.
ازتگ border-spacing برای تنظیم فاصله بین سلولهااستفاده کنید.
از تگ colspan برای ترکیب چند سلول استفاده کنید.
ازتگ rowspan برای ترکیب چند ردیف استفاده کنید.
از تگ id برای استایل دهی به جدول استفاده کنید.
منبع : همراه آی سی تی
شغل طراحی لباس چیست؟
موتور کادنزااستوک و در حد نو
موتور جستجو چیست و چگونه کار می کند؟
چرا اخذ مجوز استاندارد برای کالاهای وارداتی مهم است؟
10وب سایت برای ارتقاء دانش برنامه نویسی وب
هفتاد ایده کسب و کار با سرمایه کم
تگ های html–بررسی تگ درسنداچ تی ام ال-جلسه سوم (ویدیو)
بهترین کتابهای بازاریابی که هر مدیری باید بخواند!
کاربرد محتوای سایت در طراحی سایت
ساختار صفحات وب با جداول ۳ – جلسه بیست و چهارم(ویدیو)