• در html با تگ <table> یک جدول تعریف می گردد
  • در درون تگ table به کمک تگ <tr> می توان یک سطر در جدول تعریف کرد و با تگ بسته <tr/> سطر به پایان رسیده و برای سطر جدید مجددا باید یک تگ tr جدید به کار برد
  • درن تگ table به کمک تگ <th> میتوان سربرگ هر ستون در جدول را تعیین نمود
  • به کمک تگ <td> می توان درون هر سطر(تگ tr) یک ستون ایجاد نمود و محتوای هر بلوک بین تگ باز و بسته td قرار می گیرند
  • بصورت پیشفرض جدول ها در html فاقد کادر می باشند لذا برای کادر دهی به کمک css می‌توان رنگ، ابعاد و نوع کادر (خط ممتد، نقطه چین، خط مقطع و خط دوبل) را برای جدول تعیین نمود

جدول زیر و قطعه کد آن نحوه ایجاد یک جدول ساده را نمایش میدهد:

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

کد html جدول بالا:

<html>
<body>
<table cellspacing="0">
<tbody>
<tr>
<th style="border: 1px solid black;">Company</th>
<th style="border: 1px solid black;">Contact</th>
<th style="border: 1px solid black;">Country</th>
</tr>
<tr>
<td style="border: 1px solid black;">Alfreds Futterkiste</td>
<td style="border: 1px solid black;">Maria Anders</td>
<td style="border: 1px solid black;">Germany</td>
</tr>
<tr>
<td style="border: 1px solid black;">Centro comercial Moctezuma</td>
<td style="border: 1px solid black;">Francisco Chang</td>
<td style="border: 1px solid black;">Mexico</td>
</tr>
<tr>
<td style="border: 1px solid black;">Ernst Handel</td>
<td style="border: 1px solid black;">Roland Mendel</td>
<td style="border: 1px solid black;">Austria</td>
</tr>
<tr>
<td style="border: 1px solid black;">Island Trading</td>
<td style="border: 1px solid black;">Helen Bennett</td>
<td style="border: 1px solid black;">UK</td>
</tr>
<tr>
<td style="border: 1px solid black;">Laughing Bacchus Winecellars</td>
<td style="border: 1px solid black;">Yoshi Tannamuri</td>
<td style="border: 1px solid black;">Canada</td>
</tr>
<tr>
<td style="border: 1px solid black;">Magazzini Alimentari Riuniti</td>
<td style="border: 1px solid black;">Giovanni Rovelli</td>
<td style="border: 1px solid black;">Italy</td>
</tr>
</tbody>
</table>
</body>
</html>

ایجاد فاصله بین محتوای جدول و کادر جدول با اتریبیوت padding

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 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 padding to 5px.</p>

</body>
</html>

خروجی کد بالا:

جدول درhtml

به صورت پیشفرض متن درون تگ th وسط چین و bold بوده و محتوای تگ td به صورت چپچین می‌باشد که با قرار دهی اتریبیوت های css زیر می توان محتوای جدول را راستچین و وسط چین نیز نمود:

در قطعه کد زیر محتوای جدول را وسط چین نموده ایم همچنین اگر مقدار center را برابر right قرار دهیم محتوا راستچین می‌گردد.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    text-align:center;
}
</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>
</body>
</html>

هنگام کادر بندی در یک جدول به این دلیل که هر کدام از بلوک ها جداگانه کادر میگیرند اگر اتریبیوت border-collapse: collapse را که در کد بالا می بینید را اگر وارد نکنیم کادر بندی بصورت منظم ایجاد نخواهد شد همچنین برای انجام این کار به یک مدل دیگر میتوانید درون تگ table این اتریبیوت را وارد نمایید:

<table cellspacing=”0″>

ایجاد جداولی که یک بلوک چند سطر یا ستون را به خود اختصاص می دهد:

قطعه کد زیر نحوه اختصاص ۲ سطر به یک عنصر را توسط اتریبیوت 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>

خروجی کد بالا:

colespan

قطعه کد زیر نحوه اختصاص ۲ ستون به یک عنصر را توسط اتریبیوت 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>

خروجی کد بالا:

rowspan در html

تگ <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>

<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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *