100% کامل شده تا

سربرگ‌های جدول در اچ‌تی‌ام‌ال (HTML Table Headers)

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو


جداول HTML می‌توانند برای هر ستون یا سطر یا برای بسیاری از ستون‌ها/سطرها سربرگ داشته باشند.[۱]


EMIL TOBIAS LINUS
     
     
     
     
     
8:00    
9:00    
10:00    
11:00    
12:00    
13:00    
MON TUE WED THU FRI
8:00          
9:00          
10:00          
11:00          
12:00          
DECEMBER
     
     
     
     
     


سربرگ_های جدول HTML

سربرگ‌های جدول با عناصر th تعریف می‌شوند، هر عنصر th نشان دهندهٔ یک سلول جدول است.

مثال

<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>
</table>

مثال

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

مثال

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Table Headers</h2>

<p>Use the TH element to define table headers.</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>
</table>

</body>
</html>

Responsive demo.svg



سربرگ‌های جدول عمودی (Vertical Table Headers)

برای استفاده از ستون اول به عنوانِ عنوان جدول، اولین سلول در هر سطر را به عنوان یک عنصر th تعریف کنید:

مثال

<table>
  <tr>
    <th>Firstname</th>
    <td>Jill</td>
    <td>Eve</td>
  </tr>
  <tr>
    <th>Lastname</th>
    <td>Smith</td>
    <td>Jackson</td>
  </tr>
  <tr>
    <th>Age</th>
    <td>94</td>
    <td>50</td>
  </tr>
</table>

مثال

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

مثال

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Vertical Table Headers</h2>

<p>The first column becomes table headers if you set the first table cell in each table row to a TH element:</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <td>Jill</td>
    <td>Eve</td>
  </tr>
  <tr>
    <th>Lastname</th>
    <td>Smith</td>
    <td>Jackson</td>
  </tr>
  <tr>
    <th>Age</th>  
    <td>50</td>
    <td>94</td>
  </tr>
</table>

</body>
</html>

Responsive demo.svg





ترازبندی سربرگ‌های جدول (Align Table Headers)

به‌طور پیش‌فرض، سربرگ‌های جدول پررنگ و در مرکز قرار دارند:

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94


برای تراز به چپ سربرگ‌های جدول، از ویژگی text-align در سی‌اس‌اس استفاده کنید:

مثال

th {
  text-align: left;
}

مثال

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th {
  text-align: left;
}
</style>
</head>
<body>

<h2>Left-align Headers</h2>

<p>To left-align the table headers, 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>
</table>

</body>
</html>

Responsive demo.svg



سربرگ برای چند ستون (Header for Multiple Columns)

می‌توانید یک سربرگ داشته باشید که شامل دو یا چند ستون باشد.

Name Age
Jill Smith 50
Eve Jackson 94


برای انجام این کار، از ویژگی colspan در عنصر <th> استفاده کنید:

مثال

<table>
  <tr>
    <th colspan="2">Name</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>
</table>

مثال

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

مثال

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>A header that spans two columns</h2>

<p>Use the colspan attribute to have a header span over multiple columns.</p>

<table style="width:100%">
  <tr>
    <th colspan="2">Name</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>
</table>
</body>
</html>

Responsive demo.svg


در فصل colspan & rowspan در مورد colspan و rowspan بیشتر می‌آموزید.


عنوان جدول (Table Caption)

می‌توانید یک عنوان که سربرگ عنوان کل جدول است را اضافه کنید.

Monthly savings
Month Savings
January $100
February $50


برای افزودن یک عنوان به یک جدول، از تگ <caption> استفاده کنید:

مثال

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

مثال

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;
}

مثال

<!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>

Responsive demo.svg


توجه: تگ <caption> باید بلافاصله بعد از تگ <table> درج شود.

منابع آموزشی




به‌روزرسانی شده: ۸ روز پیش