ساختار صفحات وب با جداول ۳ - جلسه بیست و چهارم(ویدیو)

ساختار صفحات وب با جداول ۳ - جلسه بیست و چهارم(ویدیو)Reviewed by اشکان مولودی on Mar 13Rating: 5.0

در این جلسه از دوره آموزش html ساختار کار با جدول 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>

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>

بیشتر بخوانید : تگ 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>

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>

مکان قرارگیری عنوان ها به طور پیش فرض :

به طور پیش فرض، عناوین جدول درشت و متمرکز هستند.
برای انتقال عنوانهای جدول به سمت چپ،راست از ویژگی 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>

مشخصه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

هدیه ویژه همراه آی سی تی

جدیدترین مطالب در تلگرام

ساختار صفحات وب با جداول ۳ – جلسه بیست و چهارم(ویدیو)

جدول html :

border در html :

Collapsed Borders (نمایش با یک خط) :

Cell Padding (حاشیه درونی):

مکان قرارگیری عنوان ها به طور پیش فرض :

مشخصهborder spacing :

مشخصه colspan :

مشخصه rowspan :

تگ <caption> :

استایل دهی ویژه به جدول :

خلاصه جلسه :

ایجاد ساختار صفحات وب با جداول۲- جلسه بیست و سوم(ویدیو)

۱۰ نکته طلایی که درنوشتن مقالات سایتتان بایدبدانید.

مطالب مشابه

ساختار صفحات وب با جداول ۳ – جلسه بیست و چهارم(ویدیو)

ایجاد ساختار صفحات وب با جداول۲- جلسه بیست و سوم(ویدیو)

ایجاد ساختار صفحات وب با جداول – جلسه بیست و دوم(ویدیو)

پاسخ دهید لغو پاسخ

آموزش Html

هدیه ویژه همراه آی سی تی

جدیدترین مطالب در تلگرام